search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.08k stars 1.26k forks source link

[charts] How to add min and max scaling on axis for bar charts to remove decimal scale values #13641

Closed MainaMwangiy closed 2 months ago

MainaMwangiy commented 2 months ago

Steps to reproduce

Link to live example: (required)

Steps Check this link for the issue https://stackblitz.com/edit/react-k3t8s4?file=Demo.js

Current behavior

Currently, having the scales if the value is 1, then the rest of the scales by default will have decimal scales. image

Expected behavior

Should have a min and max property for the scale or have a property for decimal: false They are instances where the data you have cannot have decimals scales.

Context

My issue is really not related to https://github.com/mui/mui-x/issues/12083. I would like either have a min and max to set the min scale we have or max for the maximum to have.

Alternatively, have a property for decimal = false when we don't the scale to have decimal scale values.

Your environment

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: axis bar charts scaling

JCQuintas commented 2 months ago

Hi @MainaMwangiy thanks for reaching out. To control the steps between each tick, you can use 

        xAxis={[
          {
            tickMinStep: 1,
          },
        ]}

https://stackblitz.com/edit/react-k3t8s4-lpjhxp?file=Demo.js

You can read more on tick positioning and filtering here: https://mui.com/x/react-charts/axis/#tick-position

MainaMwangiy commented 2 months ago

Thanks @JCQuintas That fixes my issue.

github-actions[bot] commented 2 months ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@MainaMwangiy: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.