amCharts in your framework Official components for React, Vue, Angular, Svelte and React Native
Add a chart from a JSON config, or write it in code. The components make and dispose the chart with yours, and work with server rendering. Free to use, even in commercial projects.
import { AmChart } from "@amcharts/amcharts5-react";
import config from "./chart.json";
export default function Visits() {
return <AmChart config={config} style={{ height: 400 }} />;
}<script setup>
import { AmChart } from "@amcharts/amcharts5-vue";
import config from "./chart.json";
</script>
<template>
<AmChart :config="config" style="height: 400px" />
</template>import { Component } from "@angular/core";
import { AmChartComponent } from "@amcharts/amcharts5-angular";
import config from "./chart.json";
@Component({
imports: [AmChartComponent],
template: `<am5-chart [config]="config"></am5-chart>`
})
export class VisitsComponent { config = config; }<script>
import { attachAmChartConfig } from "@amcharts/amcharts5-svelte";
import config from "./chart.json";
</script>
<am5-chart
{@attach attachAmChartConfig({ config })}
style="height: 400px"></am5-chart>import { AmChart } from "@amcharts/amcharts5-react-native";
import config from "./chart.json";
export default function Visits() {
return <AmChart config={config} style={{ height: 300 }} />;
}<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/plugins/json.js"></script>
<script src="https://cdn.amcharts.com/lib/5/element.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<am5-chart src="chart.json" style="height: 400px"></am5-chart>Two ways to add a chart.
Every package does both, with the same library underneath.
From a JSON config
Design the chart in Chart Maker, or take the JSON tab of any demo, and pass it to the component. No chart code: the chart types it uses load by themselves.
In code
A hook, composable, directive or attachment gives you a root: build any chart in it, as in our demos, with the full API and TypeScript types. New data updates the chart without making it again.
const { ref } = useAmChart((root) => {
// build the chart, as in any amCharts demo
}, [data]);Fits the way you build.
Server rendering
Next.js, Nuxt, SvelteKit, Angular SSR and React Router render the page on the server; the library loads only in the browser.
No cleanup code
The chart is made with your component and disposed with it, in React's strict mode too. In Angular, its animation frames stay out of change detection.
Mobile apps
React Native and Expo, Expo Go included. The library draws the chart itself, so every chart type, theme and feature works as on the web.
No framework at all
The <am5-chart> element builds a chart from a JSON file in any HTML page, CMS or static site: a few script tags and one element.
Canvas or SVG
Charts draw on Canvas by default. One setting, renderer "svg", draws the same chart as live SVG instead.
Ready for tests
Guides for Jest and Cypress, and a sample mock of the package for unit tests, which have no canvas to draw on.