I am trying to get the pie chart to show values at the slices as shown in the image below. However, I can't get it to display there - it just shows the legend. Is this something on the OutSystems back end as far as what is going to highcharts?
Hello Jason.
I believe you also need to change the dataLabels applied to the series, can you try this one?
plotOptions: { series: { dataLabels: { enabled: true, // enable DataLabels format: '{point.name}: {y}', // format to replicatte Traditional Web labels } }}
My regards
Dinis Carvalho wrote:
THAT WORKED! Thank you! I could have sworn I tried this but I put that in and its working now. For reference here is the whole advanced config I am putting in. Some of it can be pared out but this is working to show the values as I wanted them above.
SyntaxEditor Code Snippet
"title: { text: 'Most Used Equipment', align: 'center' }, legend: { layout: 'vertical', backgroundColor: '#FFFFFF', floating: false, align: 'right', verticalAlign: 'middle', labelFormatter: function () { return this.name + ': ' + this.y; } }, plotOptions: { series: { dataLabels: { enabled: true, // enable DataLabels format: '{point.name}: {y}', // format to replicatte Traditional Web labels } }, pie: { showInLegend: false, allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', alignTo: 'connectors', format: '<b>{point.name}</b>', style: { color: 'black' } }, colors: [ '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4' ], } }"
Looks like outsystems is explicitly setting them to false and not sure if I can override it.
to provide as much info as possible - here is the advanced config I am inputting and I have version 1.3.0 of the outsystems charts.
"title: { text: 'Most Used Equipment', align: 'center' }, plotOptions: { pie: { showInLegend: false, allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', alignTo: 'connectors', format: '<b>{point.name}</b>', style: { color: 'black' } }, colors: [ '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4' ], } }"
Glad it worked :)
We are aware of the use case being quite hard to accomplish at the moment, due to the transition from the Charts Mobile defaults. Can't give an ETA, but we expect to work on this soon.
Cheers
Dinis, understood. As long as there is a workaround its good for now. I have a few more features we had to put in so if I have any more problems will post here again. Thank you again for the help!
Jason
Dinis - one more question. There are alot of new cool options on highstocks. Do you know if any plans to move the base highcharts.js reference over to being highstock.js to allow those to be used via advanced config? As far as I understand it (not that far) it shouldn't break anything in highcharts usage but will allow you to use the new highstock features. The on in particular I know we want is the slider (https://www.highcharts.com/stock/demo/stock-tools-gui)