Line

Draw two Line series over a grid in a LineChart, with a tooltip and a legend naming each series from the config.

Set strokeDasharray on a Line to draw it dashed, like an even dash for a target and an uneven pattern for a projection.

Set layout="vertical" on the chart to list the categories down the Y axis and run the values along the X axis.

Pass domain to the value axis to set its range, here from zero to "dataMax + 1000" so the longest line keeps some room.

Give each YAxis a yAxisId and point each Line at one, to compare revenue in dollars with a conversion rate in percent.

Set connectNulls on a Line to draw straight across a missing value, where the first chart leaves a gap.

Pass padding to the XAxis to leave space before the first point and after the last, without changing the scale.

Add a ReferenceLine at an x category or a y value, with a label, to mark a deploy and a response time limit.

Hide the axis lines and draw a ReferenceLine at zero on each axis, so the axes cross at the origin when values go negative.

Pass a component to dot to draw each point yourself, like a happy face above the threshold and a sad one below it.

Pass a component to label to print each value above its point, and to the axis tick to rotate long category names.

Give each Line its own data and set allowDuplicatedCategory={false} on the XAxis to merge the categories they share.

Set interval on the axes to choose which ticks stay when they do not all fit, like keeping the first, the last or every other one.

Drop the axes, grid and dots and give the chart a small fixed size to show a trend beside a number.

Give charts the same syncId to share the tooltip as you hover, and add a Brush to one of them to zoom all three.

Pass a function to syncMethod to match charts whose points do not line up, snapping the tooltip to the nearest date.

Hover a legend item to fade the other series and raise its Line with zIndex, so the line you point at draws on top.

Pass a shape that fades the line in on its entrance animation, while swapping the data keeps the default update animation.

Set animationMatchBy to animate a moving window by matching points on their time, so lines slide instead of morphing.

Drag across the chart to draw a ReferenceArea, then zoom both axes to that range when you let go.

Track the hovered point with onMouseMove to fade the rest of each line through a gradient and join both values with a ReferenceLine.