Series types

You can add a series to your chart using the generic Series component or a dedicated component like ColumnSeries.

Dedicated series

Each series type has its own dedicated component (see available dedicated series components):

import { Chart } from "@highcharts/react";
import { ColumnSeries } from "@highcharts/react/series/Column";
export default function ColumnChart() {
  return (
    <Chart>
      <ColumnSeries data={[1, 2, 3]} />
    </Chart>
  );
}

Note: Dedicated series components bundle any required modules automatically — no extra imports needed.

Dedicated series options

Each dedicated series component accepts all options available for its corresponding series type — for example, LineSeries supports all series.line options.

You can provide the most common options as direct props, and all of them via the options prop:

// Via direct props
<LineSeries
  data={[1, 2, 3]}
  name="Line series"
  color="red"
/>
// Via options prop
<LineSeries
  data={[1, 2, 3]}
  options={{
    name: "Line series",
    color: "red"
  }}
/>

Props

PropTypeDefaultDescription
dataarray-Data points for the series. Format depends on the series type (see series.line.data).
namestring-The name of the series as shown in the legend, tooltip etc. (see series.line.name).
idstring-The id of the series (see series.line.id).
classNamestring-The className of the series (see series.line.className).
colorstring-The main color of the series (see series.line.color).
indexnumber-The index of the series (see series.line.index).
eventsobject-The events of the series (see series.line.events).
optionsobject-Configuration options for the series. Available options depend on type (see series.line).

Generic series

The Series component supports any series type available in the Highcharts bundle.

import { Chart, Series } from "@highcharts/react";
export default function ColumnChart() {
  return (
    <Chart>
      <Series type="column" data={[1, 2, 3]} />
    </Chart>
  );
}

When using the Series component, some series types require you to import an additional module:

import { Chart, Series } from "@highcharts/react";
import "highcharts/es-modules/masters/modules/venn.src.js";
export default function VennChart() {
  return (
    <Chart>
      <Series
        type="venn"
        data={[
          {
            sets: ["A"],
            value: 2,
          },
          {
            sets: ["B"],
            value: 2,
          },
          {
            sets: ["A", "B"],
            value: 1,
          },
        ]}
      />
    </Chart>
  );
}

Note: You should import additional modules using their ESM versions. See the Bundling and tree shaking documentation.

To determine which module is needed, refer to the Requires section under each series.

Props

The generic Series component accepts the same props as dedicated components, with the addition of type:

PropTypeDefaultDescription
typestringlineThe series type to render. See all available series types.

Other chart types

Each chart type has its own generic series component:

Chart componentSeries componentImport path
StockChartStockSeries@highcharts/react/Stock
MapsChartMapsSeries@highcharts/react/Maps
GanttChartGanttSeries@highcharts/react/Gantt

When to use generic series

We recommend using dedicated series components in most cases to keep your code lean. Reserve the generic Series component for situations where dedicated components become impractical — for example, when adding series dynamically.

Dedicated series components support the same props as Series, except for type.

Available dedicated series components

Series TypeComponentProduct
arcdiagram<ArcDiagram />Highcharts Core
area<Area />Highcharts Core
arearange<AreaRange />Highcharts Core
areaspline<AreaSpline />Highcharts Core
areasplinerange<AreaSplineRange />Highcharts Core
bar<Bar />Highcharts Core
bellcurve<Bellcurve />Highcharts Core
boxplot<BoxPlot />Highcharts Core
bubble<Bubble />Highcharts Core
bullet<Bullet />Highcharts Core
column<Column />Highcharts Core
columnpyramid<ColumnPyramid />Highcharts Core
columnrange<ColumnRange />Highcharts Core
cylinder<Cylinder />Highcharts Core
dependencywheel<DependencyWheel />Highcharts Core
dumbbell<Dumbbell />Highcharts Core
errorbar<ErrorBar />Highcharts Core
funnel<Funnel />Highcharts Core
funnel3d<Funnel3D />Highcharts Core
gauge<Gauge />Highcharts Core
heatmap<Heatmap />Highcharts Core
histogram<Histogram />Highcharts Core
item<Item />Highcharts Core
line<Line />Highcharts Core
lollipop<Lollipop />Highcharts Core
networkgraph<Networkgraph />Highcharts Core
organization<Organization />Highcharts Core
packedbubble<PackedBubble />Highcharts Core
pareto<Pareto />Highcharts Core
pictorial<Pictorial />Highcharts Core
pie<Pie />Highcharts Core
polygon<Polygon />Highcharts Core
pyramid<Pyramid />Highcharts Core
pyramid3d<Pyramid3D />Highcharts Core
sankey<Sankey />Highcharts Core
scatter<Scatter />Highcharts Core
scatter3d<Scatter3D />Highcharts Core
solidgauge<SolidGauge />Highcharts Core
spline<Spline />Highcharts Core
streamgraph<Streamgraph />Highcharts Core
sunburst<Sunburst />Highcharts Core
timeline<Timeline />Highcharts Core
treegraph<Treegraph />Highcharts Core
treemap<Treemap />Highcharts Core
variablepie<VariablePie />Highcharts Core
variwide<Variwide />Highcharts Core
vector<Vector />Highcharts Core
venn<Venn />Highcharts Core
waterfall<Waterfall />Highcharts Core
windbarb<Windbarb />Highcharts Core
wordcloud<Wordcloud />Highcharts Core
candlestick<Candlestick />Highcharts Stock
flags<Flags />Highcharts Stock
heikinashi<HeikinAshi />Highcharts Stock
hlc<HLC />Highcharts Stock
hollowcandlestick<HollowCandlestick />Highcharts Stock
ohlc<OHLC />Highcharts Stock
pointandfigure<PointAndFigure />Highcharts Stock
renko<Renko />Highcharts Stock
flowmap<FlowMap />Highcharts Maps
geoheatmap<GeoHeatmap />Highcharts Maps
map<Map />Highcharts Maps
mapbubble<MapBubble />Highcharts Maps
mapline<MapLine />Highcharts Maps
mappoint<MapPoint />Highcharts Maps
tiledwebmap<TiledWebMap />Highcharts Maps
tilemap<Tilemap />Highcharts Maps
gantt<Gantt />Highcharts Gantt
xrange<XRange />Highcharts Gantt
Edit this page