Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

charts js change line chart axis font size/color and background lines

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).

like image 696
Leanne Seawright Avatar asked May 04 '16 02:05

Leanne Seawright


1 Answers

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
  }],
}
like image 66
Leanne Seawright Avatar answered Sep 27 '22 22:09

Leanne Seawright