[Chartjs]-How to change the color of a specific y-axis in Chart.js?

by

1👍

✅

Assuming you are using Chart.js 4, you could use the border node in scales configuration.

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5', '6', '7'],
    datasets: [{
      label: 'Sales',
      data: [12, 19, 3, 5, 2, 3, 14],
      borderWidth: 3,
      yAxisID: 'y'
    }, {
      label: 'Purchases',
      data: [10, 40, 30, 1, 1, 13, 8],
      borderWidth: 3,
      yAxisID: 'y1'
    }],
  },
  options: {
    scales: {
      x: {
        ticks: {
          color: 'red'
        },
        grid: {
          display: false
        },
        border: {
          color: 'red',
        }
      },
      y: {
        ticks: {
          color: 'red'
        },
        grid: {
          display: false
        },
        border: {
          color: 'red',
        }
      },
      y1: {
        position: 'right',
        ticks: {
          color: 'red'
        },
        grid: {
          display: false
        },
        border: {
          color: 'red',
        }
      }
    },
  },
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/chart.umd.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

EDIT: if you want the same color for all chart instances, you could also think to set borderColor in chart defaults:

Chart.defaults.borderColor = 'red';

Leave a comment