How to Set a Line Chart Dataset as Disabled on Load in ChartJS?

Last Updated : 21 Aug, 2024

Chart.js is a popular JavaScript library for creating dynamic and interactive charts, including line charts, with minimal effort. One common requirement is to control the visibility of datasets on initial load, allowing users to focus on specific data without overwhelming them. This can be done by either using the hidden property directly in the dataset configuration or by programmatically setting the dataset visibility after the chart has been initialized.

Chart.js CDN link

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>

These are the following approaches:

Table of Content

Using Hidden Property in Dataset Configuration
Programmatically Disabling Dataset on Load

Using Hidden Property in Dataset Configuration

In this approach, we are using the hidden property in the dataset configuration to initially hide one of the datasets in a line chart. By setting hidden: true, the "New Contributors" dataset is not displayed when the chart first loads, but it can be toggled on later by interacting with the legend.

Syntax:

datasets: [{
    label: 'Dataset Label',
    data: [/* array of data points */],
    borderColor: '#colorCode',
    fill: false,
    hidden: true // This hides the dataset on load
}]

Example: The below example set a line chart dataset as disabled on load using hidden property in dataset configuration.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Line chart dataset</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
    </script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: green;
        }

        canvas {
            max-width: 400px;
            max-height: 400px;
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <h3>Using hidden Property in Dataset Configuration</h3>
    <canvas id="lineChart1"></canvas>

    <script>
        const data1 = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [{
                label: 'Articles Published',
                data: [12, 19, 3, 5, 2, 3],
                borderColor: '#4caf50',
                fill: false
            },
            {
                label: 'New Contributors',
                data: [5, 10, 8, 12, 15, 10],
                borderColor: '#f44336',
                fill: false,
                hidden: true // This dataset is hidden on load
            }
            ]
        };

        const config1 = {
            type: 'line',
            data: data1,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        labels: {
                            color: '#000'
                        }
                    }
                }
            }
        };

        const lineChart1 = new Chart(
            document.getElementById('lineChart1'),
            config1
        );
    </script>
</body>

</html>

Output:

Programmatically Disabling Dataset on Load

In this approach, we programmatically disable a dataset on load by using the setDatasetVisibility() method of the Chart.js chart instance. This method allows us to hide a specific dataset by its index immediately after the chart is created, and then we call update() to apply the changes and ensure the chart reflects the hidden state.

Example: The below example set a line chart dataset as disabled on load using programatically disabling dataset on load.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Line chart dataset</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
    </script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: green;
        }

        canvas {
            max-width: 400px;
            max-height: 400px;
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <h3>Programmatically Disabling Dataset on Load</h3>
    <canvas id="lineChart2"></canvas>

    <script>
        const data2 = {
            labels: ['July', 'August', 'September', 
                     'October', 'November', 'December'],
            datasets: [{
                label: 'Quizzes Created',
                data: [8, 12, 10, 5, 6, 7],
                borderColor: '#03a9f4',
                fill: false
            },
            {
                label: 'Course Enrollments',
                data: [15, 20, 22, 18, 25, 30],
                borderColor: '#9c27b0',
                fill: false
            }
            ]
        };

        const config2 = {
            type: 'line',
            data: data2,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        labels: {
                            color: '#000'
                        }
                    }
                }
            }
        };

        const lineChart2 = new Chart(
            document.getElementById('lineChart2'),
            config2
        );

        // Hide the second dataset programmatically on load
        lineChart2.getDatasetMeta(1).hidden = true;
        lineChart2.update();
    </script>
</body>

</html>

Output:

How to Create a Goal Line on a Chart in Excel?

gpancomputer

Improve

Article Tags :

How to Set a Line Chart Dataset as Disabled on Load in ChartJS?

Chart.js CDN link

Using Hidden Property in Dataset Configuration

Syntax:

Programmatically Disabling Dataset on Load

Similar Reads

Thank You!

What kind of Experience do you want to share?