Perspectives X-Y Chart for Stacked BarCharts

Ignition
1

Using Perspectives X-Y Chart for Stacked BarCharts, can Total Labels be configured at the top of each stack? If yes, would appreciate some assistance on how this can be done. I tried creating a Total series but was still not successful in displaying the total label.

2

Yes, you can. Post some sample data and your current setup details, something to start with.

3

XYChart-StackedBarChart-Sample.xlsx (373.8 KB)

Thanks for the confirmation that it can be done & appreciate it. Attached is some sample data and screenshots of the current setup.

4

Sorry for the late reply, based on your provided info, here is an example JSON. Next time, please post the screenshots, and preferably the component JSON, directly in the post. It makes it easier for volunteers, like me, to help.

You can copy/paste the below JSON on an XY chart component. The full component JSON is evidently longer than allowed in a single post, so I'll post the series JSON for the total labels only.

Chart JSON

{
"name": "Totals",
"label": {
"text": ""
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "example",
"x": "Plant",
"y": "Total"
},
"xAxis": "Plant",
"yAxis": "value",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "line",
"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": "",
"opacity": 1,
"width": 1
},
"width": null,
"height": null,
"stacked": false,
"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": 3,
"opacity": 0,
"color": "",
"dashArray": ""
},
"fill": {
"color": "",
"opacity": 0
},
"bullets": [
{
"enabled": true,
"render": "label",
"width": 10,
"height": 10,
"label": {
"text": "{valueY}",
"position": {
"dx": 0,
"dy": -10
}
},
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"width": 1,
"opacity": 1
},
"rotation": 0,
"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": {
"color": "",
"opacity": 0
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"width": 1,
"opacity": 1
},
"rotation": 0,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
}
}

5

Thanks so much! Able to display the Total labels at the top of the stack now. The fontsize of the labels is quite large. Apologies but how can this be configured based on the configuration you provided? Another problem is when the stack is high, the values are truncated or not shown.

XYChart-StackedBarChart-Sample.xlsx (398.9 KB)

6

The labels are not shown because they are above the bars, and I suspect you have your y-axis range blank (auto). You will need to change the max value of the range to always have enough room for the labels.

One way to fix this, is to find the max total value you have then add something to it so there is always room for the labels. For example, max({this.props.dataSources.example},'Total') + 100. You would put this expression under yAxis → value → range → max.

For the font, you will probably need to add a fontSize property under Styles. I'm not sure how to target the total labels only. You can search the forum for ideas.