Line

Line and area charts show how a value changes over time or along an ordered axis, and how several series compare or add up.

LLMs

Basic line

Set a series type to line over a category X axis to join one value per day, like orders across a week.

Smooth line

Set smooth on a line series to draw a curve through the points instead of straight segments between them.

Basic area

Add an empty areaStyle to a line series to fill the space under it, with boundaryGap off so the area meets both edges.

Stacked lines

Give several line series the same stack name so each one starts where the one below it ends, adding up visits by channel.

Stacked area

Combine stack with areaStyle and emphasis.focus so hovering a band fades the others, with a label on the top series.

Gradient stacked area

Fill each stacked band with a LinearGradient that runs from one series color to the next, on smooth lines with no stroke.

Step lines

Set step to start, middle or end to draw each change as a jump, placed before, between or after the points.

Line and point style

Use lineStyle for a thick dashed stroke and itemStyle with symbol and symbolSize for large outlined triangles.

Value axes

Pass [x, y] pairs to a line series over two value axes to plot a path in any order, not one value per category.

Vertical category axis

Put the category axis on Y and values on X to read temperature against altitude, with a soft shadow on the line.

Log axis

Set the Y axis type to log so growth by powers and by halves both read as straight lines, with minor split lines.

Mark points and lines

Add markPoint for the highest and lowest days and markLine for the average, plus a line drawn from a fixed spot to the max.

Highlighted ranges

Use a piecewise visualMap on the X dimension to fill only some ranges of an area, with markLine edges around them.

Peak sections

Color segments of one line with a piecewise visualMap and shade the peak hours behind it with markArea.

Two X axes

Bind each series to its own X axis with xAxisIndex to compare the same months across two years on one value axis.

Dataset filter

Add a filter transform to a dataset to derive one dataset per country from a single table, then point each series at one.

Gradient line

Color a line with a continuous visualMap, by value in the top grid and by position along the X axis in the bottom one.

Confidence band

Stack two invisible line series and fill the upper one with areaStyle to draw a band around the line in the middle.

Large area

Draw 20,000 points with sampling set to lttb and a gradient fill, starting zoomed in with an inside and a slider dataZoom.

Value bands

Color a long series by level with a piecewise visualMap, mark each threshold with markLine and zoom with dataZoom.

Time axis

Set the X axis type to time and pass timestamps with each value, so the labels follow the zoom level.

Function plot

Plot a function over 4,000 points on two value axes with minor ticks, panning and zooming both axes with inside dataZoom.

Linked grids

Place two grids one above the other, link their pointers with axisPointer.link and zoom both with one dataZoom.

Two Y axes

Plot flow and rainfall on two Y axes, with rainfall inverse from the top, and shade the flood period with markArea.

Polar line

Set coordinateSystem to polar with a value angle axis to plot a cardioid from radius and angle pairs.

Polar curve

Trace a four-petal rose curve on a polar system with a radius axis that starts at zero and a slower draw animation.

Mark line labels

Set label.position on each markLine to place its label at the start, middle or end, inside or outside the line.

Bump chart

Use an inverse value axis with interval 1 for ranks, smooth thick lines and an endLabel naming each series.

Graphic elements

Add a graphic group to draw shapes and text over the chart, here a rotated stamp and a note box beside the line.

Live data

Push new points from a timer and call setOption with the updated data, so the time axis scrolls as values arrive.

Line race

Set a long animationDuration with an endLabel on each series so the lines draw across the years like a race.

Easing

Set animationEasing on each series to compare every built-in easing curve in its own small grid, then replay the draw.

Touch tooltip

Set triggerOn to none and give the axis pointer a handle, so the tooltip follows a drag rather than a hover.

Click to add points

Listen for clicks on the chart surface and use convertFromPixel to turn each click inside the grid into a new point.

Draggable points

Place invisible draggable graphic circles over each point and update the series data as they move.

Fisheye zoom

Drag a box over the chart to magnify it with axis breaks, which squeeze the data outside the box into the edges.