Skip to main content

​
Overview

XYChart is the main container for creating charts with X and Y axes. It provides the foundation for line, column, candlestick, and other series types that plot data on a cartesian coordinate system. 
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"
  })
);

​
Settings

​
panX
boolean
If set to true, users will be able to pan the chart horizontally by dragging plot area.See documentation
​
panY
boolean
If set to true, users will be able to pan the chart vertically by dragging plot area.See documentation
​
wheelX
'zoomX' | 'zoomY' | 'zoomXY' | 'panX' | 'panY' | 'panXY' | 'none'
Indicates what happens when mouse wheel is spinned horizontally while over plot area.See documentation
​
wheelY
'zoomX' | 'zoomY' | 'zoomXY' | 'panX' | 'panY' | 'panXY' | 'none'
Indicates what happens when mouse wheel is spinned vertically while over plot area.See documentation
​
wheelStep
number
default:"0.25"
Indicates the relative “speed” of the mouse wheel.
​
cursor
XYCursor
Chart’s cursor for displaying crosshairs and tooltips.See documentation
​
scrollbarX
Scrollbar
Horizontal scrollbar.See documentation
​
scrollbarY
Scrollbar
Vertical scrollbar.
​
maxTooltipDistance
number
If set, cursor will select closest data item to pointer and show tooltip for it. Also shows tooltips for all data items within X pixels range.Set to -1 to ensure only one tooltip is displayed.See documentation
​
maxTooltipDistanceBy
'xy' | 'x' | 'y'
Indicates how the distance should be measured when assessing distance between tooltips as set in maxTooltipDistance.See documentation
​
arrangeTooltips
boolean
default:"true"
If set to false the chart will not check for overlapping of multiple tooltips, and will not arrange them to not overlap.Will work only if chart has an XYCursor enabled.See documentation
​
pinchZoomX
boolean
default:"false"
If set to true, using pinch gesture on the chart’s plot area will zoom chart horizontally.See documentation
​
pinchZoomY
boolean
default:"false"
If set to true, using pinch gesture on the chart’s plot area will zoom chart vertically.See documentation
​
wheelZoomPositionX
number
If set, will use this relative position as a “center” for mouse wheel horizontal zooming instead of actual cursor position.See documentation
​
wheelZoomPositionY
number
If set, will use this relative position as a “center” for mouse wheel vertical zooming instead of actual cursor position.See documentation

​
Properties

​
xAxes
ListAutoDispose<Axis<AxisRenderer>>
A list of horizontal axes.
const xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    baseInterval: { timeUnit: "day", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {})
  })
);
​
yAxes
ListAutoDispose<Axis<AxisRenderer>>
A list of vertical axes.
const yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);
​
topAxesContainer
Container
A Container located on top of the chart, used to store top horizontal axes.See documentation
​
bottomAxesContainer
Container
A Container located on bottom of the chart, used to store bottom horizontal axes.See documentation
​
leftAxesContainer
Container
A Container located on left of the chart, used to store left-hand vertical axes.See documentation
​
rightAxesContainer
Container
A Container located on right of the chart, used to store right-hand vertical axes.See documentation
​
plotContainer
Container
A Container located in the middle of the chart, used to store actual plots (series).NOTE: plotContainer will automatically have its background preset. If you need to modify background or outline for chart’s plot area, you can use plotContainer.get("background") for that.See documentation
​
gridContainer
Container
A Container axis grid elements are stored in.See documentation
​
zoomOutButton
Button
A button that is shown when chart is not fully zoomed out.See documentation

​
Methods

​
handleWheel()

public handleWheel(event: {
  originalEvent: WheelEvent;
  point: IPoint;
  target: Container;
}): void
This method is invoked when mouse wheel is used over chart’s plot container, and handles zooming/pan. You can invoke this method manually, if you need to mimic chart’s wheel behavior over other elements of the chart.
​
event
object
required
Event object containing the wheel event details
​
event.originalEvent
WheelEvent
required
The original browser wheel event
​
event.point
IPoint
required
The point coordinates
​
event.target
Container
required
The target container

​
inPlot()

public inPlot(point: IPoint): boolean
Checks if point is within plot area.
​
point
IPoint
required
Reference point to check
Returns: boolean - Is within plot area?

​
arrangeTooltips()

public arrangeTooltips(): void
Arranges tooltips to prevent overlapping.

​
Events

​
panstarted
event
Invoked when panning starts.
chart.events.on("panstarted", (ev) => {
  console.log("Pan started", ev.originalEvent);
});
​
panended
event
Invoked when panning ends.
chart.events.on("panended", (ev) => {
  console.log("Pan ended", ev.originalEvent);
});
​
pancancelled
event
Invoked if pointer is pressed down on a chart and released without moving.panended event will still kick in after that.
​
wheelended
event
Invoked when wheel caused zoom ends.

​
Usage Example

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

// Create root element
const root = am5.Root.new("chartdiv");

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

// Create axes
const xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    baseInterval: { timeUnit: "day", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {})
  })
);

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

// Add cursor
const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
cursor.lineY.set("visible", false);

// Add series
const series = chart.series.push(
  am5xy.LineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date"
  })
);

series.data.setAll([
  { date: new Date(2021, 0, 1).getTime(), value: 50 },
  { date: new Date(2021, 0, 2).getTime(), value: 35 },
  { date: new Date(2021, 0, 3).getTime(), value: 42 }
]);

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us