I've been trying to change the colour of the background lines, and the axis font-size and color, to no avail. I'm currently using the latest version of charts.js, and can't seem to figure out how to make the changes. In the older version of charts, I could change them, but that code no longer works.
http://www.chartjs.org/docs
Here's my code:
var lineoptions = {
legend:{
display:false
},
scales:{
yAxes:[{
display:false
}]
},
tooltips:{
enabled:false
},
elements:{
point:{
radius:4,
borderWidth:2
}
}
};
var linedata = {
labels:[
"618",
"39",
"1734",
"3459"
],
datasets:[
{
data:[618,39,1734,3459],
fill:false,
borderColor:"rgba(227,6,20,1)",
pointBorderColor:"rgba(227,6,20,1)",
pointBackgroundColor:"rgba(255,255,255,1)",
pointHoverBackgroundColor:"rgba(255,255,255,1)",
pointHoverBorderColor:"rgba(227,6,20,1)",
}]
};
var linechart = document.getElementById("canvas-line").getContext("2d");
var myLineChart = new Chart(linechart,{
type:'line',
data:linedata,
options:lineoptions
});
* EDIT *
I've managed to change the colour of the axis information by using this:
defaultFontColor:'#6d6e71',
But I still need to figure out how to change the background lines of the chart itself (x and y lines).
Ok, I figured it out:
scales:{
xAxes:[{
gridLines:{
color:"rgba(255,255,255,0.5)",
zeroLineColor:"rgba(255,255,255,0.5)"
}
}],
yAxes:[{
display:false
}],
}
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