amCharts 5

https://github.com/amcharts/amcharts5
Admin
amCharts 5 is a powerful and advanced data visualization library for creating interactive charts and...
Tokens:262,882
Snippets:1,750
Trust Score:7.1
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install and run the Angular example

Source: https://github.com/amcharts/amcharts5/blob/master/integrations/angular/examples/angular/README.md

Install dependencies and start the development server. Run `npm run build` and then `npm start` to serve the server-rendered build.

```bash
npm install
npm run dev
```

--------------------------------

### Install dependencies with yarn

Source: https://github.com/amcharts/amcharts5/blob/master/README.md

Run this command in the repository root to install dependencies. Yarn installs the exact versions in yarn.lock; npm works but does not guarantee exact versions.

```bash
yarn install
```

--------------------------------

### DataProcessor example with imports and data

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/data-processor.md

Complete example showing how to set up a DataProcessor with sample data and process it.

```typescript
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";

const root = am5.Root.new(document.getElementById("chartdiv")!);

const raw_data = [
  { date: "2024-01-01", value: 1234 },
  { date: "2024-01-02", value: 5678 },
  { date: "2024-01-03", value: 9012 }
];

const processor = am5.DataProcessor.new(root, {
  dateFields: ["date"],
  numericFields: ["value"]
});

const processedData = processor.process(raw_data);
// Now dates are parsed as Date objects, values as numbers
```

--------------------------------

### Install and start Expo project

Source: https://github.com/amcharts/amcharts5/blob/master/integrations/react-native/examples/expo/README.md

Run these commands in the project directory to install dependencies and start the Expo development server. Then open the app in Expo Go on a phone.

```bash
npm install
npx expo start
```

--------------------------------

### Complete example with event listeners and disposal

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/events-disposers.md

Full example creating a rectangle, attaching click, pointerover, pointerout, and once listeners, disabling/enabling events, checking enabled state, and disposing a listener.

```typescript
import * as am5 from "@amcharts/amcharts5";

const root = am5.Root.new(document.getElementById("chartdiv")!);

const rect = am5.Rectangle.new(root, {
  width: 100,
  height: 100,
  fill: am5.color(0xff0000)
});

root.container.children.push(rect);

// Listen to click
const clickDisposer = rect.on("click", (event) => {
  console.log("Rectangle clicked!");
});

// Listen to pointer enter/exit
rect.on("pointerover", (event) => {
  rect.animate({
    key: "opacity",
    to: 0.5,
    duration: 200
  });
});

rect.on("pointerout", (event) => {
  rect.animate({
    key: "opacity",
    to: 1,
    duration: 200
  });
});

// Listen once (fires only once)
rect.once("dblclick", (event) => {
  console.log("Double-clicked (this message shows only once)");
});

// Disable click events temporarily
rect.events.disable("click");

// Re-enable
rect.events.enable("click");

// Check if enabled
if (rect.events.isEnabled("click")) {
  console.log("Click events are active");
}

// Remove listener
clickDisposer.dispose();
```

--------------------------------

### Template usage example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/types.md

Shows how to use a Template to set multiple settings at once on a template object, such as axis columns. The example sets strokeOpacity, fill, and interactiveChildren.

```typescript
const template = root.xAxis.columns.template;
template.setAll({
  strokeOpacity: 0,
  fill: am5.color(0xffffff),
  interactiveChildren: false
});
```

--------------------------------

### Build commands for amCharts 5

Source: https://github.com/amcharts/amcharts5/blob/master/CONTRIBUTING.md

Commands to install dependencies and build the library, script files, and examples. Run yarn build:script before yarn examples because the examples need the script files.

```bash
yarn install
yarn build           # ES modules, into dist/es2015
yarn build:script    # script files, into dist/script
yarn examples        # the examples, into both; needs build:script first
```

--------------------------------

### am5.utils usage example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/utilities.md

Example of using am5.utils.padString, toFixed, capitalize, and isPercent functions.

```typescript
import * as am5 from "@amcharts/amcharts5";

// Pad string
const padded = am5.utils.padString("5", 3, "0");  // "005"

// Format number to fixed decimals
const fixed = am5.utils.toFixed(3.14159, 2);  // "3.14"

// Capitalize
const capitalized = am5.utils.capitalize("hello");  // "Hello"

// Check if value is percent
if (am5.utils.isPercent(value)) {
  console.log(value.percent);
}
```

--------------------------------

### am5.net usage example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/utilities.md

Example of using am5.net.load to fetch JSON and CSV data, and am5.net.getQueryParameter to read a query parameter from the URL.

```typescript
import * as am5 from "@amcharts/amcharts5";

// Load JSON data
am5.net.load("data.json", "json").then(data => {
  chart.series.getIndex(0)!.data.setAll(data);
});

// Load CSV data
am5.net.load("data.csv", "text").then(csv => {
  const data = am5.CSVParser.parse(csv, { useColumnNames: true });
  chart.series.getIndex(0)!.data.setAll(data);
});

// Get query parameter from URL
const chartType = am5.net.getQueryParameter("type");  // ?type=pie
```

