Format the marker dataLabel

[Marco Giorgi]

I have a column chart and I've enabled the dataLabel to show the values for each column.

How can I decide the format of the numbers?

I'd like to show always two decimal places, like 1,234.56 even if the number in the data source has no decimal places and it's an integer.

here is my code:

$("#cur-ex-rate-chart").ejChart({

                    //Initializing Primary X Axis

                    primaryXAxis:

                    {

                        valueType: 'category',

                        majorGridLines: { visible: false }

                    },

                    //Initializing Primary Y Axis

                    primaryYAxis:

                    {

                        labelFormat: "{value}",

                        majorGridLines: { visible: false }

                    },

                    //Initializing Common Properties for all the series

                    commonSeriesOptions:

                    {

                        type: 'column',

                        enableAnimation: true,

                        tooltip: { visible: false },

                        columnWidth: 0.4,

                        marker: {

                            visible: false,

                            dataLabel: {

                                font: {

                                    size: '14px',

                                    fontFamily: 'Arial',

                                    fontStyle: 'Normal',

                                    fontWeight: 'regular',

                                    color: '#ffffff'

                                },

                                textPosition: 'middle',

                                visible: true,

                                enableContrastColor: false

                            }

                        }

                    },

                    //Initializing Series

                    series: [{

                        fill: '#DC952A',

                        xName: 'date',

                        yName: 'val',

                        dataSource: jsonData

                    }],

                    isResponsive: true,

                    size: { height: "200", width: '70%' },

                    legend: { visible: false }

                });

[Dharanidharan Dharmasivam]

Hi Marco, 

Thanks for using Syncfusion products. 

We have analyzed your query. Your requirement can be achieved by using the labelFormat property of the axis. Here you need to specify the labelFormat as “n”, this format will get applied for data label value also. Find the code snippet below to achieve this requirement. 

JS: 

$("#container").ejChart({ 

      primaryYAxis: 

                    { 

                        labelFormat: "n", 

                    }, 

       //... 

}); 

Screenshot: 

 

Sample for reference can be find from below link. 

https://jsplayground.syncfusion.com/1jr5w0xn  

For more information on label format, kindly find the help document below. 

https://help.syncfusion.com/js/chart/axis#label-format  

kindly revert us, if you have any concerns. 

Thanks, 

Dharani.