DataLabels not shown in chart
Question

Hello ,

I am working on charts in react application. I want show datalabels on top of column in chart for that I uses Highcharts json and also tried with AdvancedFormat_Init action of chart but couldn't got the result.I used following HighCharts json from this link

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-enabled/

" plotOptions:{
    series: {
        dataLabels: {
            enabled:true
        }
    }
}"

Details:

OutSystems 11

Service Studio 11.7.9

Reactive Application

Chart.PNG

mvp_badge
MVP
Solution

Hi Kishor,

Implementing the same in Traditional Web application is very easy but It challenged me a lot to implement the same required implementation in Reactive Web Application. After a long research/trial finally I got success.... Hurrah :)

See the sample app

Steps to follow:

1) Set the YAxisJSON property of ColumnChart Block with below mentioned value

Code Snippet

"stackLabels: {
    enabled: true,
    style: {
         fontWeight: 'bold',
         color: 'red'
    }
}"


2) Set the HighchartsJSON property of ColumnChart Block with below mentioned value

Code Snippet

"plotOptions: {
    series : {
        animation: { duration: 5000} // optional
    },
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true
        }
    }
}"

Note: You can also assign the above mentioned value to respective Variable of AdvancedFormats Structure type and can directly map the compound variable to the ColumnChart Block -> AdvancedFormat Property


Please find the attached .oml solution file


Hope this helps you!


Regards,

Benjith Sam

ColumnChartReactiveDemoApp.oml

Benjith Sam wrote:

Hi Kishor,

Implementing the same in Traditional Web application is very easy but It challenged me a lot to implement the same required implementation in Reactive Web Application. After a long research/trial finally I got success.... Hurrah :)

See the sample app

Steps to follow:

1) Set the YAxisJSON property of ColumnChart Block with below mentioned value

Code Snippet

"stackLabels: {
    enabled: true,
    style: {
         fontWeight: 'bold',
         color: 'red'
    }
}"


2) Set the HighchartsJSON property of ColumnChart Block with below mentioned value

Code Snippet

"plotOptions: {
    series : {
        animation: { duration: 5000} // optional
    },
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true
        }
    }
}"

Note: You can also assign the above mentioned value to respective Variable of AdvancedFormats Structure type and can directly map the compound variable to the ColumnChart Block -> AdvancedFormat Property


Please find the attached .oml solution file


Hope this helps you!


Regards,

Benjith Sam

Hi,

Thank you for your solution , its working fine.


Kishor Maltumkar wrote:

Hello ,

I am working on charts in react application. I want show datalabels on top of column in chart for that I uses Highcharts json and also tried with AdvancedFormat_Init action of chart but couldn't got the result.I used following HighCharts json from this link

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-enabled/

" plotOptions:{
    series: {
        dataLabels: {
            enabled:true
        }
    }
}"

Details:

OutSystems 11

Service Studio 11.7.9

Reactive Application


Please add the code in the following format


SyntaxEditor Code Snippet

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:"{

        plotOptions: {
            series:     {
                dataLabels: {
                enabled:true
                            }
                        }
                    } 
}"
)

Ekadeep Kuruma wrote:

Kishor Maltumkar wrote:

Hello ,

I am working on charts in react application. I want show datalabels on top of column in chart for that I uses Highcharts json and also tried with AdvancedFormat_Init action of chart but couldn't got the result.I used following HighCharts json from this link

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-enabled/

" plotOptions:{
    series: {
        dataLabels: {
            enabled:true
        }
    }
}"

Details:

OutSystems 11

Service Studio 11.7.9

Reactive Application


Please add the code in the following format


SyntaxEditor Code Snippet

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:"{

        plotOptions: {
            series:     {
                dataLabels: {
                enabled:true
                            }
                        }
                    } 
}"
)

Hi,

Thank your quick reply.

I tried your given code but couldn't meet my goal. Can you tried on your own ?

Please if possible try in your reactive oml and tell me.


mvp_badge
MVP
Solution

Hi Kishor,

Implementing the same in Traditional Web application is very easy but It challenged me a lot to implement the same required implementation in Reactive Web Application. After a long research/trial finally I got success.... Hurrah :)

See the sample app

Steps to follow:

1) Set the YAxisJSON property of ColumnChart Block with below mentioned value

Code Snippet

"stackLabels: {
    enabled: true,
    style: {
         fontWeight: 'bold',
         color: 'red'
    }
}"


2) Set the HighchartsJSON property of ColumnChart Block with below mentioned value

Code Snippet

"plotOptions: {
    series : {
        animation: { duration: 5000} // optional
    },
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true
        }
    }
}"

Note: You can also assign the above mentioned value to respective Variable of AdvancedFormats Structure type and can directly map the compound variable to the ColumnChart Block -> AdvancedFormat Property


Please find the attached .oml solution file


Hope this helps you!


Regards,

Benjith Sam

ColumnChartReactiveDemoApp.oml

Benjith Sam wrote:

Hi Kishor,

Implementing the same in Traditional Web application is very easy but It challenged me a lot to implement the same required implementation in Reactive Web Application. After a long research/trial finally I got success.... Hurrah :)

See the sample app

Steps to follow:

1) Set the YAxisJSON property of ColumnChart Block with below mentioned value

Code Snippet

"stackLabels: {
    enabled: true,
    style: {
         fontWeight: 'bold',
         color: 'red'
    }
}"


2) Set the HighchartsJSON property of ColumnChart Block with below mentioned value

Code Snippet

"plotOptions: {
    series : {
        animation: { duration: 5000} // optional
    },
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true
        }
    }
}"

Note: You can also assign the above mentioned value to respective Variable of AdvancedFormats Structure type and can directly map the compound variable to the ColumnChart Block -> AdvancedFormat Property


Please find the attached .oml solution file


Hope this helps you!


Regards,

Benjith Sam

Hi,

Thank you for your solution , its working fine.


mvp_badge
MVP

Hi,

Thank you for your solution , its working fine.

You are welcome, Kishor :)

Glad I could be of help :)


Regards,

Benjith Sam

Hi Benjith Sam ,

How to solve the same issue with the donut chart?

mvp_badge
MVP

Densingh Daniel wrote:

Hi Benjith Sam ,

How to solve the same issue with the donut chart?

Hi Densingh,

Please refer the below Forum post link

https://www.outsystems.com/forums/discussion/64485/display-donut-chart-values-on-every-root/#Post253655


Hope this helps you!


Regards,

Benjith Sam

Hi All,

I know this post is now resolved but I have tried the solutions provided here and didn't work.

Managed to find the right config to make it work in my reactive web app so thought of sharing so this might help someone like me.

Below config in HighchartsJSON property helped me.

plotOptions: {
    series: {
        animation: false,
        dataLabels: {
            enabled: true,
            format: '{y}'
        }
    },
    column: {
        stacking: 'normal'
    }
},

Hope this helps.

Regards,

Karthik

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