78
Views
19
Comments
Solved
[OutSystems Charts] How to Display Data Value in the Pie/Donut Chart in ODC
outsystems-charts
Reactive icon
Forge asset by OutSystems
Application Type
Traditional Web, Mobile, Reactive, Service

In OutSystems Developer Cloud (ODC), I'm trying to display the value inside a Pie or Donut chart. I've already set the ShowDataPointValue property to True, but it's only showing the label without the value.

Has anyone managed to show both the label and the value (e.g., January: 45) directly on the chart?

Any guidance would be appreciated!


2026-01-28 16-57-48
Mihai Melencu
Champion
Solution

Hi @Jeremy Hui ,

I managed to recreate your desired result using the the V1 version of the DonutChart.

In the AdvancedFormat > HighchartsJSON


I implemented the following JSON:

"plotOptions: {   

pie: {      

dataLabels: {        

enabled: true,        

align: 'left',        

format: '{point.name} ({point.y})'    

 }    }  }"



______________

For the newer version you can do the following:

In the Initialized event of the chart add the SetHighchartsChartConfigs client action with the following configuration:

Result:

I also attached a sample OML in ODC.

SampleChart.oml
UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,

May I check with you regarding the Pie Chart? I noticed that the Pie Chart doesn't seem to support v1. Is there a way to achieve this or an alternative approach available for Pie Charts? 

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi, the second method, using the SetHighchartsConfigs, should work for the new Pie Chart.

Also if you can't see the V 1, it means you need to add it as a depedency, you can do easily from the toolbar:

UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,
Thanks for your reply, I 've another questions is that for the bar chart. How can we make the color for the legend same as the color of the bars? & also how to make the bar bigger?

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi, for the color issue you can add Addons/ChartSeriesStyling and apply the desired color. Also, make sure you set the right SeriesName, you need to do this for each Series.

What do you mean exactly by making the bar bigger? Height, width?

UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,

Is it possible to make the implementation more generic so that the colors for the series can also be retrieved from a list? Currently, I've applied this approach only for the label color. 

I mean: is there a way to increase the bar width?

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi, for the color styling you could use a List widget and inside it place the Addons, and then use the variables from the list as the configuration:



I created my own structure for SeriesConfig:

For the width you can use the LineWidth property from the same Styling property:




UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,

Thanks, this is really helpful!
If you don't mind, could you please share a sample OML file as well? Thanks again! 

2026-01-28 16-57-48
Mihai Melencu
Champion

I attached a sample OML, for the width I used a fixed width for all series, but you can make that dynamic by creating another attribute in the SeriesConfig structure and using it in the width property.

SampleChartBar.oml
UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,

Thanks!
Sorry for asking repeating questions about the Highcharts JSON — I just want to confirm:
Is it possible to display both the name and value in the legend, but show only the name in the labels on the pie/donut chart? 

2026-01-28 16-57-48
Mihai Melencu
Champion

No worries, you can edit the legend values with the following JSON:

"legend: {        

labelFormatter: function () {            

return this.name + ' (' this.y + ')';        

   }

}"

I attached a sample OML as well.

Result:

SampleChart.oml
UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,
This JSON should be placed in the Highcharts JSON configuration, right?
I tried importing your OML file into Service Studio (O11), but I encountered the following error message even my O11 is in latest version: 


tried to put the JSON in the HIGHCHART JSON but it come out error when loading the chart.

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi, the OML is for ODC. And yes, the json should be placed in HighchartsJSON.

UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,


Tried to open in ODC as well but showing this error message:Might need your help to screenshot the details for the bar chart on this:


However for the legend : i manage to achieve it with this JSON:




"{

    plotOptions: {          

        pie: {                  

                  dataLabels: {                        

                                          enabled: true,                        

                                          align: 'left',                        

                                          format: '{point.name}'                

                   }    

           }      

   },    

   legend:{        

                  enabled: true,        

                  labelFormat: '{name} ({y})'    

    } 

}" 
Thanks a lot!

2025-03-12 07-08-15
Nilesh Trivedi

Hi @Jeremy Hui,

You can concat a variable with the Label.

Hope it helps.

Thank You.

Piechart.oml
UserImage.jpg
Jeremy Hui

Hi @Nilesh Trivedi ,

Is it possible to hide the "(5)" label outside the chart while still showing the value "5" inside the chart label itself?

