How to use icon as legend in chart.js?
How to use icon as legend in chart.js?
1 answer
@lindsey.homenick
To use an icon as a legend in Chart.js, you can follow these steps:
Step 1: Include the necessary CSS and JavaScript files of Chart.js in your HTML file.
Step 2: Create a canvas element in your HTML file where you want to draw the chart. Give it an id so that you can reference it later.
Step 3: Create a JavaScript function to draw the chart using Chart.js. Here is an example function that creates a chart with icons as legends:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
function createChart() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Legend',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
plugins: {
legend: {
onClick: function() { return; }, // Disable clicking on legend items
labels: {
generateLabels: function(chart) {
var data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var dataset = data.datasets[0];
var customLabel = {
text: label,
fillStyle: dataset.borderColor[i],
strokeStyle: dataset.borderColor[i],
lineWidth: 2,
hidden: isNaN(dataset.data[i]) || dataset.data[i] === 0
};
// Set the icons for each legend label
switch (label) {
case 'Red':
customLabel.fillStyle = 'red';
customLabel.strokeStyle = 'red';
break;
case 'Blue':
customLabel.fillStyle = 'blue';
customLabel.strokeStyle = 'blue';
break;
case 'Yellow':
customLabel.fillStyle = 'yellow';
customLabel.strokeStyle = 'yellow';
break;
case 'Green':
customLabel.fillStyle = 'green';
customLabel.strokeStyle = 'green';
break;
case 'Purple':
customLabel.fillStyle = 'purple';
customLabel.strokeStyle = 'purple';
break;
case 'Orange':
customLabel.fillStyle = 'orange';
customLabel.strokeStyle = 'orange';
break;
}
return customLabel;
});
}
return [];
}
}
}
}
}
});
}
|
Step 4: Call the createChart function in your HTML file. For example, you can call it on the window.onload event:
1 2 3 4 5 6 7 8 9 |
<body>
<canvas id="myChart"></canvas>
<script>
window.onload = function() {
createChart();
};
</script>
</body>
|
In the above example, the legend labels are customized to have different colors based on their respective labels. You can replace the switch statement with your own custom logic if you want to use icons instead of colors.