CODEWITHSUNDEEP
javascriptjquerychart.js
Josh Warren
Josh Warren

Reputation: 306

How to add a dataset toggle to Chart.js?

I'm using Chart.js to create a line chart. I would like to have four different datasets that will all be visibile by default, but can be toggled on and off by clicking a button. How can this be achieved? I can't seem to find an answer in the documentation. .addData(), .removeData() and .update() all seem to be used for adding or removing values to existing datasets, but not adding or removing entire datasets. I would think this would be fairly commonly used feature but I can't find an answer anywhere.

Upvotes: 4

Views: 9824

Answers (2)

orangecaterpillar
orangecaterpillar

Reputation: 866

Here is a line chart with two datasets. By updating the datasets and calling the .update() method. The benefit here is you don't need to destroy the whole chart, and there is a nice animated transition which can be disabled.

TL:DR; solution on jsfiddle

Step by Step:

  • Bring in Chart.js from a CDN

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

  • Create the HTML Canvas element that will hold the chart

    <canvas id="line-chart"></canvas>

  • Hide/Show buttons for this example

  • Creating the chart, and the functions to update it live - notice that the same integer data needs to be copied in two places - in the initial creation, and in the show function. 

     <script>
 lineChart = new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
            labels: ['A', 'B', 'C', 'D'],
            datasets: [
                {
                    label: "Set 1",
                    fill: true,
                    backgroundColor: "rgba(90,181,242,0.2)",
                    borderColor: "rgba(179,181,198,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(179,181,198,1)",
                    data: [3, 1, 1, 0]
                }, {
                    label: "Set 2",
                    fill: true,
                    backgroundColor: "rgba(255,99,132,0.2)",
                    borderColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                    data: [1, 3, 3, 5]
                }
            ]
        },
        options: {
            title: {
                display: true,
                text: 'Chart Title'
            }
        }
    });

   function restoreLayer2(){
        lineChart.data.datasets[1].data = [1, 3, 3, 5];
        lineChart.update();
    }

    function removeLayer2() {
        lineChart.data.datasets[1].data = [];
        lineChart.update();
    }
</script>

Upvotes: 3

Josh Warren
Josh Warren

Reputation: 306

After thoroughly researching this, there doesn't appear to be any built in function to toggle entire datasets. I used the .destroy() function to remove the entire existing chart, and then some logic to redraw it with the necessary datasets.

EDIT: Here's a fiddle with my full code if it's helpful to anyone -> http://jsfiddle.net/21xg27kr/4/

Upvotes: 5

Related Questions