Time Series Line Chart

[juanmigdr]

Description

I am using Victory Charts in my react native expo project and was wondering if it would be possible to create a Time-Series chart but I don't see this is a current feature.

Proposal

Add support for time series chart which takes in two arguments. X = Date | Y = Value
Thanks!

[zibs]

I think this may already be possible but it requires you to structure your data slightly differently. Take a look at the example bar chart in the example repo. With a combination of formatXLabel you are able to transform your x values into anything you need, including dates to display.

Let me know if that doesn't cover your use case.

[denniske]

I am also interested in time series charts.

Currently I see the following issue:
The x axis is not scaled correctly and as such the data points are not correctly positioned in the chart.

const data = [
    { x: new Date(2023, 11, 1), y0: 10, y1: 5 },
    { x: new Date(2024, 5, 1), y0: 15, y1: 5 },
    { x: new Date(2024, 5, 2), y0: 20, y1: 10 },
    { x: new Date(2024, 5, 3), y0: 20, y1: 15 },
    { x: new Date(2024, 12, 1), y0: 30, y1: 25 }
];

<CartesianChart
    data={data}
    xKey="x"
    yKeys={["y0", "y1"]}
    xAxis={{
        font,
        labelColor: paperTheme.colors.onSurface,
        formatXLabel: (label) => { return formatDateShort(label); },
    }}
    yAxis={[{
        font,
        labelColor: paperTheme.colors.onSurface,
    }]}
>
    {({ points }) => (
        <>
            <Line points={points.y0} color="red" strokeWidth={1} />
            <Line points={points.y1} color="yellow" strokeWidth={1} />
            <Scatter points={points.y0} shape="circle" radius={1.5} style="fill" color="red" />
            <Scatter points={points.y1} shape="circle" radius={1.5} style="fill" color="yellow" />
        </>
    )}
</CartesianChart>

[keithluchtel]

@denniske I think if you have your x values as a number representing the date, it should get you closer to what you want. Here's some sample code:

const DATA = [
  { x: new Date(2023, 11, 1).getTime(), y0: 10, y1: 5 },
  { x: new Date(2024, 5, 1).getTime(), y0: 15, y1: 5 },
  { x: new Date(2024, 5, 2).getTime(), y0: 20, y1: 10 },
  { x: new Date(2024, 5, 3).getTime(), y0: 20, y1: 15 },
  { x: new Date(2024, 12, 1).getTime(), y0: 30, y1: 25 },
];

export default function TestingScreen() {
  const font = useFont(inter, 12);

  return (
    <SafeAreaView style={styles.safeView}>
      <View style={{ flex: 1, maxHeight: 400, padding: 32 }}>
        <CartesianChart
          data={DATA}
          xKey="x"
          yKeys={["y0", "y1"]}
          xAxis={{
            font,
            formatXLabel: (label) => {
              const date = new Date(label);
              const formattedDate = date.toLocaleDateString("en-US", {
                month: "short",
                day: "numeric",
              });
              return formattedDate;
            },
          }}
          yAxis={[
            {
              font,
            },
          ]}
        >
          {({ points }) => (
            <>
              <Line points={points.y0} color="red" strokeWidth={1} />
              <Line points={points.y1} color="yellow" strokeWidth={1} />
              <Scatter
                points={points.y0}
                shape="circle"
                radius={1.5}
                style="fill"
                color="red"
              />
              <Scatter
                points={points.y1}
                shape="circle"
                radius={1.5}
                style="fill"
                color="yellow"
              />
            </>
          )}
        </CartesianChart>
      </View>
    </SafeAreaView>
  );
}

[denniske]

thank you @keithluchtel, that looks like a good workaround.

I have just finished modifying the source code to use dates for the x axis with d3 scaleTime():
https://github.com/denniske/victory-native-xl-date

[keithluchtel]

@denniske if you want to put up a PR for time scale support, I'd gladly take a look!

[denniske]

@keithluchtel I will do that if I find time. Should the user need to configure the scale using something like xAxis={{ scale: 'time' }}?

[keithluchtel]

@keithluchtel I will do that if I find time. Should the user need to configure the scale using something like xAxis={{ scale: 'time' }}?

That could be an option, or we could assume if all x items are Date objects that it's a time scale