--------------------------------

### Core stock chart setup with panels, series, and toolbar

Source: https://github.com/amcharts/amcharts5/blob/master/packages/library/docs/references/stock.md

Complete setup for a stock chart: creates a StockChart, main panel, axes, candlestick series, legend, cursor, scrollbar, and optional toolbar. The stockSeries must be set to the main series for indicators to work. Data is set last.

```js
const root = am5.Root.new("chartdiv");
root.setThemes([am5themes_Animated.new(root)]);

// 1. Stock chart (wrapper)
const stockChart = root.container.children.push(
  am5stock.StockChart.new(root, {})
);

// 2. Main panel (is an XYChart)
const mainPanel = stockChart.panels.push(
  am5stock.StockPanel.new(root, {
    wheelY: "zoomX",
    panX: true,
    panY: true
  })
);

// 3. Axes on the panel
const dateAxis = mainPanel.xAxes.push(am5xy.DateAxis.new(root, {
  baseInterval: { timeUnit: "day", count: 1 },
  renderer: am5xy.AxisRendererX.new(root, {}),
  tooltip: am5.Tooltip.new(root, {})
}));

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

// 4. Main series (candlestick)
const valueSeries = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
  name: "STCK",
  xAxis: dateAxis,
  yAxis: valueAxis,
  valueXField: "Date",
  valueYField: "Close",
  highValueYField: "High",
  lowValueYField: "Low",
  openValueYField: "Open",
  calculateAggregates: true,
  legendValueText: "{valueY}"
}));

// 5. Register as main stock series (CRITICAL)
stockChart.set("stockSeries", valueSeries);

// 6. Stock legend
const legend = mainPanel.plotContainer.children.push(
  am5stock.StockLegend.new(root, { stockChart: stockChart })
);

// 7. Cursor
mainPanel.set("cursor", am5xy.XYCursor.new(root, {
  yAxis: valueAxis,
  xAxis: dateAxis,
  behavior: "none",
  snapToSeries: [valueSeries]
}));

// 8. Scrollbar with preview series
const scrollbar = mainPanel.set("scrollbarX",
  am5xy.XYChartScrollbar.new(root, {
    orientation: "horizontal",
    height: 50
  })
);

var sbDateAxis = scrollbar.chart.xAxes.push(am5xy.DateAxis.new(root, {
  baseInterval: { timeUnit: "day", count: 1 },
  renderer: am5xy.AxisRendererX.new(root, {})
}));
var sbValueAxis = scrollbar.chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));
var sbSeries = scrollbar.chart.series.push(am5xy.LineSeries.new(root, {
  xAxis: sbDateAxis,
  yAxis: sbValueAxis,
  valueYField: "Close",
  valueXField: "Date"
}));

// 9. Data — LAST
valueSeries.data.setAll(data);
sbSeries.data.setAll(data);

// 10. Toolbar (optional)
const toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.IndicatorControl.new(root, { stockChart: stockChart }),
    am5stock.DrawingControl.new(root, { stockChart: stockChart }),
    am5stock.PeriodSelector.new(root, {
      stockChart: stockChart,
      periods: [
        { timeUnit: "day", count: 1, name: "1D" },
        { timeUnit: "month", count: 1, name: "1M" },
        { timeUnit: "month", count: 3, name: "3M" },
        { timeUnit: "year", count: 1, name: "1Y" },
        { timeUnit: "max", name: "Max" }
      ]
    }),
    am5stock.SeriesTypeControl.new(root, { stockChart: stockChart }),
    am5stock.SettingsControl.new(root, { stockChart: stockChart }),
    am5stock.ResetControl.new(root, { stockChart: stockChart })
  ]
});
```

--------------------------------

### Loop Animations Example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/animations.md

Demonstrates looping animations. The first example loops 3 times, and the second uses infinite loops with reverse for a pendulum effect.

```typescript
// Loop 3 times
sprite.animate({
  key: "rotation",
  to: 360,
  duration: 2000,
  loops: 3
});

// Loop with reverse (pendulum effect)
sprite.animate({
  key: "x",
  to: 100,
  duration: 1000,
  loops: Infinity,
  reverse: true
});
```

--------------------------------

### Easing Functions Example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/animations.md

Shows how to apply different easing functions to animations. The example includes fast deceleration with cubicOut, a bouncy effect with elasticOut, and multiple bounces with bounceOut.

```typescript
// Fast deceleration
sprite.animate({
  key: "x",
  to: 500,
  duration: 800,
  easing: am5.ease.cubicOut
});

// Bouncy effect
circle.animate({
  key: "scale",
  to: 1.2,
  duration: 600,
  easing: am5.ease.elasticOut
});

// Multiple bounces
ball.animate({
  key: "y",
  to: 300,
  duration: 1000,
  easing: am5.ease.bounceOut
});
```

--------------------------------

### Complete graphics example with hover animation

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/graphics.md

