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!
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.
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?
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:
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?
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?
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?
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:
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!
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.
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?
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.
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.
Hi, the OML is for ODC. And yes, the json should be placed in HighchartsJSON.
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: {
format: '{point.name}'
},
legend:{
labelFormat: '{name} ({y})'
}" Thanks a lot!
Hi @Jeremy Hui,
You can concat a variable with the Label.
Hope it helps.
Thank You.
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!
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:
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?
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.