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.
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"
}
}
}
}
]
