Custom series

A custom series draws each data item with your own renderItem function, for marks no built-in series has, like error bars, Gantt rows or flame graphs.

LLMs

Variable-width bars

A renderItem that returns a rect spanning two x values, so each bar is as wide as its price band and as tall as its profit.

Histogram

Bins a scatter plot's x and y values and draws each bin as a rect from renderItem, one histogram above the plot and one beside it.

Error bars

A custom series draws a whiskered line group over each bar, from the low to the high value, with dataZoom to scroll the batches.

Error scatter

A custom series draws a range on both axes around every scatter point, reading the bounds through encode with three columns per axis.

Polygon

One polygon through every data point, drawn on the first item through params.context, that reshapes as you zoom with dataZoom.

Bar trend

A polyline from renderItem runs over each group of bars, placed with api.barLayout so it meets the top of every year's bar.

Hexagonal binning

Shots grouped into hexagons on a geo court, sized by attempts and colored by success rate through visualMap.

Profile

Timed blocks on three tracks, each a rect cut to the plot with clipRectByRect, so they stay inside the grid while you zoom.

Cycle plot

Two custom series per month: a polyline through eleven years of sales and a flat line at the month's average.

Polar heatmap

A sector per day and hour on a polar coordinate system, colored by commit count through visualMap.

Calendar icons

A custom series on a calendar places one to four path icons and the day number in each cell of the month.

Flame graph

Stack frames drawn as rect blocks with truncated textContent labels, where clicking a frame zooms into it and Reset shows the whole trace.

Gantt chart

Flights on parking stands as rect bars with tag-shaped labels from a second custom series, and a drag mode that moves a flight to a free slot.

Wind barbs

Arrows from renderItem rotate to the wind direction over a wave height area, with a forecast image and temperature for each day.

Map ripples

Pins on an SVG geo map, each with five rings in a staggered keyframeAnimation and a pin that bounces on its own loop.

Custom gauge

A ring and pointer cut from one gradient with clipPath, animated through extra and during as the value changes every few seconds.

Pie to seats

Switch between a pie and a seat chart drawn by renderItem, and universalTransition morphs each slice into its seats.

Spiral race

Spiral bars on a polar system grow through extra and during transitions, with a label counting rounds as each racer advances.

Circle packing

Nested circles laid out once per render inside renderItem, where clicking a circle zooms into it and the background zooms out.