[OutSystems Charts] OutSystems Donut Chart Show Datapoint labels
Forge component by OutSystems R&D
Application Type
Mobile, Reactive

Dear All,

I am creating this question based on the previous queries regarding the option to show data point labels on a Donut Chart, additional this is one of the common requirements in most applications.

Donut Chart without Data labels:


Expected Donut Chart with datapoint labels:


Implementation Details:

 

OutSystems Charts uses the Highcharts API, you can customize and change your Chart by using Highcharts configuration options. These configuration options are defined as JSON snippets and can be used in the AdvancedFormat > HighchartsJSON field of a Chart.


OutSystems Reference: https://success.outsystems.com/Documentation/11/Reference/OutSystems_APIs/Charts_API#Structure_AdvancedFormat

 

To apply the configuration to the donut charts, please update the HighchartsJSON field of a Donut Chart with the below JSON code.

 

"plotOptions:

{

        series:

        {

            dataLabels:

            {

                enabled: true, // enable DataLabels

                format: '{point.name}: {y}', // format to replicatte Traditional Web labels

            }

        },

       

    }"


Please let us know in case if there any other improvements or any other similar implementations which might help others regarding advanced formating with OutSystems Charts. Attaching a sample OML file for reference in the answers section.

Solution

Attaching the sample OML File with the solution implemented.


Implementation Details:

 

OutSystems Charts uses the Highcharts API, you can customize and change your Chart by using Highcharts configuration options. These configuration options are defined as JSON snippets and can be used in the AdvancedFormatHighchartsJSON field of a Chart.


OutSystems Reference: https://success.outsystems.com/Documentation/11/Reference/OutSystems_APIs/Charts_API#Structure_AdvancedFormat

 

To apply the configuration to the donut charts, please update the HighchartsJSON field of a Donut Chart with the below JSON code.

 

"plotOptions:

{

        series:

        {

            dataLabels:

            {

                enabled: true, // enable DataLabels

                format: '{point.name}: {y}', // format to replicatte Traditional Web labels

            }

        },

       

    }"


OutSystemsDonutChartSample.oap

Hello @Mohammed Asif ,

Indeed, if you need to have the point name and the value in the label you need to do that custom configuration.

If you use the input parameter ChartFormat > ShowDataPointValues to True

You see information in the data point, but not the value, just the label:

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