0

I would like to make a chart with labels on xAxes and the same labels in the legend. I was trying different solutions, but the best I got is the snippet below. I don't understand, why all bars are connected with my first label. Could you please help me to fix it?

I found a solution with would be almost perfect here, but unfortunately, it doesn't work as expected: after clicking on the label in legend all charts are hiding, not only one corresponding to the label I clicked.

 var canvas2 = document.getElementById("wykres_kategorie");
    var ctxD2 = canvas2.getContext('2d');
    var myLineChart = new Chart(ctxD2, {
      type: 'bar',
      data: {
        labels: [
            'a','b','c'
        ],
        datasets: [
            {
              label: 'a',
              data: [   60  ],
              backgroundColor: [ 'red' ],
            },
        {
              label: 'b',
              data: [   80  ],
              backgroundColor: [ 'blue' ],
            },
        {
              label: 'c',
              data: [   50  ],
              backgroundColor: [ 'yellow' ],
            },
        ]
      },
      options: {
        legend: {
          position: 'bottom'
      },
        responsive: true,
        scales: { xAxes: [{ 
                ticks: {
            autoSkip: false
        } }],
        yAxes:[{ ticks: {beginAtZero: true}}]}
    }
    }); 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.20.0/js/mdb.min.js"></script>
<canvas class='col-12 mx-auto' id="wykres_kategorie"></canvas>
Kida
  • 734
  • 1
  • 9
  • 23

1 Answers1

1

The data.labels defines the ticks for a category axis. Following your configuration, the chart is expecting to have 3 data items for dataset, (first at tick 'a', second at tick 'b', third at tick 'c'). Instead, the dataset.label are used in the legend.

In your config, all datasets have got only 1 value and all values are related to the first data.labels, 'a'.

user2057925
  • 2,377
  • 1
  • 12
  • 12
  • Thanks for your explanation I could better understand the problem and I found a nice solution [here](https://stackoverflow.com/questions/67515731/chart-js-manipulate-each-bar-in-chart-with-different-labels). – Kida Aug 09 '22 at 09:49