react-native-chart-kit
react-native-chart-kit copied to clipboard
indiespirit
setting min & max ranges for line charts
Is it possible to set the min & max which are not from the data itself?
Sat my data is [20,30] and I would still like to see the Y axis from 10-80. Is it possible?
If not I believe it would be great to add it.
Would be happy to add it myself
As a hack i set a 2nd dataset with desired [min, max] and render a transparent line. Not ideal but worked as a temp fix for me.
Thanks !
On Mon, Feb 22, 2021, 20:04 Geoff Abbott [email protected] wrote:
As a hack i set a 2nd dataset with desired [min, max] and render a transparent line. Not ideal but worked as a temp fix for me.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/indiespirit/react-native-chart-kit/issues/447#issuecomment-783561969, or unsubscribe https://github.com/notifications/unsubscribe-auth/AO6CAQRVBBCJGKRPMPODZQDTAKMBTANCNFSM4UMDDR2A .
As a hack i set a 2nd dataset with desired [min, max] and render a transparent line. Not ideal but worked as a temp fix for me.
Nice hack! Any way to set withShadow={false} just for that hacky line?
I used this datasets: [ { data, }, { data: [min, max], color: () => 'transparent', strokeWidth: 0, withDots: false, }, ],
As a hack i set a 2nd dataset with desired [min, max] and render a transparent line. Not ideal but worked as a temp fix for me.
Nice hack! Any way to set withShadow={false} just for that hacky line?
The method @BishoyBishai proposed causes the single data point to get rendered halfway through the chart, which gives that shadow. The way to hide it is to fill the whole length of your data with the min, max:
// this assumes that all datasets[i].data are the same length and that datasets[0].data is defined
datasets: [
...datasets,
{
data: new Array(datasets[0].data.length).fill(min),
color: () => 'transparent',
strokeWidth: 0,
withDots: false,
},
{
data: new Array(datasets[0].data.length).fill(max),
color: () => 'transparent',
strokeWidth: 0,
withDots: false,
},
],
I used this
datasets: [ { data, }, { data: [min, max], color: () => 'transparent', strokeWidth: 0, withDots: false, }, ],
Thanks, @BishoyBishai !
Looking at the line chart code, strokeWidth is not used so we can simplify our dummy dataset. If strokeWidth is zero (falsy) on the dataset, it falls back to the value for the chart, and if that is falsy, it defaults to the magic number 3.
https://github.com/indiespirit/react-native-chart-kit/blob/304116394d20729b53216ba024684eaf30fc85b7/src/line-chart/LineChart.tsx#L235
This looks like the same issue as #259. It would be great to make this a feature, to set y-axis min and max values in the chart config. There is already a fromZero option, so the effort to do this might not be too terrible.
Good news for our very hacky solution. As @BishoyBishai taught us above, we can add a new dataset to our list to push the y-axis range higher or lower (this can only extend the range, not constrict it).
The dataset was made invisible by setting color function to transparent. This wasn't convenient for me, so I used svg dashes to hide the dummy dataset:
{
key: 'dummy-range-padding',
data: [min, max],
strokeDashArray: [0, 1000],
withDots: false,
}
The first of the strokeDashArray is the width of the dash. Zero make it not draw one. The second value there is the width of the space. 1000 is just an arbitrary non-zero value.
The withDots field tells the graph not to draw all the points, just the line (which we suppressed with the strokeDashArray).
Then min and max are the new graph extents, which you can calculate to nicely frame your data.
The key field is just an identifier, not used by the graph.
As a hack i set a 2nd dataset with desired [min, max] and render a transparent line. Not ideal but worked as a temp fix for me.
Nice hack! Any way to set withShadow={false} just for that hacky line?
This is possible with the useShadowColorFromDataset chart config.
datasets: [
{
data: actualData,
color: () => 'red', // Color of your real data shadow.
},
{
key: 'dummy-range-padding',
data: [0, 100],
color: () => 'rgba0, 0, 0, 0',
strokeDashArray: [0, 1000],
withDots: false,
},
],
you can use fromNumber to set the max value for Y axes
This is what worked for me!! Thank you so much
you can use fromNumber to set the max value for Y axes
Perfect answer thank you
you can use fromNumber to set the max value for Y axes
Mark this as the PERFECT answer! This worked for me too
It's 2023 still has no max min props!
And using fromNumber props will cause some with y axis issue when the data only has length one.
