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/