Chart

​

Properties

​

chartContainer

const container = chart.chartContainer;

​

bulletsContainer

const bulletsContainer = chart.bulletsContainer;

​

Creating a Chart

• XYChart - For line, area, column, bar, and other XY-based charts
• PieChart - For pie and donut charts
• MapChart - For geographic maps
• TreeMap - For hierarchical tree maps
• RadarChart - For radar/spider charts
• And many more…

​

Example: XY Chart

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

const chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,
  panY: true,
  wheelX: "panX",
  wheelY: "zoomX"
}));

​

Example: Pie Chart

import * as am5 from "@amcharts/amcharts5";
import * as am5percent from "@amcharts/amcharts5/percent";

const chart = root.container.children.push(am5percent.PieChart.new(root, {
  layout: root.verticalLayout
}));

​

Common Chart Features

• Layout management - Use layout property to arrange chart elements
• Background - Set a background using background property
• Padding - Control inner spacing with padding properties
• Children management - Add/remove elements using children list
• Events - Listen to container events

​

Working with Series

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

series.data.setAll([
  { category: "A", value: 100 },
  { category: "B", value: 200 },
  { category: "C", value: 150 }
]);

​

Adding to Root

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

​

Inherited Properties

• width and height - Chart dimensions
• paddingTop, paddingRight, paddingBottom, paddingLeft - Inner spacing
• layout - Layout algorithm for child elements
• background - Background graphics

• x and y - Position
• visible - Visibility
• opacity - Transparency
• rotation and scale - Transformations
• Event handlers and tooltips

​

See Also

• XYChart Documentation
• PieChart Documentation
• MapChart Documentation
• Series - Working with data series
• Container - Container functionality