Data Labels in Chart

3 mins read

What are data labels in chart?

Data labels provide more information to improve the readability of JavaScript chart and provides options to customize the labels.

Enabling data label

The data label for a data point can be enabled using the visible property in the dataLabel option. By default, data labels will be rendered at the top of the data points.

let chart: Chart = new Chart({
    series: [{
        marker: { 
            dataLabel: { 
                visible: true 
            } 
        }             
    }],
});
chart.appendTo('#container');

Enabling data label in JavaScript Chart

Demo: Enable data label

Binding data labels from dataSource

You can bind the text value to the data label from the dataSource by mapping the field with the name property in the series.

let chart: Chart = new Chart({
    series: [{
        dataSource: [
             //… 
            {x: 'GBR', y: 27, text:'GBR : 27' }
            //…
        ], 
        marker: { 
            dataLabel: { 
                visible: true,
                name:'text'
            }
        }             
    }],
});
chart.appendTo('#container');

Binding data labels in JavaScript Chart

Demo: Binding data label

Applying fill color for data label

The background color of the data label can be customized using the fill property.

let chart: Chart = new Chart({
    series: [{
        marker: { 
            dataLabel: { 
                visible: true,
                fill : ‘red’
            }
        }             
    }],
});
chart.appendTo('#container');

Data label fill color in JavaScript Chart

Demo: Data label fill

Opacity for data label background

Opacity property is used to add transparency to the background color of data label.

let chart: Chart = new Chart({
    series: [{
        marker: { 
            dataLabel: { 
                visible: true,
                fill : ‘red’,
                opacity: 0.5
            }
        }             
    }],
});
chart.appendTo('#container');

Data label opacity in JavaScript Chart

Demo: Data label opacity

Enabling rotation for data labels

You can rotate the data labels using angle property. Data label will be rotated only when enableRotation property is enabled.

let chart: Chart = new Chart({
    series: [{
        marker: { 
            dataLabel: { 
                visible: true,
                enableRotation: true,
                angle : 45
            }
        }             
    }],
});
chart.appendTo('#container');

Data label rotation in JavaScript Chart

Demo: Data label rotation

Data label positioning

You can position the data label to the top, bottom, middle, outer or auto of the point using position property.

let chart: Chart = new Chart({
    series: [{
        marker: { 
            dataLabel: { 
                visible: true,
                position: 'Top'
            } 
        }             
    }],
});
chart.appendTo('#container');

Data label position in JavaScript Chart

Demo: Data label position

Data label border

Color and width of the border for datalabel can be customized using the border property.

let chart: Chart = new Chart({
    series: [{
        marker: { 
            dataLabel: { 
                visible: true,
                border: {
                    color: 'red', 
                    width: 1
                },
            }
        }             
    }],
});
chart.appendTo('#container');

Border for data label in JavaScript Chart

Demo: Data label border

Rounded corner customization

The corner of data label can be customized using rx and ry property.

let chart: Chart = new Chart({
    series: [{
        marker: { 
            dataLabel: { 
                visible: true,
                border: {
                    color: 'red', 
                    width: 1
                },
                rx : 0,
                ry : 0
            }
        }             
    }],
});
chart.appendTo('#container');

Data label rounded corners in JavaScript Chart

Demo: Rounder corner

Data label margin

The margin property is used to provide space for data label text in left, right, top and bottom position.

let chart: Chart = new Chart({
    series: [{
        marker: { 
            dataLabel: { 
                visible: true,
                border: {
                    color: 'red', 
                    width: 1
                },
                margin : {
                    left : 10,
                    right : 10,
                    top : 10,
                    bottom : 10
                }
            }
        }             
    }],
});
chart.appendTo('#container');

Margin for data label in JavaScript Chart

Demo: Data label margin

Data label font customization

Appearance of data label can be customized using font property.

let chart: Chart = new Chart({
    series: [{
        marker: { 
            dataLabel: { 
                visible: true,
                font: { 
                    fontWeight: '600', 
                    color: 'red',
                    size:'13px',
                    fontFamily:'Arial',
                    fontStyle: 'Italic' 
                }
            }
        }             
    }],
});
chart.appendTo('#container');

Customizing data label font in JavaScript Chart

Demo: Data label font

Data label template

Data label content can be formatted using template property. You can include placeholder text point.x and point.y to display the x and y value of data points.

let chart: Chart = new Chart({
    series: [{
        marker: { 
            dataLabel: { 
                visible: true,
                template:'<div>${point.x} : ${point.y}</div>'
            }
        }             
    }],
});
chart.appendTo('#container');

Template for data label in JavaScript Chart

Demo: Data label template

Data label customization using event

You can customize the data labels using textRender event. It allows you to change the text of any data point.

let chart: Chart = new Chart({
    series: [{
        marker: { 
            dataLabel: { 
                visible: true
            }
        }             
    }],
    textRender: (args: ITextRenderEventArgs) => {
        args.text = args.point.x + ' : ' + args.text;
        args.color = 'red';           
    },
});
chart.appendTo('#container');

Customizing data label using event i JavaScript Chart

Demo: Customization using event

Did you find this information helpful?

Yes

Comments (0)