[OutSystems Charts] Pie chart won't show values at slices

Forge Component
(8)
Published on 26 Feb by OutSystems R&D
8 votes
Published on 26 Feb by OutSystems R&D

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?

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.


SyntaxEditor Code Snippet

"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'
       ],
        }
    }"
Solution

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

Solution

Dinis Carvalho wrote:

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

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'
       ],
        }
    }"


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 Carvalho wrote:

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 Carvalho wrote:

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 - 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)