Bar

Put a BarChart inside ChartContainer and give each Bar a radius to round the top corners of the columns.

Give two bars the same stackId to pile them into one column, with background drawing the empty track behind each.

A BarChart with no axes, grid or tooltip, sized as a sparkline under a weekly sales figure.

Set background on one Bar to draw a track behind each of its columns, so the remaining space reads at a glance.

Give each YAxis a yAxisId and point each Bar at one, so orders and revenue each get their own scale.

Bars grow up or down from a ReferenceLine at zero, and a custom tick colors each axis value by its sign.

Set stackOffset="sign" so positive values stack above zero and negative values stack below it, in one column.

Set minPointSize so very small values still draw a visible bar, with a custom LabelList badge above each column.

Pass a [low, high] pair as the value and each Bar spans from one to the other, like a day's lowest and highest temperature.

Wrap ranged bars in BarStack to place each phase at its own start and end, with radius rounding the whole stack.

Put a Label inside XAxis or pass label to YAxis to name each axis, and add a LabelList to tag every bar.

Add a LabelList to each Bar: one writes page names inside the columns at an angle, the other prints values on top.

Pass a content component to LabelList that draws a rounded pill behind each value, so it stays readable over the bar.

A ReferenceLine marks the budget across a stacked chart, and a LabelList with valueAccessor prints each week's total.

Handle onMouseEnter and onClick on ChartLegend to fade the other series, and click a name to keep it highlighted.

Add a Brush under the chart and drag its handles to zoom into a range of days, with the legend placed on top.

A second XAxis with its own xAxisId and a custom tick groups the months into quarters under the main axis.

A horizontal BarChart with stackOffset="sign" puts male shares left of the axis and female shares right of it.

Pass a shape component to draw each bar as a curved peak, colored by its position, with a matching LabelList on top.

A shape component draws each bar as an outline in its own color, with a thicker stroke on one and an SVG pattern on another.

A shape component holds its own state and toggles the bar between faded and solid each time you click it.

Ranged bars that start where the previous one ended show how gains and costs add up to profit, colored by a shape.

A ranged Bar draws each candle's body and an ErrorBar its wick, colored up or down, with a custom tooltip of prices.

A ranged Bar with a custom shape draws quartiles and the median, ErrorBar adds whiskers and a Scatter the outliers.

One shape used as activeBar too keeps every bar mounted, so a CSS transition widens the bar under the pointer.

Slide a window over the data and compare animationMatchBy strategies, or swap in a swipe with animationInterpolateFn.

An AnimationControllerProvider drives the bars' entry animation from the page's scroll position instead of a timer.