Chartjs-How to hide the legend display for a specific chart?

by

0👍

Chart.js highly depends on its data. Therefore, the easiest way is just dynamically populating the necessary data to your chart whenever you need it. This should add and remove the legend as expected. However, don’t forget updating your chart on data change.

Let’s add some code to get an idea about it, since basically you’re actually doing it – but just a little bit wrong.

The data of your chart is stored in dataset. As we can see you have 2 entries whereas the 2nd one is just an object containing a boolean property (fill). Therefore, it’s displaying undefined in your legend at the very beginning.

datasets: [{
  label: 'My test1',
  fill: false,
  borderColor: 'rgb(255, 99, 132)',
  data: test1,
}, {
  fill: false
}]

However, when toggling the the checkbox it looks fine, since you’re overwriting everything within your toggleCategories as seen below.

function toggleCategories(e) {
  if (e.target.checked) {
    chart.data.datasets[0].label = 'My test2';
    chart.data.datasets[0].data = test2;
    chart.data.datasets[0].borderColor = 'rgb(255, 99, 132)';
    chart.data.datasets[1].label = 'My test3';
    chart.data.datasets[1].data = test3;
    chart.data.datasets[1].borderColor = 'rgb(255, 99, 132)';
  } else {
    ...
  }
  chart.update();
}

But taking a closer look to else shows what’s going on here.

    // Those 3 lines just reset on index 1, it doesn't get deleted
    chart.data.datasets[1].label = '';
    chart.data.datasets[1].data = '';
    chart.data.datasets[1].borderColor = '';

So in order to get rid of the 2nd legend when you only want 1, you simply have to remove the object of dataset[1] and re-add it whenever you need it.

You might want to look into this fiddle for a fully working example:

0👍

It could be a solution?

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

</head>
<body>
    <div class="row mt-3">
        <div class="col-md-12">
            <div>
                <h5 id="legend" style="text-align: center;">My test 1</h5>
            </div>
            <div style="width:75%; margin: 0 auto;">
                <canvas id="myChart"></canvas>
            </div>
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="checkBox" onchange="toggleCategories(event)">
                <label class="form-check-label" for="checkBox">Catégories</label>
            </div>
        </div>
    </div>


     <script>
        var test1 = [0, 10, 5, 2, 20, 30, 45, 60, 43, 22, 11, 23];
        var test2 = [90, 80, 75, 62, 50, 40, 35, 11, 2, 24, 28, 34];
        var test3 = [90, 10, 90, 10, 50, 40, 23, 62, 13, 32, 11, 13];

        var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'line',

                // The data for our dataset
                data: {
                    labels: ['January', 'February', 'test3', 'test4', 'test5', 'test6', 'test7', 'test9', 'test10', 'test11', 'test12'],
                    datasets: [{
                        label: 'My test1',
                        fill : false,
                        borderColor: 'rgb(255, 99, 132)',
                        data: test1,
                    }, {fill : false
                    }]
                },

                // Configuration options go here
                
                options: {legend:{display: false}}
            });

            function toggleCategories(e){
                if (e.target.checked) {
                    changeLegendOnCl();
                  chart.data.datasets[0].label = 'My test2';
                  chart.data.datasets[0].data = test2;
                  chart.data.datasets[0].borderColor = 'rgb(255, 99, 132)';
                  chart.data.datasets[1].label = 'My test3';
                  chart.data.datasets[1].data = test3;
                  chart.data.datasets[1].borderColor = 'rgb(255, 99, 132)';
                } else {
                    document.getElementById("legend").innerHTML = "My test 1";
                    chart.data.datasets[0].label = 'My test1';
                  chart.data.datasets[0].data = test1;
                  chart.data.datasets[0].borderColor = 'rgb(255, 99, 132)';
                  chart.data.datasets[1].label = 'My test1';  
                  chart.data.datasets[1].data = test1;
                  chart.data.datasets[1].borderColor = 'rgb(255, 99, 132)';
                }
                chart.update();
            }
            function changeLegendOnCl(){
                  document.getElementById("legend").innerHTML = "My test 2"+"  "+"My test 3";
                }
    </script>

</body>
</html>

Leave a comment