Chart.js New Charts Developer

Last Updated : 13 Dec, 2023

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)

Suggest improvement

Chart.js New Axes Developer

Share your thoughts in the comments

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js New Charts Developer

Syntax:

Chart.js New Charts

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?