Multi-Line Chart

A multi-series line chart on a shared grid. Each series is drawn as an SVG polyline that reveals from left to right by animating its stroke dashoffset, with a circular marker popping in at each data point as the line passes it. Series begin on a staggered delay so the lines layer in one after another, and a color-matched legend labels each one.

Each line is an entry in the SERIES array holding a name, a color, and an array of values aligned to the X_LABELS array. The vertical axis, gridlines, and legend are generated from the data, DRAW_DURATION and SERIES_STAGGER set the pacing, and the CHART rectangle sets the plot position and size. Motion is driven by interpolate() over the current frame, so preview and render match and the chart ends on a complete, readable state. Use it to compare plans, cohorts, or regions that share an axis.