How do I change the color on the labels to blue?
Is it possible to switch between colors, lets say blue, and red by clicking on a button?`
The reason why I ask for the switch, is because I might create a light/dark mode, and then it could be nice to change colors in the chart depending on this. But if its not possible then blue would be the best.
const data = {
labels: [
'New',
'To Do',
'In Progress',
'Resolved'
],
datasets: [{
label: 'WDC',
data: [300, 50, 100, 20],
backgroundColor: [
'rgb(126, 191, 241)',
'rgb(255, 159, 64)',
'rgb(255, 255, 0)',
'rgb(160, 160, 160)'
],
borderColor: [
'rgb(126, 191, 241)',
'rgb(255, 159, 64)',
'rgb(255, 255, 0)',
'rgb(160, 160, 160)'
],
backgroundColor: [
'rgb(126, 191, 241)',
'rgb(255, 159, 64)',
'rgb(255, 255, 0)',
'rgb(160, 160, 160)'
],
hoverOffset: 4
}]
};
const config = {
type: 'pie',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: 20
},
plugins: {
legend: {
position: 'top'
}
}
}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="wdc_canvas" style="position: relative; height:30vh; width:40vw">
<canvas id="myChart" width="785" height="389" style="z-index: 8; display: block; box-sizing: border-box; height: 389px; width: 785px;"></canvas>
</div>Not sure if you meant the labels in the legend or in the tooltip but here are the options for both of them:
const data = {
labels: [
'New',
'To Do',
'In Progress',
'Resolved'
],
datasets: [{
label: 'WDC',
data: [300, 50, 100, 20],
backgroundColor: [
'rgb(126, 191, 241)',
'rgb(255, 159, 64)',
'rgb(255, 255, 0)',
'rgb(160, 160, 160)'
],
borderColor: [
'rgb(126, 191, 241)',
'rgb(255, 159, 64)',
'rgb(255, 255, 0)',
'rgb(160, 160, 160)'
],
backgroundColor: [
'rgb(126, 191, 241)',
'rgb(255, 159, 64)',
'rgb(255, 255, 0)',
'rgb(160, 160, 160)'
],
hoverOffset: 4
}]
};
const config = {
type: 'pie',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: 20
},
plugins: {
tooltip: {
bodyColor: 'blue'
},
legend: {
labels: {
color: 'blue',
},
position: 'top'
}
}
}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="wdc_canvas">
<canvas id="myChart"></canvas>
</div>