Chartjs-How do you add Axis Labels on to both x-axis and y-axis? (Chart.js)

by

0👍

✅

This can be done with the following options:

options: {
  scales: {
    y: {
      beginAtZero: true,
      title: {
        display: true,
        text: 'Y-Axis Label'
      }
    },
    x: {
      title: {
        display: true,
        text: 'X-Axis Label'
      }
    }
  }
}

For further information, consult Scale Title Configuration from the Chart.js documentation.

Please take a look at your amended code and see how it works with static data.

new Chart('chart', {
  type: 'line',
  data: {
    labels: ['A', 'B','C','D','E'],
    datasets: [{
        label: 'Dataset 1',
        data: [8, 7, 5, 6, 2],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        pointRadius: 0,
        tension: 0.4 
      },
      {
        label: 'Dataset 2',
        data: [2, 4, 2, 4, 7],
        backgroundColor: 'blue, 0.2',
        borderColor: 'blue',
        pointRadius: 0,
        tension: 0.4
      },
      {
        label: 'Dataset 3',
        data: [5, 8, 7, 6, 2],
        backgroundColor: 'pink, 0.2',
        borderColor: 'pink',
        pointRadius: 0,
        tension: 0.4
      },
      {
        label: 'Dataset 4',
        data: [8, 7, 5, 6, 2],
        backgroundColor: 'orange, 0.2',
        borderColor: 'orange',
        pointRadius: 0,
        tension: 0.4
      },
      {
        label: 'Dataset 5',
        data: [5, 3, 2, 4, 1],
        backgroundColor: 'yellow, 0.2',
        borderColor: 'yellow',
        pointRadius: 0,
        tension: 0.4
      },
      {
        label: 'Dataset 6',
        data: [5, 6, 2, 8, 7],
        backgroundColor: 'black, 0.2',
        borderColor: 'black',
        pointRadius: 0,
        tension: 0.4
      }
    ],
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Y-Axis Label'
        }
      },
      x: {
        title: {
          display: true,
          text: 'X-Axis Label'
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="chart" height="110"></canvas>

Leave a comment