Thanks!

2022-12-22 10-00-39
Beatriz Sabino

Hi Jeremy,

I’ve created a sample .oml in O11, and the logic for ODC will be the same.

I’m using a Data Action to generate the data for the chart. Then, in the assign section, I dynamically set the label for the chart. In this case, I'm using the Product Sample Entity.

And this is the final result:

Charts_Example.oml
UserImage.jpg
Jeremy Hui

Hi @Beatriz Sabino ,

Is it possible to hide the value in the label outside the chart while still showing the value inside the chart label itself?

Thanks!

2022-12-22 10-00-39
Beatriz Sabino

Hi Jeremy,

So far I've only found the option to not show the legend at all.

For that in the Chart Legend, simply set "Visible" to false.

I will continue to look into this.

2026-01-28 16-57-48
Mihai Melencu
Champion
Solution

Hi @Jeremy Hui ,

I managed to recreate your desired result using the the V1 version of the DonutChart.

In the AdvancedFormat > HighchartsJSON


I implemented the following JSON:

"plotOptions: {   

pie: {      

dataLabels: {        

enabled: true,        

align: 'left',        

format: '{point.name} ({point.y})'    

 }    }  }"



______________

For the newer version you can do the following:

In the Initialized event of the chart add the SetHighchartsChartConfigs client action with the following configuration:

Result:

I also attached a sample OML in ODC.

SampleChart.oml
UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,

May I check with you regarding the Pie Chart? I noticed that the Pie Chart doesn't seem to support v1. Is there a way to achieve this or an alternative approach available for Pie Charts? 

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi, the second method, using the SetHighchartsConfigs, should work for the new Pie Chart.

Also if you can't see the V 1, it means you need to add it as a depedency, you can do easily from the toolbar:

UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,
Thanks for your reply, I 've another questions is that for the bar chart. How can we make the color for the legend same as the color of the bars? & also how to make the bar bigger?

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi, for the color issue you can add Addons/ChartSeriesStyling and apply the desired color. Also, make sure you set the right SeriesName, you need to do this for each Series.

What do you mean exactly by making the bar bigger? Height, width?

UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,

Is it possible to make the implementation more generic so that the colors for the series can also be retrieved from a list? Currently, I've applied this approach only for the label color. 

I mean: is there a way to increase the bar width?

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi, for the color styling you could use a List widget and inside it place the Addons, and then use the variables from the list as the configuration:



I created my own structure for SeriesConfig:

For the width you can use the LineWidth property from the same Styling property:




UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,

Thanks, this is really helpful!
If you don't mind, could you please share a sample OML file as well? Thanks again! 

2026-01-28 16-57-48
Mihai Melencu
Champion

I attached a sample OML, for the width I used a fixed width for all series, but you can make that dynamic by creating another attribute in the SeriesConfig structure and using it in the width property.

SampleChartBar.oml
UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,

Thanks!
Sorry for asking repeating questions about the Highcharts JSON — I just want to confirm:
Is it possible to display both the name and value in the legend, but show only the name in the labels on the pie/donut chart? 

2026-01-28 16-57-48
Mihai Melencu
Champion

No worries, you can edit the legend values with the following JSON:

"legend: {        

labelFormatter: function () {            

return this.name + ' (' this.y + ')';        

   }

}"

I attached a sample OML as well.

Result:

SampleChart.oml
UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,
This JSON should be placed in the Highcharts JSON configuration, right?
I tried importing your OML file into Service Studio (O11), but I encountered the following error message even my O11 is in latest version: 


tried to put the JSON in the HIGHCHART JSON but it come out error when loading the chart.

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi, the OML is for ODC. And yes, the json should be placed in HighchartsJSON.

UserImage.jpg
Jeremy Hui

Hi @Mihai Melencu ,


Tried to open in ODC as well but showing this error message:Might need your help to screenshot the details for the bar chart on this:


However for the legend : i manage to achieve it with this JSON:




"{

    plotOptions: {          

        pie: {                  

                  dataLabels: {                        

                                          enabled: true,                        

                                          align: 'left',                        

                                          format: '{point.name}'                

                   }    

           }      

   },    

   legend:{        

                  enabled: true,        

                  labelFormat: '{name} ({y})'    

    } 

}" 
Thanks a lot!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.