Full example creating a rectangle with fill, stroke, and shadow, then adding hover animations that animate fillOpacity on pointerover and pointerout.

```typescript
import * as am5 from "@amcharts/amcharts5";

const root = am5.Root.new(document.getElementById("chartdiv")!);

// Create a rectangle
const rect = am5.Rectangle.new(root, {
  x: 50,
  y: 50,
  width: 200,
  height: 100,
  fill: am5.color(0x0066cc),
  stroke: am5.color(0x000000),
  strokeWidth: 2,
  shadowColor: am5.color(0x000000),
  shadowOpacity: 0.3,
  shadowOffsetX: 2,
  shadowOffsetY: 2,
  shadowBlur: 4
});

root.container.children.push(rect);

// Add hover effect
rect.on("pointerover", (event) => {
  event.target.animate({
    key: "fillOpacity",
    to: 0.7,
    duration: 200
  });
});

rect.on("pointerout", (event) => {
  event.target.animate({
    key: "fillOpacity",
    to: 1,
    duration: 200
  });
});
```

--------------------------------

### Disposer usage example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/events-disposers.md

Shows how to create a Disposer with a callback and invoke dispose() to trigger the cleanup callback.

```typescript
const disposer = new am5.Disposer(() => {
  console.log("Cleaning up...");
});

// Later, when cleanup is needed
disposer.dispose();  // "Cleaning up..." is logged
```

--------------------------------

### TextFormatter usage example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/formatters.md

Shows how to use TextFormatter to format text with placeholders and inline formatting tags.

```typescript
const formatter = am5.TextFormatter.new(root, {});

const text = formatter.format("[bold]{name}[/bold]: {value}", {
  name: "Revenue",
  value: "1234567"
});
// Output: Bold "Revenue" followed by ": 1234567"
```

--------------------------------

### v4 to v5 migration: am4core.create vs am5.Root.new

Source: https://github.com/amcharts/amcharts5/blob/master/packages/library/docs/index.md

Replace am4core.create with am5.Root.new and am5xy.XYChart.new.

```javascript
am4core.create("div", am4charts.XYChart)
```

```javascript
am5.Root.new("div") + am5xy.XYChart.new(root, {})
```

--------------------------------

### am5.time.getStartOfDay

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/utilities.md

Returns a Date object representing the start of the day (midnight) for the given date. Optionally, the UTC flag can be used to get the start of the day in UTC.

```APIDOC
## [FUNCTION] getStartOfDay

### Description
Returns a Date object representing the start of the day (midnight) for the given date. Optionally, the UTC flag can be used to get the start of the day in UTC.

### Method
Function

### Signature
`getStartOfDay(date: Date, utc?: boolean): Date`

### Parameters
- **date** (Date) - Required - The date to get the start of day for.
- **utc** (boolean) - Optional - If true, returns the start of day in UTC. Defaults to false.

### Returns
- **Date** - The start of the day.

### Example
```typescript
const startOfDay = am5.time.getStartOfDay(new Date());
```
```

--------------------------------

### am5.Container.new

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/configuration.md

Creates a new Container instance with configurable settings for padding, layout, background, and scrolling.

```APIDOC
## am5.Container.new

### Description
Creates a new Container instance with configurable settings for padding, layout, background, and scrolling.

### Method
Constructor

### Parameters
#### Settings
- **paddingLeft** (number) - Optional - Left padding in pixels. Default: 0
- **paddingRight** (number) - Optional - Right padding in pixels. Default: 0
- **paddingTop** (number) - Optional - Top padding in pixels. Default: 0
- **paddingBottom** (number) - Optional - Bottom padding in pixels. Default: 0
- **background** (Graphics) - Optional - Background element
- **layout** (Layout) - Optional - Layout algorithm
- **mask** (Graphics) - Optional - Clipping region
- **maskContent** (boolean) - Optional - Clip content to bounds. Default: false
- **interactiveChildren** (boolean) - Optional - Children are interactive. Default: true
- **setStateOnChildren** (boolean) - Optional - Apply state to children. Default: false
- **verticalScrollbar** (Scrollbar) - Optional - Vertical scrollbar
- **horizontalScrollbar** (Scrollbar) - Optional - Horizontal scrollbar
- **reverseOrder** (boolean) - Optional - Reverse child order. Default: false

### Request Example
```typescript
const container = am5.Container.new(root, {
  width: am5.percent(100),
  height: am5.percent(100),
  paddingLeft: 20,
  paddingRight: 20,
  paddingTop: 20,
  paddingBottom: 20,
  layout: am5.HorizontalLayout.new(root, {})
});
```
```

--------------------------------

### Percent usage examples

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/types.md

Shows how to create Percent instances using constructors, helpers, and shortcut constants, and apply them to values.

```typescript
// Create explicitly
const half = new am5.Percent(50);

// Use helper function
const quarter = am5.percent(25);

// Use shortcut constants
const full = am5.p100;
const empty = am5.p0;
const middle = am5.p50;

// Apply to values
console.log(256 * half.value);  // 128
console.log(half.interpolate(100, 200));  // 150
```

