scaleBand doesn't work as an xScale prop to AreaChart

[mark-carrington]

What is the problem?

I'm looking to layout all of the data points evenly across the x-axis. This is for a Pricing Graph for a stock, that has price points during trading hours only. This is specifically for a 5 day view, where we'd like to show more than 5 data points, so we've taken ~10 data points for each of the previous 5 days.

From the d3-scale docs, it looked as though scaleBand would do what we were looking for. But it doesn't work an an xScale prop for an AreaChart. This seems to be because the we can't call clamp on the result of xScale().domain([xMin, xMax]).range([left, width - right]): https://github.com/JesperLekland/react-native-svg-charts/blob/dev/src/chart/chart.js#L77

I would also appreciate if you knew of any workarounds for a use case like the above, if this isn't deemed a bug.

When does it happen?

When passing an xScale prop to AreaChart.

What platform?

• [x] iOS 14.4
• [ ] Android

react-native version: 0.63.4 react-native-svg-charts version: 5.3.0

Code to reproduce

import { scaleBand } from 'd3-scale'

<AreaChart
    {...{ data, xAccessor, yAccessor }}
    ...
    xScale={scaleBand}
>
    ...
</AreaChart>

[danielmorbeck]

What is the problem?

I'm looking to layout all of the data points evenly across the x-axis. This is for a Pricing Graph for a stock, that has price points during trading hours only. This is specifically for a 5 day view, where we'd like to show more than 5 data points, so we've taken ~10 data points for each of the previous 5 days.

From the d3-scale docs, it looked as though scaleBand would do what we were looking for. But it doesn't work an an xScale prop for an AreaChart. This seems to be because the we can't call clamp on the result of xScale().domain([xMin, xMax]).range([left, width - right]): https://github.com/JesperLekland/react-native-svg-charts/blob/dev/src/chart/chart.js#L77

I would also appreciate if you knew of any workarounds for a use case like the above, if this isn't deemed a bug.

When does it happen?

When passing an xScale prop to AreaChart.

What platform?

• [x] iOS 14.4
• [ ] Android

react-native version: 0.63.4 react-native-svg-charts version: 5.3.0

Code to reproduce

import { scaleBand } from 'd3-scale'

<AreaChart
    {...{ data, xAccessor, yAccessor }}
    ...
    xScale={scaleBand}
>
    ...
</AreaChart>

did you solve it?