How to useafterDraw Plugin in Chart.js

Library Inclusion: Chart.js library is included using a CDN link in the <head> section.
HTML Structure: HTML includes a canvas element within a div for chart rendering.
Chart Configuration: JavaScript configures a line chart with specified data, appearance, and scaling options.
Vertical Line Plugin: A custom plugin is added to draw a vertical line at x-axis value 4 after the chart is drawn.
Line Styling: The drawn line is styled with a red color and a 2-pixel width.
Chart Rendering: The chart is instantiated using the configured settings, resulting in a line chart with a highlighted vertical line at x-axis value 4.

Example: The example showcases a line chart representing a dataset of values over the months. A custom plugin is introduced using the afterDraw hook to draw a vertical line at the x-axis value of 4, emphasizing a particular data point. You can set the xValue in “ctx.moveTo(xValue, 0);” and “ctx.lineTo(xValue, chart.height);”, to align the line accordingly. The line is styled with a red color (‘rgb(255, 99, 132)’) and a 2-pixel width. The chart looks better because there’s now a clear line at a certain point on the horizontal axis. This helps draw attention to a specific data point and makes it stand out more.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Chart.js Vertical Line Example</title>
 
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
    </script>
</head>
 
<body>
    <div style="width: 80%; margin: auto;">
 
        <canvas id="myChart"></canvas>
    </div>
 
    <script>
 
        const config = {
            type: 'line',
            data: {
                labels: ['January', 
                         'February', 
                         'March', 
                         'April', 
                         'May', 
                         'June', 
                         'July'],
                datasets: [{
                    label: 'My First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true,
                        grid: {
                            display: false
                        }
                    },
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            },
            plugins: [{
                afterDraw: function (chart) {
                    const ctx = chart.ctx;
                    const xAxis = chart.scales.x;
 
                    // Draw vertical line at x-axis value 4
                    const xValue = xAxis.getPixelForValue(4);
                    ctx.save();
                    ctx.strokeStyle = 'rgb(255, 99, 132)';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.moveTo(xValue, 0);
                    ctx.lineTo(xValue, chart.height);
                    ctx.stroke();
                    ctx.restore();
                }
            }]
        };
 
 
        const ctx = document.getElementById('myChart').getContext('2d');
        new Chart(ctx, config);
    </script>
</body>
 
</html>

Output:

How to Draw a Vertical Line at a Particular Point on the X-Axis Using Chart.js ?

Chart.js stands out as a versatile JavaScript library for crafting dynamic charts within web applications. One often sought-after customization is the ability to draw a vertical line at a specific point on the x-axis. This feature proves invaluable for emphasizing critical data points or marking significant events on a chart.

To draw a vertical line at a particular point on the x-axis using Chart.js, we have different approaches:

Table of Content

Using afterDraw Plugin
Using Annotation Plugin

Tags:

#Chart.js #Geeks Premier League 2023 #Geeks Premier League #JavaScript #Web Technologies

Appraoch 2: Using Annotation Plugin

How to useafterDraw Plugin in Chart.js

HTML

How to Draw a Vertical Line at a Particular Point on the X-Axis Using Chart.js ?

Similar Reads

Contact Us