React-native-chart-kit: setting min & max ranges for line charts

[ikoazoulay]

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

[GeoffAbbott]

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.

[ikoazoulay]

Thanks !

On Mon, Feb 22, 2021, 20:04 Geoff Abbott [e-mail] 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
.

[versa-dev]

Good method!

[SrBrahma]

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?

[BishoyBishai]

I used this datasets: [ { data, }, { data: [min, max], color: () => 'transparent', strokeWidth: 0, withDots: false, }, ],

[PhillipFraThailand]

@BishoyBishai This worked thank you!

[SaltedBlowfish]

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,
  },
],