--------------------------------

### am5.time usage example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/utilities.md

Example usage of the am5.time module: generating dates at intervals, adding time, getting day of week and week number, and retrieving start/end of day.

```typescript
import * as am5 from "@amcharts/amcharts5";

// Generate dates at intervals
const dates = am5.time.getDates(new Date(), 1, "day", 7);  // Next 7 days

// Add time
const future = am5.time.add(new Date(), "month", 3);  // 3 months from now

// Get day of week (0 = Sunday, 6 = Saturday)
const dow = am5.time.getDayOfWeek(new Date());

// Get week number (0-52)
const week = am5.time.getWeek(new Date());

// Start/end of day
const startOfDay = am5.time.getStartOfDay(new Date());
const endOfDay = am5.time.getEndOfDay(new Date());
```

--------------------------------

### World choropleth map example

Source: https://github.com/amcharts/amcharts5/blob/master/packages/library/docs/references/map.md

Complete HTML example of a world choropleth map using amCharts 5. Includes map setup, polygon series with heat rules, sample population data, heat legend, zoom control, and appear animation.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>World Choropleth Map</title>
  <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/map.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
  <style>#chartdiv { width: 100%; height: 500px; }</style>
</head>
<body>
  <div id="chartdiv"></div>
  <script>
    var root = am5.Root.new("chartdiv");
    root.setThemes([am5themes_Animated.new(root)]);

    var chart = root.container.children.push(am5map.MapChart.new(root, {
      panX: "rotateX",
      panY: "translateY",
      projection: am5map.geoNaturalEarth1()
    }));

    var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
      geoJSON: am5geodata_worldLow,
      valueField: "value",
      calculateAggregates: true
    }));

    polygonSeries.mapPolygons.template.setAll({
      tooltipText: "{name}: {value}",
      interactive: true
    });

    polygonSeries.mapPolygons.template.states.create("hover", {
      fill: am5.color(0x677935)
    });

    // Heat rules for choropleth coloring
    polygonSeries.set("heatRules", [{
      target: polygonSeries.mapPolygons.template,
      dataField: "value",
      min: am5.color(0xcee8c0),
      max: am5.color(0x1d6e04),
      key: "fill"
    }]);

    // Sample data — population in millions
    polygonSeries.data.setAll([
      { id: "US", value: 331 }, { id: "CN", value: 1411 },
      { id: "IN", value: 1380 }, { id: "BR", value: 213 },
      { id: "RU", value: 146 }, { id: "JP", value: 126 },
      { id: "DE", value: 83 }, { id: "GB", value: 67 },
      { id: "FR", value: 67 }, { id: "AU", value: 26 }
    ]);

    // Heat legend
    var heatLegend = chart.children.push(am5.HeatLegend.new(root, {
      orientation: "horizontal",
      startColor: am5.color(0xcee8c0),
      endColor: am5.color(0x1d6e04),
      startText: "Low",
      endText: "High",
      stepCount: 5
    }));

    chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
    chart.appear(1000, 100);
  </script>
</body>
</html>
```

--------------------------------

### am5.Tooltip.new()

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/configuration.md

Creates a new Tooltip instance with the given settings. This is a static factory method on the Tooltip class.

```APIDOC
## am5.Tooltip.new()

### Description
Creates a new Tooltip instance with the given settings. This is a static factory method on the Tooltip class.

### Method
`am5.Tooltip.new(root, settings)`

### Parameters
- **root** (Root) - Required - The root object
- **settings** (object) - Required - Tooltip settings

#### Settings Object
- **labelText** (string) - Optional - Tooltip text/template (default: "")
- **pointerOrientation** (string) - Optional - Pointer direction (default: "vertical")
- **background** (Graphics) - Optional - Background element
- **fontSize** (number) - Optional - Text size (default: 12)
- **fill** (Color) - Optional - Text color

### Usage
```typescript
const tooltip = am5.Tooltip.new(root, {
  labelText: "{value}",
  pointerOrientation: "vertical",
  background: am5.Rectangle.new(root, {
    fill: am5.color(0x000000),
    fillOpacity: 0.8
  })
});
```

