Using amCharts 5 with React

Use amCharts 5 in React with our @amcharts/amcharts5-react package. It creates and disposes the chart with your component, and works with server rendering.

Installation

npm install @amcharts/amcharts5 @amcharts/amcharts5-react

It needs React 18 or later and amCharts 5.21.4 or later.

A chart written in code

useAmChart() gives your function a new root. Build the chart in it as in any amCharts example, and put the returned ref on an element with a height:

import { useAmChart } from "@amcharts/amcharts5-react";
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

function Chart({ data }) {
  const { ref } = useAmChart((root) => {
    root.setThemes([am5themes_Animated.new(root)]);

    const chart = root.container.children.push(
      am5xy.XYChart.new(root, {
        panY: false,
        layout: root.verticalLayout
      })
    );

    const yAxis = chart.yAxes.push(
      am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererY.new(root, {})
      })
    );

    const xAxis = chart.xAxes.push(
      am5xy.CategoryAxis.new(root, {
        renderer: am5xy.AxisRendererX.new(root, {}),
        categoryField: "category"
      })
    );
    xAxis.data.setAll(data);

    const series = chart.series.push(
      am5xy.ColumnSeries.new(root, {
        name: "Value",
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: "value",
        categoryXField: "category"
      })
    );
    series.data.setAll(data);

    const legend = chart.children.push(am5.Legend.new(root, {}));
    legend.data.setAll(chart.series.values);

    chart.set("cursor", am5xy.XYCursor.new(root, {}));
  }, [data]);

  return <div ref={ref} style={{ width: "100%", height: "500px" }}></div>;
}

export default Chart;

• The chart is made again when a value in the second argument ([data] here) changes. Leave it out to make the chart once.
• The chart is disposed when the component goes away. The double mount of React’s strict mode is handled.
• The element can be rendered later, e.g. after a loading message: the chart is made when it is there.
• useAmChart(setup, deps, { renderer: "svg" }) draws the chart as SVG.
• If your function throws, the error goes to the nearest error boundary.

Updating without making the chart again

useAmChart() also returns root, and result: what your function returned. Keep what you need there and change it when the data changes:

import { useEffect } from "react";
import { useAmChart } from "@amcharts/amcharts5-react";

function Chart({ data }) {
  const { ref, result } = useAmChart((root) => {
    // ... the chart, as above, without setting data
    return { xAxis, series };
  }, []);

  // New data goes to the chart that is there, with an animation
  useEffect(() => {
    if (result) {
      result.xAxis.data.setAll(data);
      result.series.data.setAll(data);
    }
  }, [result, data]);

  return <div ref={ref} style={{ width: "100%", height: "500px" }}></div>;
}

A chart from a JSON config

<AmChart> builds a chart from a JSON config, with no chart code:

import { AmChart } from "@amcharts/amcharts5-react";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

<AmChart
  config={config}
  themes={[am5themes_Animated]}
  style={{ height: "500px" }}
  onReady={({ root, chart }) => { /* the chart is built */ }}
/>

Prop	What it is
config	The chart as a JSON config: an object or a JSON string. A config with different content makes the chart again; the same content written inline on every render does not.
src	A URL to load the config from, used when there is no config.
themes	Theme classes, e.g. [am5themes_Animated], or a class with its settings as a pair: [am5themes_Animated, [am5themes_Adaptive, { baseColor: "#4150a0" }]]. Themes are not part of a config.
resources	Geodata and locales the config names, e.g. { am5geodata_worldLow } for "geoJSON": "am5geodata_worldLow". See below.
renderer	"svg" draws the chart as SVG; the default is canvas.
onReady	Called with { root, chart } when the chart is built.
onError	Called when it could not be built.
id, className, style	For the chart’s element. Without a height, it is 400 pixels high.

It is the library’s <am5-chart> element: a ref on it gives that element.

A map’s config names its geodata ("geoJSON": "am5geodata_worldLow"), and a config may name a locale ("locale": "am5locales_de_DE"), instead of carrying them. With npm imports they are not globals: import the files the config names and give them in resources, under the same names:

import am5geodata_worldLow from "@amcharts/amcharts5-geodata/worldLow";

<AmChart config={mapConfig} resources={{ am5geodata_worldLow }} style={{ height: 400 }} />

Server rendering

Both work in pages rendered on a server: the library is loaded in the browser only. See Next.js and React Router.

License

With a commercial license, call am5.addLicense() once when the app starts, e.g. in main.jsx, before any chart is made. Not in your chart function: a chart decides on the logo when its root is made.

Without the package

To manage the chart yourself, create the root in an effect and dispose it in the effect’s cleanup:

import { useLayoutEffect, useRef } from "react";
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

function Chart({ data }) {
  const chartdiv = useRef(null);

  useLayoutEffect(() => {
    const root = am5.Root.new(chartdiv.current);

    root.setThemes([am5themes_Animated.new(root)]);

    const chart = root.container.children.push(
      am5xy.XYChart.new(root, {})
    );

    // ... axes, series and data, as above

    return () => {
      root.dispose();
    };
  }, [data]);

  return <div ref={chartdiv} style={{ width: "100%", height: "500px" }}></div>;
}

export default Chart;

Examples

Example apps for Vite, Next.js, React Router and Astro are on GitHub.

The sandboxes below create the chart without the package.

Simple chart

» amCharts 5 with React and Vite

Stock chart

» Stock chart with a toolbar, on CodeSandbox