JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
  <h2 class="text-center">Uitgaand totaalgewicht per stroom</h2>
  <canvas id="rscWeightChart" 
          class="rscWeightChart" 
          width="100"
          height="25">
  </canvas>
<div class="row">
  <button id="toggleLegend"
    class="btn btn-sm btn-primary center-block toggleLegend">Toggle dataset
  </button>
</div>

CSS

.text-center {
  text-align: center;
}

JavaScript

var ctx = document.getElementsByClassName('rscWeightChart');
    if (ctx.length > 0) {
        for (i = 0; i < ctx.length; i++) {
            var id = ctx[i].getAttribute('id');
            var rscWeightChart = new Chart(ctx, {
                type: 'pie',
                fill: true,
                data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                	datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        borderWidth: 1
                      },	
                ]},
                options: {
                    animation: {
                        animateScale: true
                    },
                    legend: {
                        position: 'bottom',
                    }
                }
            });
            rscWeightChart.resize();
        }
        
        $('.toggleLegend').click(function (button) {
            button.preventDefault();
            rscWeightChart.getDatasetMeta(0).data.forEach(function (ds) {
            		ds.hidden = !ds.hidden;
            });           
        rscWeightChart.update();
        });
	}