[charts] LineChart have only MuiChartsAxis-right and not left

[DonikaV]

Hello, i am new to x-charts and maybe because lack of knowledge I don't know how to do it and can not find it in the docs. So I want to have only MuiChartsAxis-right and not render the left one, because if I do what I have now - the chart have less width than it should have.
I am trying to build an expenses chart with buttons in the bottom which will be clickable, this is what I disabled bottom information and will add my custom ones. Also, I don'know how to add "$" to the values at the right. I triedvalueFormatter = (value) =>$${value}, but it brokes the UI
So this is my code:

<LineChart
  height={450}
  margin={{ top: 100 }}
  colors={['#2F4CDD', '#B519EC']}
  grid={{ horizontal: true }}
  series={[
    {
      yAxisId: 'logAxis',
      id: 'main',
      data: pData,
      area: true,
      showMark: false,
    },
  ]}
  yAxis={[
    {
      id: 'linearAxis',
      scaleType: 'linear',
    },
    {
      id: 'logAxis',
      scaleType: 'log',
    },
  ]}
  xAxis={[
    {
      scaleType: 'point',
      data: xLabels,
    },
  ]}
  rightAxis="logAxis"
  leftAxis={null}
  sx={{
    '& .MuiAreaElement-series-main': {
      fill: "url('#myGradient')",
    },
  }}
>
  <Colorswitch />
</LineChart>

This is what I have

and this is what I want to have

Search keywords:

Search keywords:

[JCQuintas]

Hi @DonikaV you can try something like on this codesandbox: https://codesandbox.io/p/sandbox/gracious-lovelace-5k4z83

Axis formatting goes into the axis configuration, though it shouldn't break the tick positioning, I'll take a look at that.

[DonikaV]

Hi @zannager you can try something like on this codesandbox: https://codesandbox.io/p/sandbox/gracious-lovelace-5k4z83

Axis formatting goes into the axis configuration, though it shouldn't break the tick positioning, I'll take a look at that.

Amazing! Thank you so much!
One more question, if I want to have

const xLabels = ['1M', '2M', '3M', '6M', 'YTD', 'All']; // Months | YEAR | ALL 
 xAxis={[
                    {
                      scaleType: 'point',
                      data: xLabels,
                    },
                  ]}

And in the bottom I will add also buttons with same labels and on click will change series data
Its ok? Or I need to change scaleType or smh like this?

[JCQuintas]

I don't think you should use the xAxis to have labels/buttons. You can do that outside of the chart and then change all the necessary data to display your current state

[DonikaV]

BTW with these settings, grid={{ horizontal: true }}, grid is not presented... On your demo as well.
But thank you!

[JCQuintas]

Grid seems to be applied only to the first axis, so you would need to remove the linear axis

        {
          id: "linearAxis",
          scaleType: "linear",
        },

[DonikaV]

Grid seems to be applied only to the first axis, so you would need to remove the linear axis

    {
      id: "linearAxis",
      scaleType: "linear",
    },

Tried this,

app-index.js:33 Warning: Encountered two children with the same key, `horizontal-`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    at ChartsGridHorizontal (webpack-internal:///(app-pages-browser)/./node_modules/@mui/x-charts/ChartsGrid/ChartsHorizontalGrid.js:19:5)

and then it renders this

[JCQuintas]

yes, the current grid renders based on the shown axis. To have a "square" grid on a "log" axis you would have to go into more in-depth customization

Creating custom components: https://mui.com/x/react-charts/components/
Composition: https://mui.com/x/react-charts/composition/

[michelengelen]

Hey @DonikaV is this issue resolved for you with the provided solutions? If yes, feel free to close it! Thanks!

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.