series

Configuration Structure

series: [{
name: string,
type: string,
color: string,
group: string,
hidden: boolean,
zIndex: number,
parsing: ApexParsing,
x: string,
y: string | string[],
z: string,
facet: string | number,
data: Array,
}]

series

The data to display in the chart. The format depends on the chart type.

For axis charts (line, area, bar, scatter, heatmap, etc.), series is an array of objects:

series: [{
  name: 'Series 1',
  data: [30, 40, 35, 50, 49, 60, 70]
}, {
  name: 'Series 2',
  data: [23, 12, 54, 61, 32, 56, 81]
}]

Each series object can have the following properties:

  • name: The name of the series (shown in legend and tooltips)
  • data: Array of data points. Can be numbers, [x, y] pairs, or objects { x, y }
  • type: Override chart type for this series (in combo charts)
  • color: Override color for this series
  • group: Group name for grouped bar charts
  • facet: Which trellis panel this series belongs to

For non-axis charts (pie, donut, radialBar, polarArea), series is a simple number array:

series: [44, 55, 13, 43, 22]

Paired data format for scatter/bubble:

series: [{
  name: 'Series 1',
  data: [
    [16.4, 5.4],
    [21.7, 2],
    [25.4, 3],
  ]
}]

Timeline / RangeBar data format:

series: [{
  data: [{
    x: 'Design',
    y: [
      new Date('2019-03-05').getTime(),
      new Date('2019-03-08').getTime()
    ]
  }]
}]

Waterfall data format. One series of signed deltas. A row flagged isSubtotal or isTotal carries no y: it draws the running total, which ApexCharts measures for you. See the waterfall guide.

series: [{
  name: 'Operating income',
  data: [
    { x: 'Net revenue', y: 8786000 },
    { x: 'Cost of sales', y: -2786000 },
    { x: 'Gross profit', isSubtotal: true },
    { x: 'Operating income', isTotal: true }
  ]
}]

Dumbbell data format. One series per measure, each carrying one value per category. ApexCharts joins them on x, so you never zip them into [low, high] pairs yourself. See the dumbbell guide.

series: [
  { name: '2020', data: [{ x: 'Backend', y: 92 }, { x: 'Mobile', y: 88 }] },
  { name: '2025', data: [{ x: 'Backend', y: 137 }, { x: 'Mobile', y: 121 }] }
]

Raw-observation data format. Histogram, violin, box plot and raincloud accept the unaggregated sample and derive the statistics themselves. Histogram takes a flat array; the rest take one datum per group with the observations in points.

series: [{
  name: 'Weight gain',
  data: [
    { x: 'DD', points: [97, 101, 88, 94, 110] },
    { x: 'DR', points: [84, 79, 91, 80, 76] }
  ]
}]

Streamgraph data format. Ordinary { x, y } series, one per band. ApexCharts computes the baseline and the stacking offsets, so the values you supply are the band thicknesses. See the streamgraph guide.