Composed

Composed charts draw bars, lines, areas and points on shared axes, to compare measures with different shapes in one view.

LLMs

Line, bar and area

Mix Area, Bar, Line and Scatter in one ComposedChart, each reading its own field of the same rows.

Same data twice

Draw one field as both a Bar and a Line, with payloadUniqBy keeping a single entry in the tooltip and legend.

Vertical layout

Set layout="vertical" to lay bars, the area and the line along a category YAxis, one row per city.

Axis labels

Pass label to XAxis and YAxis to name each axis, with position and angle placing the text beside it.

Line of best fit

Plot sample points with Scatter on a numeric axis and draw a Line through two end points as the trend for each series.

Banded range

Give an Area a [low, high] pair per row to shade a range around a Line, with connectNulls bridging the missing month.

Error bars

Nest ErrorBar in a Scatter with direction x or y to show the uncertainty of each point, as one value or a low and high pair.

Responsive size

ChartContainer fills the width of its parent and takes its height from className, so the chart resizes with the card.

Active labels

Track the hovered row with onMouseMove and render a LabelList only at that index, labeling the price, target and range.