DataLabels not shown in chart

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

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.


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

Solution

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.


Hi,

Thank you for your solution , its working fine.

You are welcome, Kishor :)

Glad I could be of help :)


Regards,

Benjith Sam