Skip to Content (Press Enter)
UserImage.jpg
Kishor Maltumkar
444Views
8Comments
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
0
0
11 Jun 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
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

See solution in context
ColumnChartReactiveDemoApp.oml
1
0
11 Jun 2020
Copy Link
UserImage.jpg
Kishor Maltumkar

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.


0
0
12 Jun 2020
Copy Link
2023-12-31 10-08-37
Ekadeep K

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
                            }
                        }
                    } 
}"
)
0
0
11 Jun 2020
Copy Link
UserImage.jpg
Kishor Maltumkar

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.


0
0
11 Jun 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
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
1
0
11 Jun 2020
Copy Link
UserImage.jpg
Kishor Maltumkar

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.


0
0
12 Jun 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi,

Thank you for your solution , its working fine.

You are welcome, Kishor :)

Glad I could be of help :)


Regards,

Benjith Sam

0
0
12 Jun 2020
Copy Link
UserImage.jpg
Densingh Daniel

Hi Benjith Sam ,

How to solve the same issue with the donut chart?

0
0
12 Sep 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
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

0
0
13 Sep 2020
Copy Link
2020-02-29 11-43-36
Karthik Nataraj

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

1
0
20 Oct 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.