Hi,
Is is possible to add a shadow/outline to the column labels, I would prefer them to be white but they disappear when the bar is low.
Also, I use one series and then use deriveFieldsFromData to change the color of each category, I'm curious if I can have a legend representation for each category/column? I feel like I should be able to.
Thanks.
Can you paste your chart JSON here? (Right-click on the chart in the Project Browser and select Copy.) Format it properly as code using the </> button.
Definitely, here it is.
{
"custom": {
"Chart_Information": [
{
"color": "#507fcb",
"name": "CMM",
"value": 180
},
{
"color": "#6da7e3",
"name": "Cap Asm",
"value": 86
},
{
"color": "#91a1fd",
"name": "Thickness \u0026 Leakage",
"value": 36
},
{
"color": "#b75dd0",
"name": "Leakage \u0026 Torque",
"value": 25
},
{
"color": "#d45683",
"name": "Level Sensor Asm",
"value": 5
}
]
},
"params": {},
"propConfig": {
"custom.Chart_Information": {
"persistent": true
}
},
"props": {
"defaultSize": {
"height": 400
}
},
"root": {
"children": [
{
"meta": {
"name": "topQualityIssueChart"
},
"position": {
"basis": "400px"
},
"propConfig": {
"props.dataSources.Chart_Data": {
"binding": {
"config": {
"path": "view.custom.Chart_Information"
},
"type": "property"
}
}
},
"props": {
"dataSources": {},
"series": [
{
"candlestick": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
}
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"open": {
"x": "",
"y": ""
}
},
"column": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "color",
"opacity": ""
},
"stroke": {
"color": "color",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"height": null,
"stacked": false,
"stroke": {
"color": "#FFFFFF",
"opacity": 1,
"width": 1
},
"width": null
},
"open": {
"x": "",
"y": ""
}
},
"data": {
"source": "Chart_Data",
"x": "value",
"y": "name"
},
"defaultState": {
"visible": true
},
"hiddenInLegend": false,
"label": {
"text": "Issues"
},
"line": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": false,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"name": "Issues",
"render": "column",
"stepLine": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name} [bold]{value}[/]"
},
"visible": true,
"xAxis": "numIssues",
"yAxis": "Issue",
"zIndex": 0
}
],
"title": {
"text": "Hello"
},
"xAxes": [
{
"appearance": {
"font": {
"size": "",
"weight": 500
},
"grid": {
"color": "",
"dashArray": "",
"minDistance": 100,
"opacity": 0,
"position": 0.5
},
"inside": false,
"labels": {
"color": "",
"horizontalCenter": "middle",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle"
},
"opposite": false
},
"category": {
"break": {
"enabled": false,
"endCategory": "",
"size": 0.05,
"startCategory": ""
}
},
"date": {
"baseInterval": {
"count": 1,
"enabled": false,
"skipEmptyPeriods": false,
"timeUnit": "hour"
},
"break": {
"enabled": false,
"endDate": "",
"size": 0.05,
"startDate": ""
},
"format": "M/d",
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"inversed": false,
"label": {
"color": "",
"enabled": false,
"text": "Time"
},
"name": "numIssues",
"render": "value",
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": ""
},
"value": {
"break": {
"enabled": false,
"endValue": 100,
"size": 0.05,
"startValue": 0
},
"format": "#,###.##",
"logarithmic": false,
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"visible": true
}
],
"yAxes": [
{
"appearance": {
"font": {
"size": "",
"weight": 700
},
"grid": {
"color": "#ADADAD",
"dashArray": "",
"minDistance": null,
"opacity": 0.5,
"position": 0
},
"inside": true,
"labels": {
"color": "#FFFFFF",
"horizontalCenter": "middle",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle"
},
"opposite": false
},
"category": {
"break": {
"enabled": false,
"endCategory": "",
"size": 0.05,
"startCategory": ""
}
},
"date": {
"baseInterval": {
"count": 1,
"enabled": false,
"skipEmptyPeriods": false,
"timeUnit": "hour"
},
"break": {
"enabled": false,
"endDate": "",
"size": 0.05,
"startDate": ""
},
"format": "M/d/yyyy HH:mm:ss",
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"inversed": true,
"label": {
"color": "#A7A7A7",
"enabled": true,
"text": "Test"
},
"name": "Issue",
"render": "category",
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": ""
},
"value": {
"break": {
"enabled": false,
"endValue": 100,
"size": 0.05,
"startValue": 0
},
"format": "#,###.##",
"logarithmic": false,
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"visible": true
}
]
},
"type": "ia.chart.xy"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
}
[
{
"type": "ia.chart.xy",
"version": 0,
"props": {
"title": {
"text": "Hello"
},
"xAxes": [
{
"name": "numIssues",
"label": {
"enabled": false,
"text": "Time",
"color": ""
},
"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"
},
"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": "",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 0,
"dashArray": "",
"minDistance": 100,
"position": 0.5
},
"font": {
"size": "",
"weight": 500
}
}
}
],
"yAxes": [
{
"name": "Issue",
"label": {
"enabled": true,
"text": "Test",
"color": "#A7A7A7"
},
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"inversed": true,
"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": "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": true,
"labels": {
"color": "#FFFFFF",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "#ADADAD",
"opacity": 0.5,
"dashArray": "",
"minDistance": null,
"position": 0
},
"font": {
"size": "",
"weight": 700
}
}
}
],
"series": [
{
"name": "Issues",
"label": {
"text": "Issues"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "Chart_Data",
"x": "value",
"y": "name"
},
"xAxis": "numIssues",
"yAxis": "Issue",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "{name} [bold]{value}[/]",
"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": "",
"opacity": 1
},
"stroke": {
"color": "#FFFFFF",
"opacity": 1,
"width": 1
},
"stacked": false,
"width": null,
"height": null,
"deriveFieldsFromData": {
"fill": {
"color": "color",
"opacity": ""
},
"stroke": {
"color": "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": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"opacity": 0,
"color": ""
},
"bullets": [
{
"enabled": false,
"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": ""
}
}
]
}
},
"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": ""
}
}
]
}
}
}
],
"dataSources": {}
},
"meta": {
"name": "topQualityIssueChart"
},
"position": {
"basis": "400px"
},
"custom": {},
"propConfig": {
"props.dataSources.Chart_Data": {
"binding": {
"config": {
"path": "view.custom.Chart_Information"
},
"type": "property"
}
}
}
}
]
Thanks.
I can add textShadow : 2px 2px 5px black into the CSS in my browser's development tools to get what you're looking for but I can't figure out how to add it into the XY Chart properties. I'm sure someone else will be along ...