[charts] Add multiple Y axes to the left or right of the chart

[prakhargupta1]

Summary

I would like to display multiple Y axes on the left or right side of the chart. Currently, LineChart has
leftAxis and rightAxis properties. There is not the ability to display more than one Y axis on the left or right and you can only display up to two Y axes (one on the left, one on the right).

Examples

https://www.highcharts.com/demo/highcharts/combo-multi-axes

https://apexcharts.com/react-chart-demos/mixed-charts/multiple-yaxis/#

Search keywords: multiple Y Axes

Order ID: 104043

[michelengelen]

Thanks for opening this feature request.
It makes sense to add this IMO, so I'll add it to the board.

maybe there is a way to add multiple axes with the current product as a workaround, @alexfauquette?

[alexfauquette]

Yes, a workaround with composition is feasible.

The idea is to add extra margin on the side you want to put an additional axis. Then you can add an extra <ChartsYAxis /> with the axisId you want to display and place it where it looks best for you :)

The codesandbox is a bit buggy, so I also add the code here

import * as React from 'react';
import Box from '@mui/material/Box';
import { LineChart } from '@mui/x-charts/LineChart';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'


const sample = [1, 10, 30, 50, 70, 90, 100];

export default function ScaleExample() {
  return (
    <Box sx={{ width: '100%', maxWidth: 500 }}>
      <LineChart
        xAxis={[{ data: sample }]}
        yAxis={[
          { label: 'linear (0 to 100)', id: 'linearAxis', scaleType: 'linear' },
          { label: 'linear (0 to 10)', id: 'linear2Axis', scaleType: 'linear', min: 0, max: 10 },
          { label: 'log', id: 'logAxis', scaleType: 'log' },
        ]}
        series={[
          { yAxisId: 'linear2Axis', data: sample.map(y => Math.sqrt(y)), label: 'sqrt' },
          { yAxisId: 'linearAxis', data: sample, label: 'linear' },
          { yAxisId: 'logAxis', data: sample, label: 'log' },
        ]}
        leftAxis="linearAxis"
        rightAxis="logAxis"
        margin={{ left: 150 }}
        height={400}
      >
        <ChartsYAxis axisId='linear2Axis' sx={{ transform: 'translateX(75px)' }} />
      </LineChart>
    </Box>
  );
}