So im using chart.js http://www.chartjs.org/docs/ and i cant change the color of the text in the bottom
ex: "January","February","March","April","May","June","July" and the numbers in the left side
i tried all these options: scaleFontColor: "#FFFFFF" pointLabelFontColor : "#FFFFFF"
my full code:
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My Second dataset",
fillColor : "rgba(255, 89, 114, 0.6)",
strokeColor : "rgba(51, 51, 51, 1)",
pointColor : "rgba(255, 89, 114, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
maintainAspectRatio: false,
scaleFontColor: "#FFFFFF",
pointLabelFontColor : "#FFFFFF",
pointLabelFontSize : 30,
data : [1,2,10,7,3,1]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
</script>
The chart legend displays data about the datasets that are appearing on the chart.
For chart.js 3.x migration, text-labels on x and y axis are set this way:
Set options to the following:
scales: {
x: {
ticks: {
color: "red"
}
},
y: {
ticks: {
color: "green"
}
}
}
similar solution is found if you want to change color of grid lines, inside of x / y value write
grid: {
color: "white"
}
In Chart.js v3 it can be achieved with:
Chart.defaults.color = "#ff0000";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With