Chart.js New Charts Developer

Last Updated : 24 Apr, 2025

Chart.js 2.0 introduces the concept of controllers for each dataset, providing developers with enhanced flexibility and customization options. Controllers allow you to define and extend chart types to suit your specific needs.

Syntax:

class CustomController extends Chart.controllers.controllertype {
}
Chart.register(CustomController);
new Chart(ctx, {
    type: 'CustomController',
    data: data,
    options: options
});

Chart.js New Charts

Dataset Controller Interface: A dataset controller in Chart.js is a JavaScript class that manages the rendering and behavior of a specific type of dataset.
Extending Existing Chart Types: We can extend or replace an existing controller type. Chart.js comes with a variety of built-in controller types, each designed to handle specific chart types. e.g. BarController, BubbleController, etc.
Typescript Typing: If you want your new chart type to be statically typed, you must provide a ".d.ts" TypeScript declaration file.

Example 1: In this example, we are showing Bar Controller.

HTML

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

<head>
    <title>Custom Bar Chart</title>
      <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
</head>

<body>
    <canvas id="myBarChart" 
            width="550px" height="550px">
    </canvas>
    
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded',
        function () {

            class CustomBarController extends Chart.controllers.bar {
                draw() {

                    super.draw(arguments);

                    const meta = this.getMeta();
                    const ctx = this.chart.ctx;

                    meta.data.forEach((bar) => {
                        const { x, y, width, height } = 
                        bar.getProps(['x', 'y', 'width', 'height']);
                        ctx.save();
                        ctx.strokeStyle = 'red';
                        ctx.lineWidth = 1;
                        ctx.strokeRect(x, y, width, height);
                        ctx.restore();
                    });
                }
            }

            CustomBarController.id = 'customBar';
            CustomBarController.defaults = 
            Chart.controllers.bar.defaults;

            // Register the custom controller
            Chart.register(CustomBarController);

            const data = {
                labels: ['A', 'B', 'C', 'D', 'E'],
                datasets: [{
                    label: 'Custom Bar Chart',
                    data: [3, 5, 2, 8, 1],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 2
                }]
            };

            // Chart options
            const options = {
                scales: {
                    x: {
                        type: 'category',
                        labels: ['A', 'B', 'C', 'D', 'E']
                    },
                    y: {
                        type: 'linear',
                        position: 'left'
                    }
                }
            };

            // Create and use the custom chart type
            const ctx = document
            .getElementById('myBarChart').getContext('2d');
            new Chart(ctx, {
                type: 'customBar',
                data: data,
                options: options
            });
        });
    </script>
</body>

</html>

Output:

Screenshot-(20)

Example 2: In this example, we are showing Radar Controller.

HTML

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

<head>
    <title>Custom Radar Chart</title>
      <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
</head>

<body>
    <canvas id="myCustomRadarChart" 
            width="400px" height="400px">
      </canvas>
    
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded',
        function () {
            class CustomRadarController extends
             Chart.controllers.radar {
                draw() {
                    super.draw(arguments);

                    const meta = this.getMeta();
                    const ctx = this.chart.ctx;

                    meta.data.forEach((point) => {
                        const { x, y } = point.getProps(['x', 'y']);
                        const { pointStyle, radius }
                         = point.options;

                        ctx.save();
                        ctx.strokeStyle = 'blue';
                        ctx.lineWidth = 1;

                        if (pointStyle === 'circle') {
                            ctx.beginPath();
                            ctx.arc(x, y, radius, 0, 2 * Math.PI);
                            ctx.closePath();
                            ctx.stroke();
                        } else {
                            ctx.strokeRect(x - radius,
                             y - radius, 2 * radius, 2 * radius);
                        }

                        ctx.restore();
                    });
                }
            }

            CustomRadarController.id = 'customRadar';
            CustomRadarController.defaults = Chart.
            controllers.radar.defaults;
            Chart.register(CustomRadarController);

            const data = {
                labels: ['Category 1', 'Category 2', 
                'Category 3', 'Category 4', 'Category 5'],
                datasets: [{
                    label: 'Custom Radar Chart',
                    data: [3, 5, 2, 8, 1],
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 2,
                    pointBackgroundColor: 'rgba(75, 192, 192, 1)',
                    pointStyle: 'circle',
                    pointRadius: 5
                }]
            };

            const options = {};

            const ctx = document
            .getElementById('myCustomRadarChart').getContext('2d');
            new Chart(ctx, {
                type: 'customRadar',
                data: data,
                options: options
            });
        });
    </script>
</body>

</html>

Output:

Screenshot-(22)

How to Set Height and Width of a Chart in Chart.js ?

rudra1807raj

Improve

Article Tags :

Chart.js New Charts Developer

Syntax:

Chart.js New Charts

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?