I want to change the color of legend, because I want different colors to represent different situations.But now the legend uses just the first color I set on the bar chart.
I also want to ask, is it able to set one more legend?Like pink is for situationA, blue for B?
Here is the link:
Code is here
Can anyone help?Thank you so much.
To set more legends, you need to add multiple datasets. Each dataset will represent one legend and the legend's color will automatically be set according to the dataset's background color.
Chart.plugins.register({
beforeDraw: function(c) {
var legends = c.legend.legendItems;
legends.forEach(function(e) {
e.fillStyle = '#07C';
});
}
});
var canvas = document.getElementById('myChart');
var data = {
labels: [January, February, March, April, May, June],
datasets: [{
label: My First dataset,
backgroundColor: rgba(255,99,132,0.4),
hoverBorderColor: rgba(255,99,132,1),
data: [65, 59, 20, 81, 56, 55],
}, {
label: My Second dataset,
backgroundColor: rgba(25,25,255,0.4),
hoverBorderColor: rgba(255,99,132,1),
data: [65, 59, 20, 81, 56, 55],
}]
};
var option = {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: rgba(255,99,132,0.2)
}
}]
}
};
var myBarChart = Chart.Bar(canvas, {
data: data,
options: option
});<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js></script>
<canvas id=myChart width=400 height=200></canvas>