```

--------------------------------

### Sankey diagram example

Source: https://github.com/amcharts/amcharts5/blob/master/packages/library/docs/references/flow.md

Complete HTML page that creates a Sankey diagram using amCharts 5 flow module. Includes CDN scripts, chart setup, styling, and data.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sankey Diagram</title>
  <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/flow.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
  <style>#chartdiv { width: 100%; height: 500px; }</style>
</head>
<body>
  <div id="chartdiv"></div>
  <script>
    var root = am5.Root.new("chartdiv");
    root.setThemes([am5themes_Animated.new(root)]);

    var series = root.container.children.push(am5flow.Sankey.new(root, {
      sourceIdField: "from",
      targetIdField: "to",
      valueField: "value",
      nodeAlign: "justify",
      nodeWidth: 12,
      nodePadding: 15
    }));

    series.nodes.rectangles.template.setAll({
      fillOpacity: 1,
      stroke: am5.color(0xffffff),
      strokeWidth: 1,
      cornerRadiusTL: 2, cornerRadiusTR: 2,
      cornerRadiusBL: 2, cornerRadiusBR: 2
    });

    series.links.template.setAll({
      fillOpacity: 0.3,
      tooltipText: "{sourceId} > {targetId}\n[bold]{value}[/]"
    });

    series.nodes.labels.template.setAll({
      fontSize: 13,
      fill: am5.color(0x333333)
    });

    series.data.setAll([
      { from: "Website", to: "Sign Up", value: 5000 },
      { from: "Website", to: "Bounce", value: 3000 },
      { from: "Social Media", to: "Sign Up", value: 2000 },
      { from: "Social Media", to: "Bounce", value: 1500 },
      { from: "Email", to: "Sign Up", value: 1000 },
      { from: "Sign Up", to: "Free Trial", value: 4800 },
      { from: "Sign Up", to: "Abandoned", value: 3200 },
      { from: "Free Trial", to: "Paid", value: 2400 },
      { from: "Free Trial", to: "Cancelled", value: 2400 }
    ]);

    series.appear(1000, 100);
  </script>
</body>
</html>
```

--------------------------------

### Serpentine timeline with events (full HTML example)

Source: https://github.com/amcharts/amcharts5/blob/master/packages/library/docs/references/timeline.md

Complete HTML page creating a serpentine timeline chart with amCharts 5. Includes required script tags, chart setup, axes, series, bullets, data generation, and cursor. Demonstrates the required yRenderer configuration for the X renderer.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Serpentine Timeline</title>
  <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/timeline.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
  <style>
    #chartdiv { width: 100%; height: 600px; }
  </style>
</head>
<body>
  <div id="chartdiv"></div>
  <script>
    var root = am5.Root.new("chartdiv");
    root.setThemes([am5themes_Animated.new(root)]);

    // Create serpentine chart
    var chart = root.container.children.push(
      am5timeline.SerpentineChart.new(root, {
        orientation: "vertical",
        levelCount: 3,
        yAxisRadius: am5.percent(50)
      })
    );

    // Create axes — Y renderer first, then pass to X renderer
    var yRenderer = am5timeline.AxisRendererCurveY.new(root, {});
    var xRenderer = am5timeline.AxisRendererCurveX.new(root, {
      yRenderer: yRenderer  // REQUIRED
    });

    var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
      baseInterval: { timeUnit: "month", count: 1 },
      renderer: xRenderer,
      tooltip: am5.Tooltip.new(root, {})
    }));

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

    // Create series
    var series = chart.series.push(am5timeline.CurveLineSeries.new(root, {
      name: "Revenue",
      xAxis: xAxis,
      yAxis: yAxis,
      valueYField: "value",
      valueXField: "date",
      tooltip: am5.Tooltip.new(root, { labelText: "{valueY}" })
    }));

    series.strokes.template.setAll({ strokeWidth: 2 });
    series.fills.template.setAll({ visible: true, fillOpacity: 0.3 });

    // Add bullets
    series.bullets.push(function() {
      return am5.Bullet.new(root, {
        sprite: am5.Circle.new(root, {
          radius: 4,
          fill: series.get("fill")
        })
      });
    });

    // Generate data
    var data = [];
    var date = new Date(2024, 0, 1);
    var value = 100;
    for (var i = 0; i < 24; i++) {
      value += Math.round((Math.random() - 0.45) * 20);
      data.push({
        date: new Date(date.getFullYear(), date.getMonth() + i, 1).getTime(),
        value: value
      });
    }

    series.data.setAll(data);

    // Cursor
    chart.set("cursor", am5timeline.CurveCursor.new(root, {}));

    series.appear(1000);
    chart.appear(1000, 100);
  </script>
</body>
</html>
```

--------------------------------

### Install amCharts 5 Geodata with Yarn

Source: https://github.com/amcharts/amcharts5/blob/master/packages/geodata/README.md

Install the geodata package using Yarn.

```bash
yarn add @amcharts/amcharts5-geodata
```

--------------------------------

### am5xy.XYChart.new()

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/configuration.md

Creates a new XYChart instance with the given settings. This is a static factory method on the XYChart class.

```APIDOC
## am5xy.XYChart.new()

### Description
Creates a new XYChart instance with the given settings. This is a static factory method on the XYChart class.

### Method
`am5xy.XYChart.new(root, settings)`

### Parameters
- **root** (Root) - Required - The root object
- **settings** (object) - Required - Chart settings (empty object in example)

### Usage
```typescript
const chart = am5xy.XYChart.new(root, {});
```

```

--------------------------------

### am5.GridLayout.new

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/configuration.md

Creates a new GridLayout instance with settings for columns, rows, and grid sizing.

```APIDOC
## am5.GridLayout.new

### Description
Creates a new GridLayout instance with settings for columns, rows, and grid sizing.

### Method
Constructor

