Data labels in JavaScript Charts

Data labels display the values of data points directly on the chart, reducing the need to reference axes for exact values. Enable data labels by setting the visible option to true in the dataLabel configuration. Labels automatically adjust to avoid overlapping and maintain readability.

var chartData = [
    { x: new Date(2016, 0, 1), y: -7.1 }, { x: new Date(2016, 1, 1), y: -3.7 },
    { x: new Date(2016, 2, 1), y: 0.8 }, { x: new Date(2016, 3, 1), y: 6.3 },
    { x: new Date(2016, 4, 1), y: 13.3 }, { x: new Date(2016, 5, 1), y: 18.0 },
    { x: new Date(2016, 6, 1), y: 19.8 }, { x: new Date(2016, 7, 1), y: 18.1 },
    { x: new Date(2016, 8, 1), y: 13.1 }, { x: new Date(2016, 9, 1), y: 4.1 },
    { x: new Date(2016, 10, 1), y: -3.8 }, { x: new Date(2016, 11, 1), y: -6.8 }
];
var chart = new ej.charts.Chart({
        primaryXAxis: {
            title: 'Months',
            valueType: 'DateTime', labelFormat: 'yMMM',
            edgeLabelPlacement: 'Shift'
        },
        primaryYAxis:
        {
            title: 'Temperature (Celsius)',
            minimum: -20, maximum: 20, interval: 10,
            edgeLabelPlacement: 'Shift',
            labelFormat: '{value}°C'
        },
        series: [
            {
                type: 'Line', name: 'Warmest', width: 2,
                dataSource: chartData, xName: 'x', yName: 'y',
                marker: {
                    visible: true,
                    height: 10, width: 10,
                    shape: 'Pentagon',
                    //Data label for chart series
                    dataLabel: { visible: true }
                }
            }
        ],
        title: 'Alaska Weather Statistics - 2016'
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Note: To use the data label feature, inject DataLabel using Chart.Inject(DataLabel) method.

Position

Use the position property to place data labels at Top, Middle, Bottom, or Outer (applicable to column and bar series). Appropriate label positioning enhances clarity and preserves chart readability.

var chartData = [
    { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
    { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
    { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
    { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
    { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
    { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
];
var chart = new ej.charts.Chart({
        primaryXAxis: {
            title: 'Months',
            valueType: 'Category'
        },
        primaryYAxis:
        {
            title: 'Temperature (Celsius)',
            minimum: -20, maximum: 25, interval: 5,
            edgeLabelPlacement: 'Shift',
            labelFormat: '{value}°C'
        },
        series: [
            {
                type: 'Column', name: 'Warmest',
                dataSource: chartData, xName: 'x', yName: 'y',
                marker: {
                    visible: true,
                    height: 10, width: 10,
                    shape: 'Pentagon',
                    //Data label position as middle
                    dataLabel: { visible: true, position: 'Middle' }
                }
            }
        ],
        title: 'Alaska Weather Statistics - 2016'
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Note: The Outer position applies only to column and bar series types.

Data Label Template

Customize label content using templates. Use placeholders such as ${point.x} and ${point.y} to display data point values. The template property enables fully customizable and visually rich labels.

var chartData = [
    { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
    { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
    { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
    { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
    { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
    { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
];
var chart = new ej.charts.Chart({
        primaryXAxis: {
            title: 'Months',
            valueType: 'Category'
        },
        primaryYAxis:
        {
            title: 'Temperature (Celsius)',
            minimum: -20, maximum: 25, interval: 5,
            edgeLabelPlacement: 'Shift',
            labelFormat: '{value}°C'
        },
        series: [
            {
                type: 'Column', name: 'Warmest',
                dataSource: chartData, xName: 'x', yName: 'y',
                marker: {
                    visible: true,
                    height: 10, width: 10,
                    shape: 'Pentagon',
                    //Data label position as middle
                    dataLabel: { visible: true, position: 'Middle', margin:{ left:5, right:5, top:5, bottom:5 } }
                }
            }
        ],
        title: 'Alaska Weather Statistics - 2016'
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Text Mapping

Display custom text using the name property, which maps label text from a specific field in the data source. This feature is useful for descriptive or category‑based labels.

var chartData = [
    { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
    { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
    { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
    { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
    { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
    { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
];
var chart = new ej.charts.Chart({
        primaryXAxis: {
            title: 'Months',
            valueType: 'Category'
        },
        primaryYAxis:
        {
            title: 'Temperature (Celsius)',
            minimum: -20, maximum: 25, interval: 5,
            edgeLabelPlacement: 'Shift',
            labelFormat: '{value}°C'
        },
        series: [
            {
                type: 'Column', name: 'Warmest',
                dataSource: chartData, xName: 'x', yName: 'y',
                marker: {
                    visible: true,
                    height: 10, width: 10,
                    shape: 'Pentagon',
                    //Data label position as middle
                    dataLabel: { visible: true, position: 'Middle' }
                }
            }
        ],
        title: 'Alaska Weather Statistics - 2016'
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Format

Apply number or date formatting using the format property. Global formatting symbols include:

  • n – number format
  • p – percentage format
  • c – currency format
var chartData = [
    { x: new Date(2016, 0, 1), y: -7 }, { x: new Date(2016, 1, 1), y: -3 },
    { x: new Date(2016, 2, 1), y: 8 }, { x: new Date(2016, 3, 1), y: 6 },
    { x: new Date(2016, 4, 1), y: 13 }, { x: new Date(2016, 5, 1), y: 18 },
    { x: new Date(2016, 6, 1), y: 19 }, { x: new Date(2016, 7, 1), y: 18 },
    { x: new Date(2016, 8, 1), y: 13 }, { x: new Date(2016, 9, 1), y: 4 },
    { x: new Date(2016, 10, 1), y: -3 }, { x: new Date(2016, 11, 1), y: -6 }
];
var chart = new ej.charts.Chart({
        primaryXAxis: {
            title: 'Months',
            valueType: 'DateTime', labelFormat: 'yMMM',
            edgeLabelPlacement: 'Shift'
        },
        primaryYAxis:
        {
            title: 'Temperature (Celsius)',
            minimum: -20, maximum: 20, interval: 10,
            edgeLabelPlacement: 'Shift',
            labelFormat: '{value}°C'
        },
        series: [
            {
                type: 'Line', name: 'Warmest', width: 2,
                dataSource: chartData, xName: 'x', yName: 'y',
                marker: {
                    visible: true,
                    height: 10, width: 10,
                    shape: 'Pentagon',isFilled: true,
                    //Data label for chart series
                    dataLabel: { visible: true , format:"n2"}
                }
            }
        ],
        title: 'Alaska Weather Statistics - 2016'
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Value Format Resultant Value Description
1000 n1 1000.0 Rounded to 1 decimal place.
1000 n2 1000.00 Rounded to 2 decimal places.
1000 n3 1000.000 Rounded to 3 decimal places.
0.01 p1 1.0% Converted to percentage with 1 decimal place.
0.01 p2 1.00% Converted to percentage with 2 decimal places.
0.01 p3 1.000% Converted to percentage with 3 decimal places.
1000 c1 $1000.0 Currency with 1 decimal place.
1000 c2 $1000.00 Currency with 2 decimal places.

Margin

Adjust spacing around labels using the margin property, which includes left, right, bottom, and top values. Margins help prevent labels from overlapping chart elements.

var chartData = [
    { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
    { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
    { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
    { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
    { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
    { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
];
var chart = new ej.charts.Chart({
        primaryXAxis: {
            title: 'Months',
            valueType: 'Category'
        },
        primaryYAxis:
        {
            title: 'Temperature (Celsius)',
            minimum: -20, maximum: 25, interval: 5,
            edgeLabelPlacement: 'Shift',
            labelFormat: '{value}°C'
        },
        series: [
            {
                type: 'Column', name: 'Warmest',
                dataSource: chartData, xName: 'x', yName: 'y',
                marker: {
                    visible: true,
                    height: 10, width: 10,
                    shape: 'Pentagon',
                    //Data label position as middle
                    dataLabel: { visible: true, position: 'Middle', margin:{ left:5, right:5, top:5, bottom:5 } }
                }
            }
        ],
        title: 'Alaska Weather Statistics - 2016'
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Customization

Enhance label appearance using properties such as fill (background), border, and corner radius (rx, ry). Refine text appearance using the font settings, which support color, fontFamily, fontWeight, and size.

var chartData = [
    { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
    { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
    { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
    { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
    { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
    { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
];
var chart = new ej.charts.Chart({
        primaryXAxis: {
            title: 'Months',
            valueType: 'Category'
        },
        primaryYAxis:
        {
            title: 'Temperature (Celsius)',
            minimum: -20, maximum: 25, interval: 5,
            edgeLabelPlacement: 'Shift',
            labelFormat: '{value}°C'
        },
        series: [
            {
                type: 'Column', name: 'Warmest',
                dataSource: chartData, xName: 'x', yName: 'y',
                marker: {
                    visible: true,
                    height: 10, width: 10,
                    shape: 'Pentagon',
                    //Data label position as middle
                    dataLabel: { visible: true, position: 'Middle', margin:{ left:5, right:5, top:5, bottom:5 } }
                }
            }
        ],
        title: 'Alaska Weather Statistics - 2016'
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Note: The rx and ry properties require non‑null border values.

Handling Overlapping Data Labels

Use the labelIntersectAction property to specify how overlapping data labels are handled.

The available options are:

  • None - Displays all data labels even when they overlap.
  • Hide - Hides overlapping data labels.
  • Rotate90 - Rotates overlapping data labels by 90 degrees.
  • RelocateVertically - Relocates overlapping data labels vertically.
  • RelocateHorizontally - Relocates overlapping data labels horizontally.

The RelocateVertically and RelocateHorizontally options are supported only for the following series types:

  • StackingColumn
  • StackingColumn100
  • StackingBar
  • StackingBar100

These relocation modes enable the Smart Data Label feature, which improves readability by relocating overlapping data labels and connecting them to their corresponding data points using connector lines. Use the smartLabelSettings property to customize relocated labels through the background, pointerShape, border, connectorLineStyle, and offset settings. The offset property is applicable only when labelIntersectAction is set to RelocateVertically.

var dataA = [{ x: 'Period 1', y: 35, text: '35%' }, { x: 'Period 2', y: 30, text: '30%' }, { x: 'Period 3', y: 32, text: '32%' }];
var dataB = [{ x: 'Period 1', y: 22, text: '22%' }, { x: 'Period 2', y: 25, text: '25%' }, { x: 'Period 3', y: 24, text: '24%' }];
var dataC = [{ x: 'Period 1', y: 14, text: '14%' }, { x: 'Period 2', y: 16, text: '16%' }, { x: 'Period 3', y: 15, text: '15%' }];
var dataD = [{ x: 'Period 1', y: 10, text: '10%' }, { x: 'Period 2', y: 11, text: '11%' }, { x: 'Period 3', y: 12, text: '12%' }];
var dataE = [{ x: 'Period 1', y: 7, text: '7%' }, { x: 'Period 2', y: 8, text: '8%' }, { x: 'Period 3', y: 6, text: '6%' }];
var dataF = [{ x: 'Period 1', y: 5, text: '5%' }, { x: 'Period 2', y: 5, text: '5%' }, { x: 'Period 3', y: 5, text: '5%' }];
var dataG = [{ x: 'Period 1', y: 4, text: '4%' }, { x: 'Period 2', y: 3, text: '3%' }, { x: 'Period 3', y: 4, text: '4%' }];
var dataH = [{ x: 'Period 1', y: 3, text: '3%' }, { x: 'Period 2', y: 2, text: '2%' }, { x: 'Period 3', y: 2, text: '2%' }];

var seriesData = [
    { name: 'Category A', data: dataA, fill: '#254061' },
    { name: 'Category B', data: dataB, fill: '#376092' },
    { name: 'Category C', data: dataC, fill: '#4f81bd' },
    { name: 'Category D', data: dataD, fill: 'CornflowerBlue' },
    { name: 'Category E', data: dataE, fill: 'LightBlue' },
    { name: 'Category F', data: dataF, fill: 'LightSteelBlue' },
    { name: 'Category G', data: dataG, fill: 'Moccasin' },
    { name: 'Category H', data: dataH, fill: 'LightGrey' }
];
var Chart = new ej.charts.Chart({
    title: 'Chart Title',
    tooltip: { enable: true },
    legendSettings: { visible: true },
    primaryXAxis: { valueType: 'Category' },
    primaryYAxis: { visible: false },

    series: seriesData.map(function (item) {
        return {
            name: item.name,
            dataSource: item.data,
            xName: 'x',
            yName: 'y',
            type: 'StackingColumn',
            fill: item.fill,
            columnWidth: 0.6,
            marker: {
                dataLabel: {
                    visible: true,
                    name: 'text',
                    fill: 'Transparent',
                    labelIntersectAction: 'RelocateVertically',
                    smartLabelSettings: {
                        background: '#4f4f4f',
                        border: { color: 'black', dashArray: '2', width: 2 },
                        connectorLineStyle: { color: 'black', width: 2 },
                        pointerShape: 'Arrow',
                        offset: 0.5
                    }
                }
            }
        };
    })
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Customizing Specific Point

Customize individual markers or labels using the pointRender and textRender events.

  • pointRender modifies shape, color, or border of a point.
  • textRender customizes the label text for specific points.
var chartData = [
    { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
    { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
    { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
    { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
    { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
    { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        title: 'Months',
        valueType: 'Category'
    },
    primaryYAxis:
    {
        title: 'Temperature (Celsius)',
        minimum: -20, maximum: 25, interval: 5,
        edgeLabelPlacement: 'Shift',
        labelFormat: '{value}°C'
    },
    series: [
        {
            type: 'Line', name: 'Warmest', width: 2,
            dataSource: chartData, xName: 'x', yName: 'y',
            marker: {
                visible: true,
                height: 10, width: 10,
                shape: 'Pentagon',
                dataLabel: { visible: true }
            }
        }
    ],
    title: 'Alaska Weather Statistics - 2016',
    // pointRender event for chart
    pointRender: (args) => {
        if (args.point.index === 6) {
            args.fill = 'red'
        }
    },
    textRender: (args) => {
        if (args.point.index === 6) {
            args.text = 'Maximum Temperature';
            args.color = 'red';
        }
    }
}, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Show percentage based on each series points

Calculate and display percentage values based on each series’ total using the seriesRender and textRender events.

  • In seriesRender, compute the total of y values.
  • In textRender, calculate the percentage for each point and update the label text.
var total = [];

var chart = new ej.charts.Chart({
    //Initializing Primary X Axis
    primaryXAxis: {
        valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
    },
    chartArea: { border: { width: 0 } },
    //Initializing Primary X Axis
    primaryYAxis: {
        majorGridLines: { width: 0 },
        majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
    },
    //Initializing Chart Series
    series: [
        {
            type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Gold',
            dataSource: [{ x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }],
            marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }
        },
        {
            type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Silver',
            dataSource: [{ x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }],
            marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }
        },
        {
            type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Bronze',
            dataSource: [{ x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }],
            marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color:'#ffffff' } } }
        }
    ],
    //Initializing Chart Title
    title: 'Olympic Medal Counts - RIO', tooltip: { enable: true },
    width: ej.base.Browser.isDevice ? '100%' : '60%',
    seriesRender: function(args) {
        for (var i = 0; i < args.data.length; i++) {
          if (!total[args.data[i].x]) total[args.data[i].x] = 0;
          total[args.data[i].x] += parseInt(args.data[i].y);
        }
      },
    textRender: function(args) {
        var percentage = (parseInt(args.text) / total[args.point.x]) * 100;
        percentage = percentage % 1 === 0 ? percentage : percentage.toFixed(2);
        args.text = percentage + '%';
     },

});
chart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Last value label

The lastValueLabel feature highlights the final data point in a series, making the latest trend or value easy to identify.

Enable last value label

Enable the label by setting the enable property inside the lastValueLabel configuration.

var chartData = [
     { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
    { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 40 }
 ];
var Chart = new ej.charts.Chart({
    primaryXAxis: {
        title: 'Year',
        interval: 1
    },
    primaryYAxis: {
 
        title: 'Efficiency',
        labelFormat: '{value}%'
    },
    width: '90%',
    series: [{
        dataSource: chartData,
        xName: 'x', yName: 'y',
        name: 'series1',
        marker: { visible: false, dataLabel: { visible: true } },
        type: 'Column', animation: { enable: true },
        lastValueLabel: { enable: true }
    }],
 
    tooltip: { enable: true },
 
    title: 'Efficiency of oil-fired power production'
    }, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Note: To use the last value label feature, inject the LastValueLabel module using Chart.Inject(LastValueLabel) method.

Customization

Customize the appearance using properties such as font, background, border, dashArray, lineWidth, lineColor, rx, and ry.

var chartData = [
     { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },
    { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 40 }
 ];
var Chart = new ej.charts.Chart({
    primaryXAxis: {
        title: 'Year',
        interval: 1
    },
    primaryYAxis: {
 
        title: 'Efficiency',
        labelFormat: '{value}%'
    },
    width: '90%',
    series: [{
        dataSource: chartData,
        xName: 'x', yName: 'y',
        name: 'series1',
        marker: { visible: false, dataLabel: { visible: true } },
        type: 'Column', animation: { enable: true },
        lastValueLabel: { enable: true, background: "blue", lineColor: "red", lineWidth: 2, dashArray: "5,5", rx: 10, ry: 10, border: { width: 2, color: "red" }, font: { color: "white", size: "12px", fontWeight: "bold" } }
    }],
 
    tooltip: { enable: true },
 
    title: 'Efficiency of oil-fired power production'
    }, '#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also