Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ChartJS. Change axis line color

Tags:

I wanna know if it's possible to change the color of the chart axis using ChartJS.

Thanks

like image 551
Aceconhielo Avatar asked Jan 31 '17 13:01

Aceconhielo


People also ask

How do you change axis color in ChartJS?

With ChartJS 3, you can change the color of the labels by setting the scales. x. ticks.


3 Answers

I know this question was asked over 2 years ago and the OP has already marked a correct answer, but I have a solution to the problem that the OP mentioned in the comments of the marked answer and I'd like to solve it to save other people some time.

But this changes the color of the axis and all the gridLines, what if I just want to change the axis color? For example, I want the axis line solid black and the grid lines grey.

If you're trying to achieve this, then the marked answer won't do it for you but the following should:

yAxes: [{     gridLines: {         zeroLineColor: '#ffcc33'     } }] 
like image 84
A Friend Avatar answered Sep 22 '22 15:09

A Friend


you can change the color by scales configuration under chart options:

type: '...',
data: {...},
options: {
       scales: {
              xAxes: [{gridLines: { color: "#131c2b" }}],
              yAxes: [{gridLines: { color: "#131c2b" }}]
              }
    }
like image 22
Wei Jian Avatar answered Sep 22 '22 15:09

Wei Jian


Good question and good answer from @A Friend

His answer works perfectly well with ....... chart.js v2.xx

Here now for version 3.xx for those interested:

(as v3.xx is not backwards compatible with v2.xx)
Using borderColor instead of zeroLineColor to change the color of the chart axis using Chart.js v3.xx:

  scales: {
    x: {  // <-- axis is not array anymore, unlike before in v2.x: '[{'
      grid: {
        color: 'rgba(255,0,0,0.1)',
        borderColor: 'red'  // <-- this line is answer to initial question
      }
    },
    y: {  // <-- axis is not array anymore, unlike before in v2.x: '[{'
      grid: {
        color: 'rgba(0,255,0,0.1)',
        borderColor: 'green'  // <-- this line is answer to initial question
      }
    }
  }

Following a working snippet with complete code:

const labels=["2021-08-01","2021-08-02","2021-08-03","2021-08-04","2021-08-05"];
const data_1=[39,41,42,43,43];
const data_2=[37,38,40,41,39];

const ctx=document.querySelector('canvas').getContext('2d');

const data = {
  labels: labels,
  datasets: [{
    label: 'Data 1',
    borderColor: 'grey',
    data: data_1
  }, {
    label: 'Data 2',
    borderColor: 'grey',
    data: data_2
  }]
};

const options = {
  scales: {
    x: {
      grid: {
        color: 'rgba(255,0,0,0.1)',
        borderColor: 'red'
      }
    },
    y: {
      grid: {
        color: 'rgba(0,255,0,0.1)',
        borderColor: 'green'
      }
    }
  }
};

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.5.0 -->

<canvas width="320" height="240"></canvas>
like image 37
Jürgen Fink Avatar answered Sep 22 '22 15:09

Jürgen Fink