Chart.js v2 - How to show only one dataset by default?

user_7096651 0
Viewed 2083

I am using Chart.js to create a chart with three datasets. It is a line chart and the points are dynamically generated using PHP.

Now, I want to know how can I only show one dataset as default? but I still want all the legends to show but the rest must appear crossed out. So when a user clicks those crossed out legends, they may appear on the chart.

I can provide my chart but that would be of no use I believe. Anyways:

    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [<?php foreach ($data0 as $key => $value) {
    echo "'".$value->updated_at->format('gA-D')."',";
} ?>],
            datasets: [{
                label: 'FiveRP',
                data: [<?php foreach ($data0 as $key => $value) {
    echo "'$value->player_count',";
} ?>],
                backgroundColor: "rgba(75,192,192,0.4)",
                fill: false,
                lineTension: 0.1,
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt'
            }, {
                label: 'GTALife',
                data: [<?php foreach ($data1 as $key => $value) {
    echo "'$value->player_count',";
} ?>],
                backgroundColor: "rgba(148,0,211,0.4)",
                fill: false,
                lineTension: 0.1,
                borderColor: "rgba(148,0,211,1)",
                borderCapStyle: 'butt'
            }, {
                label: 'GermanV',
                data: [<?php foreach ($data2 as $key => $value) {
    echo "'$value->player_count',";
} ?>],
                backgroundColor: "rgba(255,165,0,0.4)",
                fill: false,
                lineTension: 0.1,
                borderColor: "rgba(255,165,0,1)",
                borderCapStyle: 'butt'
            }]
        },
        options: {
            responsive: false,
        }
    });
charts javascript
1 Answers

To hide a dataset, set it's hidden attribute to true. So apply the attribute to all of the data sets except the one you want to display

 datasets: [
             {
              label: 'FiveRP',
              **hidden: true,**
              data: [<?php foreach ($data0 as $key => $value) {
                   echo "'$value->player_count',"; } ?>
                    ]
              }
            ],
user_96935220
Related