Open In App

How To Add Labels Into Chart.js Canvas Plugin?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
1 Likes
Like
Report

Labels in Chart.js, especially in pie charts or bar charts, play a good role in making the data easier to represent. Adding labels provides context, and it also helps the users to understand what type the data is shown in there. In this tutorial, we will use canvas plugins to add labels to the Chart.js.

Project Preview

Add-labels-using-canvas
add labels into Chart.js canvas plugin

Approach to add labels into Chart.js canvas plugin

  • Set up the basic HTML and CSS structure.
  • Include the Chart.js CDN and the data labels plugin using <script> tags.
  • Then create a Chart.js object specifying the chart type, such as bar or pie, and add data including labels and values.
  • After that create a custom plugin using the afterDatasetsDraw hook. This plugin draws the labels above each data point or chart section by accessing the chart’s canvas context.
  • You can customize the appearance and it's the position of the labels using the canvas's text functions like fillText().

Example: This example shows the implementation of the above approach.

HTML 
<!-- index.html  -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to add labels into Chart.js canvas plugin?</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main-container">
        <h1 class="heading">How to add labels into Chart.js canvas plugin?</h1>
        <div class="chart-container">
            <canvas id="myChart"></canvas>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="script.js"></script>
</body>

</html>
CSS 
/* style.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f4f7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.main-container {
    text-align: center;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 700px;
}

.heading {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
}

.chart-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

canvas {
    display: block;
    max-width: 100%;
}
JavaScript 
<!-- script.js -->

const ctx = document.getElementById('myChart').getContext('2d');

// Sample data
const labels = ['January', 'February', 'March', 'April', 'May', 'June'];
const data = [10, 20, 30, 40, 50, 60];

const chart = new Chart(ctx, {
    type: 'bar', // Can also be 'line', 'pie', etc.
    data: {
        labels: labels,
        datasets: [{
            label: 'Sales',
            data: data,
            backgroundColor: 'rgb(0, 255, 81)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: true
            },
            tooltip: {
                enabled: true
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        },
        // Custom plugin to add labels above bars
        plugins: [{
            id: 'customLabels',
            afterDatasetsDraw: function (chart) {
                const ctx = chart.ctx;
                chart.data.datasets.forEach(function (dataset, i) {
                    const meta = chart.getDatasetMeta(i);
                    meta.data.forEach(function (bar, index) {
                        const data = dataset.data[index];
                        ctx.fillStyle = 'rgba(0, 0, 0, 1)'; // Label color
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        ctx.font = 'bold 12px Arial';
                        ctx.fillText(data, bar.x, bar.y - 5); // Position the label
                    });
                });
            }
        }]
    }
});


Output:

Add-labels-using-canvas
Add Labels Into Chart.js Canvas Plugin

S

skaftafh
Improve
Article Tags :

Explore

Lightbox