84
Views
8
Comments
Solved
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
Rank: #91
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

Rank: #46945

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
                            }
                        }
                    } 
}"
)
mvp_badge
MVP
Rank: #91
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

mvp_badge
MVP
Rank: #91

Hi,

Thank you for your solution , its working fine.

You are welcome, Kishor :)

Glad I could be of help :)


Regards,

Benjith Sam

Rank: #19299

Hi Benjith Sam ,

How to solve the same issue with the donut chart?

Rank: #738

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