The LineChart component provides a way to display line charts with interactive features, including hover effects, click events, and custom styling options. It supports various customization options including different chart types, color schemes, and interactive features.
This example uses the useStreamingViewport hook to smoothly pan the x-axis domain (viewport) while streaming new samples, then passes the resulting data into LineChart.
curve is Recharts' interpolation, and it is a claim about the data between your points. natural and monotone draw a smooth line, which implies the value moved continuously; step holds each value until the next reading, which is honest for something that changes in jumps — a price tier, a headcount, a setting. linear sits between the two.
By default the x axis is categorical: each data point gets an equal slot, whatever its value. For readings that are not evenly spaced — samples arriving at irregular times, a measurement against a continuous quantity — set xAxisType="number" so the spacing reflects the actual values, and pass xDomain to pin the visible range.
A fixed xDomain is also what keeps a streaming chart from rescaling on every sample — see the live example above, which drives it from useStreamingViewport.
Animation is on by default. The three animation* props are passed through to Recharts, so they take its values.
Turn animation off for a chart that updates faster than the animation runs: each new sample restarts the transition, so a streaming line spends its time animating rather than showing the data. The second live example above is the same chart with animation={false}.