简体   繁体   中英

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM