Bar

Bar charts compare values across categories, side by side, stacked into totals, or laid around a circle.

LLMs

Basic bar

A bar series on a category x axis, one bar per weekday, with every other setting left at its default.

Ticks aligned with labels

Set axisTick.alignWithLabel so each tick sits under its label, and barWidth to make the bars fill most of each band.

Bar background

Turn on showBackground to draw a full-height track behind each bar, so its value reads against the axis maximum.

Single bar style

Give one data item its own itemStyle to call out a single bar, here the busiest day of the week.

Horizontal bars

Put the category axis on yAxis and the value axis on xAxis for long labels, here world population for two years.

Stacked horizontal

Stack five bar series on a horizontal axis with a label on each segment and emphasis.focus set to series.

Stacked and grouped

Bars that share a stack name pile up, the rest sit side by side, and a markLine joins the lowest and highest search bars.

Rounded stack tops

Set itemStyle.borderRadius per data item so only the top segment of each stack gets rounded corners, even when some are empty.

Labels beside negatives

Category names drawn as bar labels with formatter, moved to the right of each negative bar through a per-item label.

Negative values

A stacked bar pair with negative expenses and positive income, with each label.position set to read away from zero.

Waterfall

A transparent placeholder series stacked under the real one turns plain bars into a waterfall of monthly costs.

Accumulated waterfall

Income and expense series stacked on a transparent base, with a tooltip formatter that skips the placeholder.

Mark points and lines

Each series shows its maximum and minimum with markPoint and its average with a markLine, for monthly rainfall and evaporation.

Bars with a line

Two bar series share the left axis and a line series reads the right one through yAxisIndex, each with its own unit.

Multiple y axes

Three value axes, two on the right with an offset, and alignTicks so their grid lines meet, each colored like its series.

Label rotation

Set label.rotate and label.position on grouped bars, with a slider for the angle and a select for where the label sits.

Normalized stack

Divide each value by its day's total so a stack of bars always reaches 100 percent, labeled with each share.

Normalized with bands

A 100 percent stack with a custom series drawing translucent bands between bars, so each share's change is easy to follow.

Gradient and click to zoom

Fill bars with a LinearGradient, label them inside the axis, and dispatch a dataZoom action on click to focus nearby days.

Animation delay

Stagger each bar's entrance with an animationDelay function and an elasticOut easing, one series slightly after the other.

Radial bars with labels

A bar series on a polar grid with categories around the angle axis, and a control for where label.position puts each label.

Tangential bars with labels

Categories on the radius axis turn polar bars into arcs, with a control for where label.position puts each label.

Partial polar grids

Two polar grids, each limited to a quarter circle with startAngle and endAngle, sharing one chart.

Stacked arcs

Three bar series with one stack on a polar grid with categories on the radius axis, so they stack along each ring.

Stacked radial bars

Three bar series with one stack on a polar grid with categories on the angle axis, so they stack outward.

Round caps

Set roundCap on a polar bar series to round both ends of each arc, next to a series without it.

Ranges on a polar grid

Transparent stack placeholders float a range bar and a thin average marker per city around a polar grid.

Axis breaks

Set breaks on the value axis to skip empty ranges between small and huge values, and click a break to expand it.

Brush to add a break

Drag across the chart to turn that value range into a new breaks entry, merged with any break it overlaps.

Brush selection

Add a brush component with rectangle, polygon and axis-band tools to select bars across two stacks.

Drilldown

Click a bar to replace it with its breakdown, morphing between levels with universalTransition and a matching dataGroupId.

Multi-level drilldown

Use itemGroupId and itemChildGroupId in encode to drill three levels deep, with a back button to climb out.

Bar race

Turn on realtimeSort with valueAnimation labels and update the data on a timer, so bars swap places as they grow.

Country race

A realtimeSort race over a dataset that steps through years, with flags in a rich axis label and the year drawn behind.

Live data

A bar and a line series on two x axes, shifting one point off and pushing a new one on every couple of seconds.

Rich text labels

Axis labels with icons through rich styles with a background image, and markPoint labels built from several rich styles.

Large data

Set large on a bar series to draw half a million bars, with dataZoom to move through them.

Zoom on both axes

Two dataZoom sliders, one on the category axis and one on the value axis with filterMode set to empty, over a large budget.

Timeline

A timeline plays through ten years of options, swapping the data of six bar series and a pie of industry shares.

Watermark

A pattern background tiles a watermark behind two bar grids and two pies laid out in one chart.