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

Share Follow edited May 4, 2016 at 4:28 SoulieBaby asked May 4, 2016 at 2:59 SoulieBabySoulieBaby 5,4712525 gold badges9898 silver badges152152 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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