How To Remove The Vertical Line In The ChartJS Line Chart?

Last Updated : 04 Sep, 2024

Chart.js is a popular open-source JavaScript library that allows developers to create visually appealing, responsive charts. There are many types of charts like lines, bars, pie, etc. One common issue users might face is unwanted vertical lines that appear on a line chart, often due to certain data points. In this tutorial, we will focus on the steps of how to remove the vertical line in the Chart.js line chart.

Prerequisites

Approach

Set up the basic HTML and CSS structure.
Include the Chart.js CDN and the data labels plugin using <script> tags.
Then add a <canvas> element to your HTML file where the chart will be rendered.
Create a new Chart object with the desired chart type (e.g., line chart).
After that in your JavaScript code, configure the chart type, data, and options. To remove the vertical lines, you need to set the display property of the x-axis grid to false.

Example: This example shows the implementation of the above approach in which we have used chart.js and added canvas in order to remove the vertical line in a chart.js line chart.

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 Line Chart Example</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="chart-container">
        <h2>How to Remove the vertical line
             in the Chart.JS line chart</h2>
        <canvas id="myChart"></canvas>
    </div>

    <script src=
    "https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="script.js"></script>
</body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.chart-container {
    width: 80%;
    max-width: 600px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #13dc2e;
}

JavaScript

const ctx =
document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March',
        'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Sample Data',
            data: [65, 59, 80, 81, 56, 55, 40],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false
        }]
    },
    options: {
        scales: {
            x: {
                grid: {
                    display: false 
                }
            },
            y: {
                grid: {
                    display: true 
                }
            }
        }
    }
});