简体   繁体   中英

Change color of X and Y axis values in Chart.js

I'm using v2.*. However, I can't seem to set the default color for a line chart. I'm mainly looking to set the color of the x/y chart values. I figured the below might do it - but it does nothing to the chart at all.

Chart.defaults.global.defaultColor = 'orange',

Update

Here's a jsfiddle with live chart. In short, I'm looking to change the color of the labels ie Feb 7, 2016, etc etc.

https://jsfiddle.net/o534w6jj/

Okay, so I figured it out. It's the ticks property I'm looking for...see code below.

See updated jsfiddle: https://jsfiddle.net/o534w6jj/1/

var ctx = $("#weekly-clicks-chart");
var weeklyClicksChart = new Chart(ctx, {
    type: 'line',
    data: data,
    scaleFontColor: 'red',
    options: {
            scaleFontColor: 'red',
        responsive: true,
        tooltips: {
            mode: 'single',
        },
        scales: {
            xAxes: [{ 
                gridLines: {
                    display: false,
                },
                ticks: {
                  fontColor: "#CCC", // this here
                },
            }],
            yAxes: [{
                display: false,
                gridLines: {
                    display: false,
                },
            }],
        }
    }         
});

for anyone using Chartjs v3+ you can try this.

    options: {
      ...
      scales: {
        y: {
          ticks: {
            color: 'red'
          }
        }
        ,
      }
    }

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