[OutSystems Charts] DataLabel.Formatter not working properly anymore in v2.x updates
outsystems-charts
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive

Hi team,


One of our advanced configs used the data label formatter option which placed labels on top of bar charts.

Worked properly in previous versions (ex: v.1.3.10), but after upgrading the Charts to any v2.x version, the formatting doesn't work anymore. At the moment we have the latest version and still does not work.

Is it related to RGRIDT-1095 fixed in v2.1.1? If not, any idea what can cause it? I've been reading the highcharts latest docs and data label.formatter is still a valid option.



JSON:

"plotOptions: {

        series: {

            dataLabels: {

                enabled: true,

                inside: false,

                color: 'black',

                formatter: function () { 

                    if(this.point.series.name==='test')

                    return ''

                    else if(this.point.series.name==='test 2')

                    return -(this.point.y / 1000000).toFixed(2)

                    else 

                    return (this.point.y / 1000000).toFixed(2)

                }

            },

            enableMouseTracking: false

        }


    }"


Thanks,

Lorena

Solution

Hi @Lorena Sabou and @Meng-Shiun Lin,

Sorry for this waiting. I think I've found a way to workaround this:

"plotOptions: {

        column: {

            dataLabels: {

                enabled: true,

                inside: false,

                color: 'black',

                formatter: function () {

                    if(this.point.series.name==='test'){

                        return '';

                    } else if(this.point.series.name==='test 2'){

                        return (this.point.y / 1000000).toFixed(2);

                    else {

                        return (this.point.y / 1000000).toFixed(2);

                    }

                }

            },

            enableMouseTracking: false

        }

    }

"

In bold you can find my changes to your HighchartsJSON, I can't explain all the Highcharts behaviours. But this major update was a big change on the library code (3 versions). One of the changes was the usage of strict mode.

Let me know if this unblocks you or if you have any other question.

Best Regards,
João Ferreira


Hello @Lorena Sabou 

Thank you for reaching out.
Could you please share the version you're using and a sample with that?

Cheers,
GM

Hi team,

Here is the sample on behalf of @Lorena Sabou.

With OutSystemsCharts version 2.2.0.

Thanks,

Meng

ChartTest.oml

Solution

Hi @Lorena Sabou and @Meng-Shiun Lin,

Sorry for this waiting. I think I've found a way to workaround this:

"plotOptions: {

        column: {

            dataLabels: {

                enabled: true,

                inside: false,

                color: 'black',

                formatter: function () {

                    if(this.point.series.name==='test'){

                        return '';

                    } else if(this.point.series.name==='test 2'){

                        return (this.point.y / 1000000).toFixed(2);

                    else {

                        return (this.point.y / 1000000).toFixed(2);

                    }

                }

            },

            enableMouseTracking: false

        }

    }

"

In bold you can find my changes to your HighchartsJSON, I can't explain all the Highcharts behaviours. But this major update was a big change on the library code (3 versions). One of the changes was the usage of strict mode.

Let me know if this unblocks you or if you have any other question.

Best Regards,
João Ferreira


Hallo Joao,

these changes also did not fix the issue.

What we expect to see is this: 

This is working with Outsystems Charts version 1.3.10.


But when using the same code with Outsystems Charts version 2.2.0, the labels are still missing:


Regards,

Michael

Hi @Michael111,

This is the chart I'm getting with the changes on the advancedFormat: 

(v. 2.2.0)

You can look in my sample on the resources.


Regards,
João Ferreira

ChartTest_DataLabels.oml

Hello Joao,

now I noticed, that I missed the change in plotOptions from series to column.

With column now it works for me. It seems that this was the single reason for failing, because I can even revert the other syntax changes and it still works. However it could be safer to write the full syntax anyhow.

Thank you!


Regards,

Michael


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