I'm looking to create a chart with labels on the xAxes and the same labels in the legend. I've tried various solutions, but so far, the best result I've achieved is shown in the code snippet below. However, all bars seem to be connected to my first label, which is not the desired outcome. Can anyone assist me in resolving this issue?
I came across a potential solution that seemed close to perfect here, but unfortunately, it didn't work as expected: clicking on a label in the legend hides all the charts instead of just the corresponding one.
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>