I cannot figure out how to change the text color to white. I would like to change it for the x,y axis and the label at the top of the chart. I have looked at other posts on stack overflow and I feel like those posts are outdated and are for older versions of chart.js.
ChartJS Version: 3.3.2
CODE:
<canvas id="myChart" width="1000px" height="1000px"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
<?php
echo "labels: [";
for ($i = 1; $i < $monthdays; $i++) {
echo "'" . $i . "'" . ",";
}
echo "],";
?>
//labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
color: 'rgb(255,255,255)',
label: 'net volume of sales',
data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 5, 5, 5, 5, 5],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
/*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: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
},
beginAtZero: true
}
}
}
});
</script>
I cannot figure out how to change the text color to white. I would like to change it for the x,y axis and the label at the top of the chart. I have looked at other posts on stack overflow and I feel like those posts are outdated and are for older versions of chart.js.
ChartJS Version: 3.3.2
CODE:
<canvas id="myChart" width="1000px" height="1000px"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
<?php
echo "labels: [";
for ($i = 1; $i < $monthdays; $i++) {
echo "'" . $i . "'" . ",";
}
echo "],";
?>
//labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
color: 'rgb(255,255,255)',
label: 'net volume of sales',
data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 5, 5, 5, 5, 5],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
/*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: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
},
beginAtZero: true
}
}
}
});
</script>
- The answer from Juergen Fink works. I just tried it stackoverflow./questions/37292423/chart-js-label-color – Justin Commented Jun 21, 2021 at 2:38
- @Justin Did you try this in ChartJS version 3.3.2? – RAT Commented Jun 22, 2021 at 19:31
- Yes see answer below – Justin Commented Jun 22, 2021 at 22:39
1 Answer
Reset to default 5This is in 3.3.2. Answer based on one provided by Juergen Fink in this thread stackoverflow./questions/37292423/chart-js-label-color
new Chart(document.getElementById("myChart"), {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
plugins: {
legend: {
labels: {
color: "white",
font: {
size: 18
}
}
}
},
title: {
display: true,
text: 'Predicted world population (millions) in 2050',
},
scales: {
y: {
ticks: {
color: "white",
font: {
size: 15,
},
stepSize: 1,
beginAtZero: true
}
},
x: {
ticks: {
color: "white",
font: {
size: 14
},
stepSize: 1,
beginAtZero: true
}
}
}
}
});canvas {
background: grey;
}<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/chart.min.js"></script>