Chart.js Plugins Developer

Last Updated : 28 Apr, 2025

In Chart.js plugins play a crucial role in customizing and extending the default behavior of charts. Developers can use plugins to add custom interactions, tooltips, animations, and more. Plugins are a powerful way to extend Chart.js beyond its default capabilities. The plugin system provides hooks at various stages of chart rendering, such as "beforeDraw", "afterDraw", "beforeUpdate".

Syntax:

Global plugin: Global plugins in Chart.js allow developers to apply custom functionalities or modifications that are to all the charts on a page.

Chart.plugins.register({
    {/* hooks */}: function(chartInstance) {
        // Custom logic before drawing the chart
    }
});

Per-Chart Plugins: This allows developers to apply plugins or options to specific chart instances.

const plugin = { /* plugin implementation */ };

const chart1 = new Chart(ctx, {
    plugins: [plugin]
});

const chart2 = new Chart(ctx, {
    plugins: [plugin]
});

Plugin ID and Naming Conventions

When creating a Chart.js plugin, it is essential to define a unique ID for the plugin. This ID should follow specific naming conventions:

Naming Restrictions:

The ID can't start with a dot or an underscore.
It can't contain any non-URL-safe characters.
Uppercase letters are not allowed.
The ID should be reasonably descriptive and short.

Plugin options

Once the plugin ID is defined, its options can be configured within the options.plugins configuration section.

const chart = new Chart(ctx, {
    options: {
        foo: { ... },           // Chart.js 'foo' option
        plugins: {
            pluginID: {
                foo: { ... },   // Plugin 'foo' option
                bar: { ... }    // Plugin 'bar' option
            }
        }
    }
});

Here, we have a Chart.js chart with two plugins, each identified by a unique plugin ID ("pluginID", "anotherPluginID"). The options for each plugin are scoped under "options.plugins.{pluginID}".

Example 1: A bar chart is created, displaying data with labels on the y-axis and custom colors for each bar. A custom plugin, labelPlugin, is defined to display the y-coordinate values on top of each bar after the chart is drawn.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Bar Chart with Custom Plugin Example</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
</head>

<body>


    <canvas id="barChart" width="400" height="200">
      </canvas>

    <script>

        let ctxBar = document.getElementById('barChart').getContext('2d');

        // Sample data for the bar chart
        let dataBar = {
            labels: ['Category 1', 
                     'Category 2', 
                     'Category 3', 
                     'Category 4', 
                     'Category 5'],
            datasets: [{
                label: 'Data Set 1',
                data: [10, 20, 30, 40, 50],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };


        const labelPlugin = {
            afterDatasetsDraw: function (chart) {
                let ctx = chart.ctx;
                let meta = chart.getDatasetMeta(0);
                let barValues = meta.data.map(function (bar) {
                    return bar._model.y;
                });

                ctx.save();

                ctx.fillStyle = 'black';
                ctx.font = '12px Arial';
                ctx.textAlign = 'center';

                meta.data.forEach(function (bar, index) {
                    ctx.fillText(barValues[index], 
                                 bar._model.x, 
                                 barValues[index] - 5);
                });

                ctx.restore();
            }
        };


        let barChart = new Chart(ctxBar, {
            type: 'bar',
            data: dataBar,
            options: {
                plugins: [labelPlugin],
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

    </script>

</body>

</html>

Output:

Screenshot-(31)

Example 2: The code creates a line chart using, representing sales data over months. A custom plugin is added to draw a horizontal red threshold line at value 70 on the chart.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Line Chart with Custom Plugin Example</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
</head>

<body>

    <canvas id="lineChart" width="400" height="200">
      </canvas>

    <script>

        let ctxLine = 
            document.getElementById('lineChart').getContext('2d');

        // Sample data for the line chart
        let dataLine = {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
            datasets: [{
                label: 'Sales',
                data: [50, 65, 80, 81, 95],
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 2,
                fill: false
            }]
        };

        // Define a custom plugin for 
          // drawing a horizontal line at a specified threshold
        const thresholdPlugin = {
            afterDatasetsDraw: function (chart) {
                let ctx = chart.ctx;
                let yScale = chart.scales.y;

                ctx.save();
                ctx.strokeStyle = 'red';
                ctx.lineWidth = 2;
                ctx.beginPath();
                let thresholdValue = 70; // Set the threshold value
                let yPos = yScale.getPixelForValue(thresholdValue);

                ctx.moveTo(chart.chartArea.left, yPos);
                ctx.lineTo(chart.chartArea.right, yPos);
                ctx.stroke();
                ctx.restore();
            }
        };

        // Create the line chart with the custom threshold plugin
        let lineChart = new Chart(ctxLine, {
            type: 'line',
            data: dataLine,
            options: {
                plugins: [thresholdPlugin],
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

    </script>

</body>

</html>

Output:

Screenshot-(32)

Chart.js API Developer

rudra1807raj

Improve

Article Tags :

Chart.js Plugins Developer

Syntax:

Plugin ID and Naming Conventions

Plugin options

Similar Reads

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js Questions

Thank You!

What kind of Experience do you want to share?