Comments (7)
Component: LineChart
from mui-x.
Here is the solution: https://codesandbox.io/p/sandbox/graph-axis-name-forked-2ccmkc?file=%2Fsrc%2FApp.tsx%3A162%2C13
1. pick the correct scale
scaleType: 'point'
is here for the case you have categories (you know your data will be in categories and never outside).
You need to accept any king of number. Then I would recommend to use the default scale (scaleType: 'linear'
) you can simply do not specify a scale since it's the default one.
2. fix the ticks
Now the axis is doing its best to show meaning full ticks. Since it goes from 0 to 1200 it is proposing 0, 200, 400, 600, 800, 1000, 1200.
But we have labels for 100, 300, 600, 800, 1000, 1200.
The solution is to specify in the axis definition tickLabel={[ 100, 300, 600, 800, 1000, 1200 ]}
which forces the tick to be displayed at those values.
If that does solves your issue, please consider closing it
from mui-x.
@alexfauquette, Oh, thank you very much! I have some more questions though, why the line axisHighlight={{ x: "none", y: "line" }}
is not drawn correctly for the points? Is it some kind of bug?
Is there any way to increase the distance between the "tickLabel"? I got it like this (the first and the second are quite close to each other):
Ideally, I'd like to have equal distance between "tickLabel" despite the difference in values. This should work:
from mui-x.
Ideally, I'd like to have equal distance between "tickLabel" despite the difference in values. This should work:
That does not sound feasible. Do have that you would need to create your own weird scale type. Where you can end up with moving for 0 to 100px represent an increase of 50, and moving from 100px to 200pc represent an increase of 236
You have two standard alternatives:
If the data does not represent something linear you can try the 'log'
or 'sqrt'
scale type
The other option is to display all the tick and show labels only on the meaning full one
axisHighlight={{ x: "none", y: "line" }}
is not drawn correctly for the points
Your y-axis probably still have a dataKey
and/or data
property. The highlight will then only be visible for those values
from mui-x.
If the data does not represent something linear you can try the
'log'
or'sqrt'
scale type
With log
all the points moved to the upper left corner, and with sqrt
it got even worse. Okay then, if it can't be fixed so easily, I'll have to leave it like that.
Your y-axis probably still have a
dataKey
and/ordata
property. The highlight will then only be visible for those values
Yes, my axis has dataKey="value"
, I removed that and now this line moves freely behind the cursor but is not "magnetic" to points. Is it possible to show it when hovering over any point?
from mui-x.
Is it possible to show it when hovering over any point?
Not for now. Those highlight lines are here to show axis values, and not points.
To do it, you will probably need to use useHighlighted
to know if an item is highlighted, and then render a custom line at this value
from mui-x.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@CzarOfScripts: 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.
from mui-x.
Related Issues (20)
- [docs] Add a recipe for persisting filters on page refresh HOT 2
- [data grid] Add new rows on paste HOT 1
- @mui/x-license 7.12.1 not available HOT 1
- [data grid] Exception when printing styled Data Grid with hidden columns "Cannot read properties of null (reading 'cloneNode')" HOT 4
- [data grid] Editing row from example code not working HOT 1
- [data grid] Apply page level filtering once all filter are selected and click on button like 'Apply Filters' HOT 2
- [data grid] Header Not Adjusted with the width of browser HOT 1
- [pickers] How to extend type for `slotProps`? HOT 3
- Date Time Range Picker HOT 1
- [data grid] Copy & Paste on Cells using localize keyboard HOT 2
- [data grid] Bundle size win opportunities
- [pickers] Customization DX, ideas
- [data grid] TanStack Query integration demos HOT 1
- [tree view] `apiRef` type is `Partial<{}>` which causes Typescript compilation to fail HOT 2
- [pickers][DatePicker] Calendar not fully displayed and next arrow unresponsive HOT 1
- [question] Clipboard paste not working on data grid when one cell is selected and current page is > 0
- [docs] Remove TypeScript v3 outdated version mentions HOT 1
- Horizontal Scrollbar Disappearing on Wide Tables HOT 1
- Data grid tree view not loading server side data correctly
- Date range picker selecting past date - how to force reset the value?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.