### Parameters
#### Settings
- **columns** (number) - Optional - Number of columns. Default: 1
- **rows** (number) - Optional - Number of rows (auto-calculated)
- **fixedWidthGrid** (boolean) - Optional - Equal column widths. Default: false
- **fixedHeightGrid** (boolean) - Optional - Equal row heights. Default: false

### Request Example
```typescript
const gridLayout = am5.GridLayout.new(root, {
  columns: 3,
  fixedWidthGrid: true,
  fixedHeightGrid: false
});
```
```

--------------------------------

### Install amCharts 5 Geodata with NPM

Source: https://github.com/amcharts/amcharts5/blob/master/packages/geodata/README.md

Install the geodata package using npm.

```bash
npm install @amcharts/amcharts5-geodata
```

--------------------------------

### Create a sprite with ISpriteSettings

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/configuration.md

Configures a sprite with position, size, opacity, rotation, scale, visibility, interactivity, cursor style, and tooltip. Use for common visual elements.

```typescript
const sprite = am5.Rectangle.new(root, {
  x: 100,
  y: 100,
  width: 200,
  height: 150,
  opacity: 0.8,
  rotation: 45,
  scale: 1.2,
  visible: true,
  interactive: true,
  cursorOverStyle: ["pointer"],
  tooltip: am5.Tooltip.new(root, {})
});
```

--------------------------------

### Install amCharts 5 with Yarn

Source: https://github.com/amcharts/amcharts5/blob/master/packages/geodata/README.md

Install the main amCharts 5 package using Yarn.

```bash
yarn add @amcharts/amcharts5
```

--------------------------------

### Color usage examples

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/types.md

Shows how to create Color instances from hex, RGB, and string inputs, and convert to CSS strings.

```typescript
// Create from hex number
const red = am5.Color.fromHex(0xff0000);

// Create from RGB values
const blue = am5.Color.fromRGB(0, 0, 255);

// Create from string (via helper)
const green = am5.color("#00ff00");

// Convert to CSS
console.log(red.toCSS(0.5));  // "rgba(255, 0, 0, 0.5)"
console.log(red.toCSSHex());  // "#ff0000"
```

--------------------------------

### Install with npm

Source: https://github.com/amcharts/amcharts5/blob/master/README.md

Install the amCharts 5 package using npm for projects that use a bundler.

```bash
npm install @amcharts/amcharts5
```

--------------------------------

### v4 to v5 migration: new am4charts.LineSeries

Source: https://github.com/amcharts/amcharts5/blob/master/packages/library/docs/index.md

Replace direct constructor with am5xy.LineSeries.new.

```javascript
new am4charts.LineSeries()
```

```javascript
am5xy.LineSeries.new(root, {})
```

--------------------------------

### Settings API: set, setAll, get, getPrivate, and set return value

Source: https://github.com/amcharts/amcharts5/blob/master/packages/library/docs/index.md

Shows how to set and read settings after creation. `set()` returns the value, useful for capturing created objects inline. `getPrivate` reads read-only internal values. Reading percent settings: use `.percent` for 0–100, `.value` for normalized 0–1.

```javascript
// Set after creation
sprite.set("fill", am5.color(0xff0000));
sprite.setAll({ fill: am5.color(0xff0000), strokeWidth: 2 });

// Read current value
const fill = sprite.get("fill");
const width = sprite.getPrivate("width"); // read-only internal values

// set() RETURNS the value — handy for capturing the created object inline:
const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
```

--------------------------------

### Style the slider thumb and start grip

Source: https://github.com/amcharts/amcharts5/blob/master/packages/library/docs/references/ui-elements.md

Styles the slider's thumb (draggable part) and start grip. The start grip can be hidden by setting 'visible' to false.

```javascript
// Style the thumb (draggable part)
slider.thumb.setAll({
  fill: am5.color(0x297373),
  width: 20,
  height: 20
});

// Style the start grip
slider.startGrip.setAll({
  visible: false  // hide if not needed
});
```

--------------------------------

### Configure Label Settings with am5.Label.new

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/configuration.md

Creates a label with padding and a background rectangle. The label inherits all text settings from the Text configuration, and the background is a separate graphics element.

```typescript
const label = am5.Label.new(root, {
  text: "Label",
  fontSize: 12,
  paddingLeft: 5,
  paddingRight: 5,
  paddingTop: 3,
  paddingBottom: 3,
  background: am5.Rectangle.new(root, {
    fill: am5.color(0xffffff)
  })
});
```

--------------------------------

### Install amCharts 5 React Native and react-native-webview

Source: https://github.com/amcharts/amcharts5/blob/master/integrations/react-native/README.md

Install the package with npm. With Expo, use `npx expo install react-native-webview` instead. Requires React Native 0.72+ and react-native-webview 13+.

```bash
npm install @amcharts/amcharts5-react-native react-native-webview
```

--------------------------------

### Create Container with IContainerSettings

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/configuration.md

Configures a container with padding, full size, and horizontal layout. Padding values are in pixels; layout uses HorizontalLayout.

```typescript
const container = am5.Container.new(root, {
  width: am5.percent(100),
  height: am5.percent(100),
  paddingLeft: 20,
  paddingRight: 20,
  paddingTop: 20,
  paddingBottom: 20,
  layout: am5.HorizontalLayout.new(root, {})
});
```

--------------------------------

### Create Container with Layout and Set Padding/Margin

Source: https://github.com/amcharts/amcharts5/blob/master/packages/library/docs/index.md

Creates a container with percentage dimensions and a vertical layout. Also demonstrates setting padding and margin on the container. Layout options include verticalLayout, horizontalLayout, and gridLayout.

```javascript
// Containers organize child elements
const container = root.container.children.push(am5.Container.new(root, {
  width: am5.percent(100),
  height: am5.percent(100),
  layout: root.verticalLayout  // also: horizontalLayout, gridLayout
}));

