Common chart types

Line, bar and pie as the baseline, the wider family of series types, and the per-series options that change how data reads.

Line, bar and pie

chart.setOption({
  tooltip: { trigger: 'axis' },
  legend: { bottom: 0 },
  xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yAxis: { type: 'value' },
  series: [
    { name: 'Revenue', type: 'bar', data: [120, 200, 150, 80], barMaxWidth: 32 },
    { name: 'Target', type: 'line', data: [110, 180, 170, 120], smooth: true },
    { name: 'Mix', type: 'pie', radius: ['45%', '70%'], center: ['82%', '38%'],
      data: [
        { value: 1048, name: 'Direct' },
        { value: 735, name: 'Search' },
        { value: 580, name: 'Referral' }
      ] }
  ]
});

type	Best for	Watch out for
`line`	Trends over a continuous or ordered axis	`boundaryGap: false` for true time axes; `stack` hides individual magnitudes
`bar`	Comparing categories; stacked composition	Long category names need a wider `grid.left` or rotated labels
`pie`	A single part-to-whole snapshot	Fails past about seven slices; use `radius` for a doughnut
`scatter`	Correlation between two measures	Overplotting — reduce symbol size or enable `large`
`effectScatter`	Highlighting a few points	Animated ripple on every point is distracting
`radar`	Multi-metric profiles per entity	Needs `radar.indicator` to define the axes first
`gauge`	A single KPI against a range	One value per gauge; do not stack many
`heatmap`	Two categorical axes plus intensity	Almost always needs a `visualMap`
`treemap` / `sunburst`	Hierarchies by size	Labels disappear fast as depth grows
`sankey` / `graph`	Flows and relationships	Layout is force-directed by default — pin nodes for stable output
`candlestick` / `boxplot`	Financial and distributional summaries	Requires four or five values per data item

Beyond the basics

// scatter with an intensity legend
chart.setOption({
  xAxis: {},
  yAxis: {},
  visualMap: {
    min: 0, max: 100, dimension: 2, calculable: true,
    inRange: { color: ['#bfdbfe', '#1d4ed8'] }
  },
  series: [{
    type: 'scatter',
    symbolSize: (data) => Math.sqrt(data[2]) * 2,
    data: [[10, 8, 20], [15, 20, 55], [22, 14, 90]]
  }]
});

visualMap maps a data dimension to colour or size — the standard way to add a third variable.
symbolSize accepts a function, so marker size can encode value without a separate legend.
A series array can mix types freely, but mixed xAxisIndex values let you overlay independent scales.

Per-series options that matter

Option	Effect
`stack: 'total'`	Accumulates series sharing the same stack name
`smooth: true`	Curved line — attractive, but it invents values between points
`areaStyle: {}`	Fills under a line; only meaningful for the bottom series when stacked
`step: 'start'`	Step line for state that changes at discrete moments
`barGap` / `barCategoryGap`	Spacing between bars in a group and between groups
`label: { show: true }`	Draws values on the marks; turn it off when series are dense
`emphasis: { focus: 'series' }`	Dims other series on hover
`yAxisIndex`	Pins a series to a second value axis
`large: true`	Enables the optimised path for very large scatter/line data

series: [
  { name: 'Direct', type: 'bar', stack: 'traffic', data: [320, 302, 301] },
  { name: 'Search', type: 'bar', stack: 'traffic', data: [120, 132, 101] },
  { name: 'Rate', type: 'line', yAxisIndex: 1, smooth: true,
    data: [0.12, 0.16, 0.14], label: { show: true, formatter: '{c}' } },
  {
    name: 'Orders',
    type: 'bar',
    barGap: '10%',
    barCategoryGap: '30%',
    emphasis: { focus: 'series' },
    data: [90, 110, 95]
  }
]

⚠️

Two y-axes are easy to draw and easy to mislead with: the crossover point of the two lines depends entirely on the ranges you chose. If the comparison matters, index both series to the same base instead.

FAQ

How do I get a second y-axis?

Declare yAxis as an array of two objects and set yAxisIndex: 1 on the series that belongs to the right-hand axis.

Why does my pie chart cut off slices?

The default radius is a percentage of the smaller container dimension, and a legend or title can overlap it. Set an explicit radius with center, and give the plot a wider grid or move the legend to the bottom.

Option configuration Interaction, resize and data updates

Last refreshed 2026-09-18.

Common chart types

Line, bar and pie

Beyond the basics

Per-series options that matter

FAQ

Related