[Chartjs]-How to get multiple x-axis labels for a react-chartjs-2 chart

by

2👍

✅

This is because you are using V2 syntax in V3, V3 has some major breaking changes. Please read the migration guide for all of them.

In v3 all scales are their own object where the object key is the scale ID

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    scales: {
      x: {
        ticks: {
          callback: function(label) {
            return `\$${this.getLabelForValue(label)}`
          }
        }
      },
      secondXAxis: {
        axis: 'x',
        labels: ['V2', 'syntax', 'in', 'v3'],
        grid: {
          drawOnChartArea: false
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

1👍

You need to give each dataset a xAxisID in the dataset, so you can define the position of it and how it displays.

Here’s an example

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import faker from 'faker';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top' as const,
    },
    title: {
      display: true,
      text: 'Chart.js Line Chart - Multiple X Axes',
    },
  },
  scales: {
    x1: {
      position: 'top',
      ticks: {
        callback: function(value, index, values) {
          return this.getLabelForValue(value).split(';')[1];
        }
      }
    },
    x2: {
      position: 'bottom',
      ticks: {
        callback: function(value, index, values) {
          return this.getLabelForValue(value).split(';')[0];
        }
      }
    }
  }
};

const labels = ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"];

export const data = {
  labels,
  datasets: [
    {
      label: 'Red Dataset',
      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      xAxisID: 'x1'
    },
    {
      label: 'Blue Dataset',
      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
      borderColor: 'rgb(53, 162, 235)',
      backgroundColor: 'rgba(53, 162, 235, 0.5)',
      xAxisID: 'x2'
    },
  ],
};

export function App() {
  return <Line options={options} data={data} />;
}

Leave a comment