Wired splines representation when stable data

Hi @osdnk,

I’m doing some tests with stable data (without variation) and the graph looks weird:

The line dotted in purple is the path of react-native-animated-charts (I don’t know why it does those splines), and on the other hand the chart in the background is the representation of victory charts using the same dataset.

Here I attach dataset and ChartPathProvider configuration, it would be very useful if you can help me @osdnk.

const data = [
  {
    "x": 0,
    "y": 138.35,
  },
  {
    "x": 1,
    "y": 138.35,
  },
  {
    "x": 2,
    "y": 138.35,
  },
  {
    "x": 3,
    "y": 138.35,
  },
  {
    "x": 4,
    "y": 138.35,
  },
  {
    "x": 5,
    "y": 138.35,
  },
  {
    "x": 6,
    "y": 138.35,
  },
];
const points = React.useMemo(
  () => ({
    points: interpolator({
      data,
      includeExtremes: true,
      range: 300, // ~1 year of working days
    }),
    smoothingStrategy: 'bezier',
  }),
  [data]
);
<ChartPathProvider data={points}>
  <ChartPath height={SIZE / 2} stroke="yellow" width={SIZE} />
</ChartPathProvider>

Thanks

[osdnk]

Hey, many thanks. Let me quickly take a look

[osdnk]

Hey, Use the newest version and adjust your code by adding y bounds:

const data = [
  {
    "x": 0,
    "y": 138.35,
  },
  {
    "x": 1,
    "y": 138.35,
  },
  {
    "x": 2,
    "y": 138.35,
  },
  {
    "x": 3,
    "y": 138.35,
  },
  {
    "x": 4,
    "y": 138.35,
  },
  {
    "x": 5,
    "y": 138.35,
  },
  {
    "x": 6,
    "y": 138.35,
  },
];
const points = React.useMemo(
  () => ({
    points: interpolator({
      data,
      includeExtremes: true,
      range: 300, // ~1 year of working days
      yRange: [136, 140] // ADD THIS!
    }),
    smoothingStrategy: 'bezier',
  }),
  [data]
);
<ChartPathProvider data={points}>
  <ChartPath height={SIZE / 2} stroke="yellow" width={SIZE} />
</ChartPathProvider>