I'm making a simple dashboard which has a bar chart showing the amount of orders for a company. It shows the quantity ordered each day for the past week, the amount for today, and the amount of scheduled orders for the next days.
I am using colors to set apart each of these 3 moments, but I cannot find a solution to have 3 labels, each one with the right color (blue for 'last week', orange for 'today', and gray for 'scheduled').
link for current bar chart, as I still don't have enough points
You can use the generateLabels function for this:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
backgroundColor: ['lightblue', 'lightblue', 'lightblue', 'orange', 'orange', 'gray']
}]
},
options: {
plugins: {
legend: {
labels: {
generateLabels: () => {
return [{
datasetIndex: 0, // Since its all 1 dataset just hide if it gets clicked, remove this line for legend click to do nothing
text: 'Last week',
fillStyle: 'lightBlue',
strokeStyle: 'lightBlue'
},
{
datasetIndex: 0, // Since its all 1 dataset just hide if it gets clicked, remove this line for legend click to do nothing
text: 'Today',
fillStyle: 'orange',
strokeStyle: 'orange'
},
{
datasetIndex: 0, // Since its all 1 dataset just hide if it gets clicked, remove this line for legend click to do nothing
text: 'Scheduled',
fillStyle: 'grey',
strokeStyle: 'grey'
}
];
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>