// Padding and margin
container.setAll({
  paddingTop: 10,
  paddingBottom: 10,
  marginLeft: 20
});
```

--------------------------------

### am5.ease.quadIn

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/utilities.md

Quadratic easing function that starts slow and accelerates. Useful for animations that need a gradual start.

```APIDOC
## am5.ease.quadIn

### Description
Quadratic easing function that starts slow and accelerates. Useful for animations that need a gradual start.

### Type
`EasingFunction`

### Usage
```typescript
import * as am5 from "@amcharts/amcharts5";

sprite.animate({
  key: "x",
  to: 500,
  duration: 1000,
  easing: am5.ease.quadIn
});
```
```

--------------------------------

### am5.HorizontalLayout.new

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/configuration.md

Creates a new HorizontalLayout instance with settings for centering children and margins.

```APIDOC
## am5.HorizontalLayout.new

### Description
Creates a new HorizontalLayout instance with settings for centering children and margins.

### Method
Constructor

### Parameters
#### Settings
- **centerX** (boolean) - Optional - Center children horizontally. Default: false
- **centerY** (boolean) - Optional - Center children vertically. Default: true
- **width** (number | Percent) - Optional - Layout width
- **height** (number | Percent) - Optional - Layout height
- **marginTop** (number) - Optional - Top margin. Default: 0
- **marginBottom** (number) - Optional - Bottom margin. Default: 0
- **marginLeft** (number) - Optional - Left margin. Default: 0
- **marginRight** (number) - Optional - Right margin. Default: 0

### Request Example
```typescript
const layout = am5.HorizontalLayout.new(root, {
  centerX: false,
  centerY: true
});
```
```

--------------------------------

### am5.ease.quadOut

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/utilities.md

Quadratic easing function that starts fast and decelerates. Useful for animations that need a quick start and smooth end.

```APIDOC
## am5.ease.quadOut

### Description
Quadratic easing function that starts fast and decelerates. Useful for animations that need a quick start and smooth end.

### Type
`EasingFunction`

### Usage
```typescript
import * as am5 from "@amcharts/amcharts5";

sprite.animate({
  key: "x",
  to: 500,
  duration: 1000,
  easing: am5.ease.quadOut
});
```
```

--------------------------------

### Basic XYChart example with amCharts 5

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/README.md

Creates a root, applies an animated theme, and builds an XYChart with category and value axes. Adds a column series with sample data. Requires an HTML element with id 'chartdiv'.

```typescript
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

// Create root
const root = am5.Root.new(document.getElementById("chartdiv")!);

// Apply theme
root.setThemes([am5themes_Animated.new(root)]);

// Create chart instance
const chart = am5xy.XYChart.new(root, {});

// Create axes
const xRenderer = am5xy.AxisRendererX.new(root, {});
const xAxis = chart.xAxes.push(
  am5xy.CategoryAxis.new(root, {
    categoryField: "name",
    renderer: xRenderer
  })
);

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

// Create series
const series = chart.series.push(
  am5xy.ColumnSeries.new(root, {
    name: "Sales",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    categoryXField: "name"
  })
);

// Add data
series.data.setAll([
  { name: "Jan", value: 150 },
  { name: "Feb", value: 200 },
  { name: "Mar", value: 180 },
  { name: "Apr", value: 250 },
  { name: "May", value: 300 }
]);
```

--------------------------------

### ListTemplate usage example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/utilities.md

Shows how to apply settings to all children using the template's setAll method and dynamically change colors with an adapter.

```typescript
// Apply settings to all children
const template = container.children.template;
template.setAll({
  strokeOpacity: 0,
  fillOpacity: 0.8
});

// Apply settings as children are added
template.adapters.add("fill", (fill, target) => {
  // Dynamically change color
  return am5.color(Math.random() * 0xffffff);
});
```

--------------------------------

### v4 to v5 migration: chart.dispose

Source: https://github.com/amcharts/amcharts5/blob/master/packages/library/docs/index.md

Replace chart.dispose with root.dispose.

```javascript
chart.dispose()
```

```javascript
root.dispose()
```

--------------------------------

### am5.type usage example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/utilities.md

Example usage of the am5.type module: checking if a value is a string or number, and verifying if data is an array or a date.

```typescript
import * as am5 from "@amcharts/amcharts5";

