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.

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

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

• javascript
• charts

1 Answer 1

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
  }],
}