Is there a way to round the corners of the columns / bars in an XY chart where the series is displayed as a column.
Hi Matthew_DeLuca,
You may achieve that by using user created properties. To round the corners of the columns in the XY chart, you could manually add the properties cornerRadiusTopLeft
and cornerRadiusTopRight
under the manually created columns.template.column
object in your series property.
Hi @Emma_Ngo,
I've just implement your solution to round the bars corners because it seems like is not possible to manipulate them with css.
I wonder what other properties I could change in this way, because I can't find a list of them and if I try to add some other properties they don't work (for example boxShadow).
Thank you for the support.
Hi,
Do you know what field to add to hide the x-axis or to change the x-axis color to white, I have tried many custom fields and none of them work!
My chart
[
{
"type": "ia.chart.xy",
"version": 0,
"props": {
"title": {
"text": ".",
"appearance": {
"color": "#FFFFFF",
"font": {
"size": 18,
"weight": 500
}
}
},
"subtitle": {
"text": ".",
"appearance": {
"color": "#FFFFFF"
}
},
"legend": {
"enabled": false,
"position": "absolute",
"absolute": {
"x": "40%",
"y": "-12%"
},
"markers": {
"height": 10,
"stroke": {
"width": 0
}
},
"labels": {
"font": {
"weight": 50,
"size": 10,
"color": "#000000"
}
}
},
"xAxes": [
{
"name": "type",
"label": {
"enabled": false,
"text": "Type",
"color": "#4E5969"
},
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"inversed": false,
"render": "category",
"category": {
"break": {
"enabled": false,
"startCategory": "",
"endCategory": "",
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": false,
"timeUnit": "hour",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"format": "yyyy/M/d HH:mm"
},
"value": {
"range": {
"max": "",
"min": "",
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###.##"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "#080808",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 0,
"dashArray": "",
"minDistance": 100,
"position": 0.5
},
"font": {
"size": 14,
"weight": 400
}
}
}
],
"yAxes": [
{
"name": "value",
"label": {
"enabled": false,
"text": "num",
"color": "#4E5969"
},
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"inversed": false,
"render": "value",
"category": {
"break": {
"enabled": false,
"startCategory": "",
"endCategory": "",
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": false,
"timeUnit": "hour",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"format": "M/d/yyyy HH:mm:ss"
},
"value": {
"range": {
"max": "",
"min": "",
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###.##"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "#080808",
"opacity": 0,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 0,
"dashArray": "",
"minDistance": null,
"position": 0.5
},
"font": {
"size": 14,
"weight": 400
}
}
}
],
"series": [
{
"name": "Left",
"label": {
"text": "Left"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "data",
"x": "Type",
"y": "Num"
},
"xAxis": "type",
"yAxis": "value",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "column",
"candlestick": {
"open": {
"x": "",
"y": ""
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"appearance": {
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"stacked": false,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"column": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"fill": {
"color": "#037D6C",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 0
},
"stacked": false,
"width": 40,
"height": null,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"line": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 2,
"opacity": 1,
"color": "#080808",
"dashArray": ""
},
"fill": {
"opacity": 0,
"color": ""
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 5,
"height": 5,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"fill": {
"color": "#080808",
"opacity": 0.6
},
"stroke": {
"color": "",
"opacity": 0,
"width": 0
},
"rotation": 0,
"tooltip": {
"enabled": true,
"text": "{name}\n时间:{categoryX}[/]\nCpk:{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
},
"stepLine": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"opacity": 0,
"color": ""
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"rotation": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
},
"columns": {
"template": {
"column": {
"cornerRadiusTopLeft": 8,
"cornerRadiusTopRight": 8
}
}
}
}
],
"style": {
"classes": "Text/Content"
},
"dataSources": {
"data": {
"$": [
"ds",
192,
1736317518836
],
"$columns": [
{
"name": "Type",
"data": [
"Core Remaining",
"Strip Break",
"Electrode Defect",
"Startup"
],
"type": "String"
},
{
"name": "Num",
"data": [
220,
95,
80,
20
],
"type": "Double"
}
]
}
}
},
"meta": {
"name": "XYChart"
},
"position": {},
"custom": {},
"propConfig": {
"props.dataSources.data[0].datetime": {
"binding": {
"config": {
"path": "view.params.st"
},
"type": "property"
}
},
"props.dataSources.data[1].datetime": {
"binding": {
"config": {
"path": "view.params.et"
},
"type": "property"
}
}
}
}
]