if (am5.type.isString(value)) {
  console.log("String value:", value);
} else if (am5.type.isNumber(value)) {
  console.log("Numeric value:", value);
}

if (am5.type.isArray(data)) {
  // Process array
}

if (am5.type.isDate(item.date)) {
  // Process date
}
```

--------------------------------

### Install amCharts 5 React components

Source: https://github.com/amcharts/amcharts5/blob/master/integrations/react/README.md

Install the amCharts 5 React package and its core library. Requires amCharts 5.21.0 or later and React 18 or later.

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

--------------------------------

### Install amCharts 5 and Angular component

Source: https://github.com/amcharts/amcharts5/blob/master/integrations/angular/README.md

Install the amCharts 5 library and the Angular component package. Requires amCharts 5.21.0 or later and Angular 19 or later.

```bash
npm install @amcharts/amcharts5 @amcharts/amcharts5-angular
```

--------------------------------

### Root usage example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/root.md

Creates a root, sets themes, configures formatters, creates a chart, and disposes the root.

```typescript
import * as am5 from "@amcharts/amcharts5";

// Create root in a DOM element with id "chartdiv"
const root = am5.Root.new(document.getElementById("chartdiv")!);

// Set themes
root.setThemes([
  am5themes_Animated.new(root)
]);

// Configure formatters
root.numberFormatter.set("numberFormat", "#,###.##");
root.dateFormatter.set("dateFormat", "yyyy-MM-dd");

// Create chart on the root
const chart = am5xy.XYChart.new(root, {});

// Add series, axes, etc.
// ...

// When done, dispose
root.dispose();
```

--------------------------------

### Tooltip Configuration

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/configuration.md

Creates a tooltip with custom label text, pointer orientation, and a semi-transparent black background, then assigns it to a sprite.

```typescript
const tooltip = am5.Tooltip.new(root, {
  labelText: "{value}",
  pointerOrientation: "vertical",
  background: am5.Rectangle.new(root, {
    fill: am5.color(0x000000),
    fillOpacity: 0.8
  })
});

sprite.set("tooltip", tooltip);
```

--------------------------------

### Using am5.Percent for relative sizing

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/README.md

Creates a container with width and height as percentages. Also shows shortcut constants am5.p100, am5.p50, and am5.p0.

```typescript
const container = am5.Container.new(root, {
  width: am5.percent(100),
  height: am5.percent(100)
});

// Shortcuts
am5.p100  // 100%
am5.p50   // 50%
am5.p0    // 0%
```

--------------------------------

### Install amCharts 5 for Svelte

Source: https://github.com/amcharts/amcharts5/blob/master/integrations/svelte/README.md

Install the amCharts 5 library and its Svelte integration. Requires amCharts 5.21.0 or later and Svelte 4 or later; older amCharts fails with "Cannot resolve `@amcharts/amcharts5/element`".

```bash
npm install @amcharts/amcharts5 @amcharts/amcharts5-svelte
```

--------------------------------

### Text creation example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/text-labels.md

Creates a Text element with styling including font size, weight, color, and shadow, then adds it to the root container.

```typescript
import * as am5 from "@amcharts/amcharts5";

const root = am5.Root.new(document.getElementById("chartdiv")!);

const text = am5.Text.new(root, {
  x: 50,
  y: 50,
  text: "Hello World",
  fontSize: 24,
  fontWeight: "bold",
  fill: am5.color(0x0066cc),
  shadowColor: am5.color(0x000000),
  shadowOpacity: 0.3,
  shadowOffsetX: 2,
  shadowOffsetY: 2,
  shadowBlur: 3
});

root.container.children.push(text);
```

--------------------------------

### Creating colors with am5.Color

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/README.md

Shows different ways to create colors: from hex number, RGB, hex string, and using am5.color.

```typescript
am5.color(0xff0000)           // Red (hex number)
am5.Color.fromRGB(255, 0, 0)  // Red (RGB)
am5.Color.fromHex(0xff0000)   // Red (hex)
am5.color("#ff0000")          // Red (hex string)
```

--------------------------------

### Core Gantt chart setup

Source: https://github.com/amcharts/amcharts5/blob/master/packages/library/docs/references/gantt.md

Create a Gantt chart instance with editable tasks and day duration unit. The chart auto-creates axes and series; do not create them manually.

```javascript
var root = am5.Root.new("chartdiv");
root.setThemes([am5themes_Animated.new(root)]);

var chart = root.container.children.push(
  am5gantt.Gantt.new(root, {
    editable: true,
    durationUnit: "day"
  })
);
```

--------------------------------

### clear method example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/graphics.md

Clears all drawing commands.

```typescript
graphics.clear();
```

--------------------------------

### closePath method example

Source: https://github.com/amcharts/amcharts5/blob/master/_autodocs/api-reference/graphics.md

Closes the current path.

```typescript
graphics.closePath();
```
Tokens:
Raw