@amcharts/amcharts5-mcp 1.8.0 → 1.9.0

package/extended/getting-started/integrations/jest.md

@@ -1,19 +1,20 @@
 ---
 title: "Using amCharts 5 with Jest"
 source: "https://www.amcharts.com/docs/v5/getting-started/integrations/jest/"
-scraped: "2026-03-15"
+scraped: "2026-10-22"
 ---
 
 This tutorial will show you how to create unit tests for [Jest](https://jestjs.io/).
 
 Jest does not support ES6 modules by default, but you can still use ES6 modules if you use Babel.
 
-# Installation
+## Installation
 
 You must install the following packages in your `package.json`:
 
+```json
 "dependencies": {
-  "@amcharts/amcharts5": "^5.2.17"
+  "@amcharts/amcharts5": "^5.21.0"
 },
 "devDependencies": {
   "@babel/core": "^7.18.10",
@@ -24,35 +25,41 @@ You must install the following packages in your `package.json`:
   "jest": "^28.1.3",
   "canvas": "^2.9.3"
 }
+```
 
 And you must add this `"jest"` configuration to your `package.json`:
 
+```json
 "jest": {
   "testEnvironment": "jsdom",
-  "transformIgnorePatterns": \[
-    "/node\_modules/(?!@amcharts|d3-|internmap)"
-  \]
+  "transformIgnorePatterns": [
+    "/node_modules/(?!@amcharts|d3-|internmap)"
+  ]
 }
+```
 
 Now you must do `npm install` or `yarn install`.
 
 Lastly create a `babel.config.js` file:
 
+```javascript
 module.exports = {
-  presets: \[
-    \['@babel/preset-env', {targets: {node: 'current'}}\],
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
     '@babel/preset-typescript',
-  \],
+  ],
 };
+```
 
-# Writing tests
+## Writing tests
 
 Now that you have everything setup, you can write your unit tests.
 
 Let's say that your chart code is in a `chart.js` file:
 
-import \* as am5 from "@amcharts/amcharts5";
-import \* as am5xy from "@amcharts/amcharts5/xy";
+```typescript
+import * as am5 from "@amcharts/amcharts5";
+import * as am5xy from "@amcharts/amcharts5/xy";
 
 export function makeChart() {
   const root = am5.Root.new("chartdiv");
@@ -68,15 +75,17 @@ export function makeChart() {
 
   return { root, chart };
 }
+```
 
 You can write your unit tests in a `chart.test.js` file, like this:
 
+```typescript
 // Import chart code
 import { makeChart } from "./chart";
 
 beforeEach(() => {
   // Create <div> which is needed by the chart
-  document.body.innerHTML = \`<div id="chartdiv"></div>\`;
+  document.body.innerHTML = `<div id="chartdiv"></div>`;
 });
 
 test("chart exists", () => {
@@ -87,6 +96,20 @@ test("chart exists", () => {
   expect(chart).toBeDefined();
   expect(chart.get("wheelX")).toBe("panX");
 });
+```
+
+## Components that use our framework packages
+
+To test components that use our [framework packages](https://www.amcharts.com/docs/v5/getting-started/integrations/) without drawing their charts, mock the package. For React:
+
+```javascript
+jest.mock("@amcharts/amcharts5-react", () => ({
+  useAmChart: () => ({ ref: () => {}, root: undefined, result: undefined }),
+  AmChart: () => null
+}));
+```
+
+The packages are ES modules too: the `transformIgnorePatterns` above, which matches `@amcharts`, covers them.
 
 ## Example
 

package/extended/getting-started/integrations/next-js.md

@@ -1,33 +1,73 @@
 ---
 title: "Using amCharts 5 with Next.js"
 source: "https://www.amcharts.com/docs/v5/getting-started/integrations/next-js/"
-scraped: "2026-03-15"
+scraped: "2026-10-22"
 ---
 
-Next.js is a React framework, so the code in [our React tutorial](https://www.amcharts.com/docs/v5/getting-started/integrations/react/) will work.
+Next.js is a React framework: use our [`@amcharts/amcharts5-react`](https://www.npmjs.com/package/@amcharts/amcharts5-react) package, as in the [React tutorial](https://www.amcharts.com/docs/v5/getting-started/integrations/react/). It works with the app router and server rendering, and needs nothing in `next.config`.
 
-However, Next.js also uses SSR, which does not work with amCharts. In order to use amCharts with Next.js, [you must add `"use client";`](https://nextjs.org/docs/app/building-your-application/rendering/client-components) at the top of your `Chart.jsx` file:
+```shell
+npm install @amcharts/amcharts5 @amcharts/amcharts5-react
+```
 
+## A chart written in code
+
+`useAmChart()` takes a function, so it goes in a client component, a file that starts with `"use client"`. It is still rendered on the server, where it draws nothing; the library is loaded in the browser only.
+
+```typescript
 "use client";
 
-import { useLayoutEffect } from 'react';
-import \* as am5 from "@amcharts/amcharts5";
-import \* as am5xy from "@amcharts/amcharts5/xy";
-import am5themes\_Animated from "@amcharts/amcharts5/themes/Animated";
+import { useAmChart } from "@amcharts/amcharts5-react";
+import * as am5xy from "@amcharts/amcharts5/xy";
+
+export function Chart({ data }) {
+  const { ref } = useAmChart((root) => {
+    const chart = root.container.children.push(am5xy.XYChart.new(root, {}));
+    // ... axes, series and data
+  }, [data]);
 
-function Chart(props) {
-  ...
+  return <div ref={ref} style={{ height: "500px" }}></div>;
 }
-export default Chart;
+```
+
+## A chart from a JSON config
+
+A server component can render `<AmChart>` with a config itself, because a config is plain data. Theme classes and functions cannot be passed from a server component: for those, use a client component.
+
+```typescript
+import { AmChart } from "@amcharts/amcharts5-react";
+import { Chart } from "./Chart";
+import config from "./chart-config.json";
+
+const data = [
+  { category: "Research", value: 1000 },
+  { category: "Marketing", value: 1200 }
+];
+
+export default function Page() {
+  return (
+    <>
+      <Chart data={data} />
+      <AmChart config={config} style={{ height: "500px" }} />
+    </>
+  );
+}
+```
+
+An [example app](https://github.com/amcharts/amcharts5/tree/master/integrations/react/examples/next) is on GitHub.
+
+## Without the package
 
-## Older versions of NextJS
+The code from the [React tutorial](https://www.amcharts.com/docs/v5/getting-started/integrations/react/#without-the-package) works in a client component: add `"use client";` at the top of the file.
 
-Older versions of NextJS do not have `"use client"`, so instead [you must use `dynamic`](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr) to load the Chart component:
+Older versions of Next.js do not have `"use client"`, so [use `dynamic`](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr) to load the chart component in the browser only:
 
-import dynamic from 'next/dynamic';
+```typescript
+import dynamic from "next/dynamic";
 
-const Chart = dynamic(() => import('./Chart'), { ssr: false });
+const Chart = dynamic(() => import("./Chart"), { ssr: false });
 
 function App() {
   return <Chart />;
 }
+```

package/extended/getting-started/integrations/nuxt.md

@@ -1,15 +1,55 @@
 ---
 title: "Using amCharts 5 with Nuxt 3"
 source: "https://www.amcharts.com/docs/v5/getting-started/integrations/nuxt/"
-scraped: "2026-03-15"
+scraped: "2026-10-22"
 ---
 
-Follow the directions for [installing Nuxt 3](https://v3.nuxtjs.org/getting-started/installation/).
+Nuxt is a Vue framework: use our [`@amcharts/amcharts5-vue`](https://www.npmjs.com/package/@amcharts/amcharts5-vue) package, as in the [Vue.js tutorial](https://www.amcharts.com/docs/v5/getting-started/integrations/vue/). It works with Nuxt's server rendering: there is no need for `<ClientOnly>`, and nothing to set in `nuxt.config.ts`.
 
-Then create a `components/Chart.vue` file which contains the Vue code from our [Vue tutorial](https://www.amcharts.com/docs/v5/getting-started/integrations/vue/).
+Follow the directions for [installing Nuxt](https://nuxt.com/docs/getting-started/installation), then install amCharts:
 
-Lastly, you can use the Chart component like this:
+```shell
+npm install @amcharts/amcharts5 @amcharts/amcharts5-vue
+```
 
+Use the package in any component:
+
+```html
+<script setup>
+import { useTemplateRef } from "vue";
+import { useAmChart, AmChart } from "@amcharts/amcharts5-vue";
+import * as am5xy from "@amcharts/amcharts5/xy";
+
+useAmChart(useTemplateRef("chart"), (root) => {
+  const chart = root.container.children.push(am5xy.XYChart.new(root, {}));
+  // ... axes, series and data
+});
+</script>
+
+<template>
+  <div ref="chart" style="height: 500px"></div>
+  <AmChart :config="config" style="height: 500px" />
+</template>
+```
+
+A license key goes in a client plugin, e.g. `plugins/amcharts.client.ts`:
+
+```typescript
+import * as am5 from "@amcharts/amcharts5";
+
+export default defineNuxtPlugin(() => {
+  am5.addLicense("AM5C-...");
+});
+```
+
+An [example app](https://github.com/amcharts/amcharts5/tree/master/integrations/vue/examples/nuxt) is on GitHub.
+
+## Without the package
+
+To use the code from [the Vue.js tutorial](https://www.amcharts.com/docs/v5/getting-started/integrations/vue/#without-the-package) without the package, render the component in `<ClientOnly>`:
+
+```html
 <ClientOnly>
   <Chart />
 </ClientOnly>
+```

package/extended/getting-started/integrations/react-native.md

@@ -0,0 +1,123 @@
+---
+title: "Using amCharts 5 with React Native"
+source: "https://www.amcharts.com/docs/v5/getting-started/integrations/react-native/"
+scraped: "2026-10-22"
+---
+
+Use amCharts 5 in [React Native](https://reactnative.dev/) with our [`@amcharts/amcharts5-react-native`](https://www.npmjs.com/package/@amcharts/amcharts5-react-native) package. amCharts draws the chart in a WebView, so every chart type, theme and feature works as it does on the web.
+
+## Installation
+
+```shell
+npm install @amcharts/amcharts5-react-native react-native-webview
+```
+
+With Expo, install `react-native-webview` with `npx expo install react-native-webview`. It works in Expo Go.
+
+It needs React Native 0.72 and react-native-webview 13 or later. `@amcharts/amcharts5` does not have to be installed: the WebView loads the library from the amCharts CDN, in the version the package was released with.
+
+## A chart from a JSON config
+
+The simplest way: a [JSON config](https://www.amcharts.com/docs/v5/concepts/serializing/), as an object or a string. The chart types it uses are loaded for it, and so is map geodata named by its global, e.g. `"geoJSON": "am5geodata_worldLow"`.
+
+```typescript
+import { AmChart } from "@amcharts/amcharts5-react-native";
+
+<AmChart config={config} themes={["Animated"]} style={{ height: 300 }} />
+```
+
+## A chart written in code
+
+The code runs in the WebView, so it is a string, written as for script tags: `am5xy` is a global there, not an import. It gets `root`, `data` (the `data` prop) and `post(name, value)`, which calls `onMessage` in the app. The files it uses are loaded for it.
+
+```typescript
+const code = `
+const chart = root.container.children.push(am5xy.XYChart.new(root, {}));
+
+const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
+  categoryField: "country",
+  renderer: am5xy.AxisRendererX.new(root, {})
+}));
+
+const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+
+const series = chart.series.push(am5xy.ColumnSeries.new(root, {
+  xAxis: xAxis,
+  yAxis: yAxis,
+  categoryXField: "country",
+  valueYField: "visits"
+}));
+
+// A tap on a column tells the app which country it is
+series.columns.template.events.on("click", (event) => {
+  post("country", event.target.dataItem.dataContext.country);
+});
+
+xAxis.data.setAll(data);
+series.data.setAll(data);
+
+// New data goes to this function, without making the chart again
+return (newData) => {
+  xAxis.data.setAll(newData);
+  series.data.setAll(newData);
+};
+`;
+
+<AmChart
+  code={code}
+  data={visits}
+  themes={["Animated"]}
+  style={{ height: 300 }}
+  onMessage={(name, value) => console.log(name, value)}
+/>
+```
+
+-   When `data` changes, by content, the function the code returned gets it. Without one, the chart is made again.
+-   A different `code` makes the chart again.
+-   Everything that goes between the app and the chart is JSON. Give dates as timestamps.
+-   Never build `code` from text a user typed or a server sent: pass such values in `data`.
+
+A ref gives `run(code)`, which runs code in the chart's page, with `root`, `chart` (the chart a config made), `result` (what the code returned), `data` and `post`:
+
+```typescript
+const chartView = useRef(null);
+
+<AmChart ref={chartView} config={config} />
+
+// Animate the first series of the chart again
+chartView.current.run("chart.series.getIndex(0).appear(1000)");
+```
+
+## Props
+
+| Prop | What it is |
+| --- | --- |
+| `config` | The chart as a JSON config: an object or a JSON string. |
+| `code` | The chart as code, used when there is no `config`. |
+| `data` | Data for `code`, as `data`. It must be JSON. |
+| `themes` | Theme names, e.g. `["Animated", "Dark"]`. |
+| `renderer` | `"svg"` draws the chart as SVG; the default is canvas. |
+| `licenses` | amCharts license keys, which remove the logo. |
+| `modules` | More script files to load, e.g. `"locales/de_DE"` for a locale named only in a config, or full URLs. |
+| `libraryUrl` | Where the library's script files are. The default is the amCharts CDN. |
+| `geodataUrl` | Where the geodata files are. |
+| `onReady` | Called when the chart is built. |
+| `onError` | Called with a message when the chart could not be built or its code failed. Without it, the message goes to `console.warn`. |
+| `onMessage` | Called with `(name, value)` when the chart's code calls `post`. |
+| `style` | For the view the chart is in. Give it a height, or `flex: 1`; without one it is 400 high. |
+| `webViewProps` | Props for the WebView, except the ones the chart needs for itself. |
+
+## License
+
+With a commercial license, give its keys in `licenses`, on each chart. Calling `am5.addLicense()` in `code` would be too late: a chart decides on the logo when its root is made.
+
+## Good to know
+
+-   Each chart is a WebView. A screen with many charts uses more memory, and a chart takes a moment to appear.
+-   The device needs a connection the first time, to load the library from the CDN; after that the WebView caches it. `libraryUrl` can point to your own copy of the library's script files.
+-   Links in the chart, such as the amCharts logo, open in the browser.
+-   If the system ends the WebView's process, the chart is made again.
+
+An [example app](https://github.com/amcharts/amcharts5/tree/master/integrations/react-native/examples/expo) for Expo is on GitHub.