JAVASCRIPT

chart-js-2

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} />;
}