Appraoch 2: Using Annotation Plugin

Cdn link:

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>

Include Chart.js and Chart.js Annotation Plugin: These script tags include the Chart.js library and the Chart.js Annotation Plugin from a CDN (Content Delivery Network).
HTML Structure: A div element with a canvas is created. This is where the Chart.js chart will be rendered.
JavaScript: Sample data is defined for the chart with labels representing months and a dataset of numerical values.
Chart Configuration: Chart configuration options are set, including the type of scales for x and y axes, and the Annotation Plugin is used to draw a red vertical line at the x-axis value of “March.”
Get Chart Canvas and Create the Chart: The script gets the canvas element by its ID (myChart) and creates a new Chart.js chart with the specified data and options.

Example: In this example, we’re using the Annotation Plugin to draw a vertical line at the x-axis value corresponding to “March” in the sample data. You can customize the position and appearance of the line by modifying the annotations object within the “plugins.annotation” section in the options.

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 with Annotation Plugin
      </title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js">
      </script>
    <script src=
"https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation">
      </script>
</head>
 
<body>
    <div style="width:80%;">
        <canvas id="myChart"></canvas>
    </div>
 
    <script>
 
        let data = {
            labels: [ "January", 
                      "February", 
                      "March", 
                      "April", 
                      "May", 
                      "June", 
                      "July"],
            datasets: [{
                label: "Sample Data",
                data: [12, 19, 3, 5, 2, 3, 8],
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1,
                fill: false
            }]
        };
 
        let options = {
            responsive: true,
            scales: {
                x: {
                    type: 'category',
                    position: 'bottom'
                },
                y: {
                    type: 'linear',
                    position: 'left'
                }
            },
            plugins: {
                annotation: {
                    annotations: [{
                        type: 'line',
                        mode: 'vertical',
                        scaleID: 'x',
                        value: 'March',
                        borderColor: 'red',
                        borderWidth: 2,
                        label: {
                            enabled: true,
                            content: 'Vertical Line'
                        }
                    }]
                }
            }
        };
 
 
        let ctx = document.getElementById('myChart').getContext('2d');
 
 
        let myChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: options
        });
    </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

Approach 1: Using afterDraw Plugin

Appraoch 2: Using Annotation Plugin

Cdn link:

HTML

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

Similar Reads

Contact Us