react-chart-2 multi x axis

Question

I am using react-chart-2 Line to show graph; What i want is to have 2 line in the same graph but instead of multiple value in y axis i want the same y axis but different label; example i have these label

const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpe = ['circle', 'square']

and i have these value:

const colorsData = [10, 5, 8, 9, 7]
const sharpeData = [17, 2]

in my options scale i have

scales: {
      x: {
        grid: {
          drawOnChartArea: false,
        },
        position: 'bottom' as const;
        labels: colors
      },
      x1: {
        grid: {
          drawOnChartArea: true,
        },
        position: 'top' as const,
        labels: sharpe,
        
      },
      y: {
        beginAtZero: true,
        ticks: {
          maxTicksLimit: 5,
          stepSize: 5,
        },
      },
    },

and in my data i have

{
  labels: colors,
  datasets: [
            {
              backgroundColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: 'rgba(13, 202, 240, 1)',
              pointHoverBackgroundColor: '#fff',
              borderWidth: 1,
              data: colorsData,
              xAxisId: 'x'
            },
    
            {
              backgroundColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: 'rgba(202, 13, 240, 1)',
              pointHoverBackgroundColor: '#fff',
              borderWidth: 1,
              data: sharpeData,
              xAxisId: 'x1',
            }
          ]
}

the expected result is that i have 2 x axis , in the bottom is the colors and in the top the sharpe; one y axis; and the two line will be drawed but the colors depends on colorsData value and the sharpe depends on sharpeData value. But instead the colors line is drawed as expected but the sharpe line follow the colors label instead of sharpe label

score 0 · Answer 1 · answered Oct 25 '22 at 10:32

What you are trying to achieve is not possible. The values of the top and bottom axis should be the same. Unless you stack two charts on top of one another with css.

You can only have the same labels for both axis x and x1 or y and y1 respectively.

This is the official docs on Charts.js for y axis.

https://www.chartjs.org/docs/latest/samples/line/multi-axis.html

Here is some code to give you an idea of what I have come to with top and bottom x axis:

Options:

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    interaction:{
      mode: "index",
      intersect: false,
    },
    stacked: false,
    scales: {
      x:{
        type: "linear",
        display: true,
        position: "bottom",
      },
      x1:{
        type: "linear",
        display: true,
        position: "top",
         grid: {
          drawOnChartArea: false,
        },
      },
     
    },  
  },
};

Data:

const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpeData = [17, 2, 9, 12 ,3];
const colorsData = [10, 5, 8, 9, 7];
const data = {
  labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
  datasets: [
            {
              label: "Colors",
              backgroundColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: 'rgba(13, 202, 240, 1)',
              pointHoverBackgroundColor: '#fff',
              borderWidth: 1,
              data: colorsData,
              xAxisId: 'x',
            },
    
            {
              label: "Shape",
              backgroundColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: 'rgba(202, 13, 240, 1)',
              pointHoverBackgroundColor: '#fff',
              borderWidth: 1,
              data: sharpeData,
              xAxisId: 'x1',
            }
          ]
};

Hope this helps!

react-chart-2 multi x axis

1 Answers1