---
product: "AG Charts"
title: "Quadrant Chart"
description: "Divide a JavaScript Quadrant Chart into four labelled, independently styled regions around a pivot point."
enterprise: true
framework: javascript
version: "14.2.0"
related:
    - title: "Org Chart"
      url: "https://www.ag-grid.com/charts/javascript/org-chart/"
llms: "https://www.ag-grid.com/charts/llms.txt"
---

# Quadrant Chart

A Quadrant Chart displays data as a scatter or bubble series, divided into four independently styled regions around a pivot point.

## Simple Quadrant Chart

#### Simple Quadrant Chart

```ts
import {
  AgCharts,
  AgQuadrantChartOptions,
  ModuleRegistry,
  QuadrantChartModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([QuadrantChartModule]);

const options: AgQuadrantChartOptions = {
  data: getData(),
  title: { text: "Product Portfolio Review" },
  subtitle: {
    text: "Year-on-year revenue growth against change in gross margin",
  },
  xKey: "revenueGrowth",
  xName: "Revenue growth",
  yKey: "marginChange",
  yName: "Margin change",
  labelKey: "category",
  labelName: "Category",
  xAxis: { title: { text: "Revenue growth (%)" } },
  yAxis: { title: { text: "Margin change (% points)" } },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createQuadrantChart(options);
```

[Live example: Simple Quadrant Chart](https://www.ag-grid.com/charts/typescript/quadrant-chart/examples/simple-quadrant-chart/)

To create a Quadrant Chart, use the `createQuadrantChart()` API with an `AgQuadrantChartOptions` object.

```js
const options = {
    container: document.getElementById('myChart'),
    data: getData(),
    title: { text: 'Product Portfolio Review' },
    xKey: 'revenueGrowth',
    yKey: 'marginChange',
    labelKey: 'category',
    xAxis: { title: { text: 'Revenue growth (%)' } },
    yAxis: { title: { text: 'Margin change (% points)' } },
};

AgCharts.createQuadrantChart(options);
```

In this configuration:

- `data` is an array of objects, each representing a point on the chart.
- `xKey` and `yKey` map the two measures being compared, with the optional `labelKey` providing a third measure for the marker text.
- `xAxis` and `yAxis` options can be used to set titles, labels and other axis features.
- Marker labels are shown by default when `labelKey` or a `label` object is set, and hidden otherwise; set `label.enabled` to override either way.

## Marker Size

To vary the size of the markers to visualise a third dimension, provide a `sizeKey`.

#### Marker Sizes

```ts
import {
  AgCharts,
  AgQuadrantChartOptions,
  ModuleRegistry,
  QuadrantChartModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([QuadrantChartModule]);

const options: AgQuadrantChartOptions = {
  data: getData(),
  title: { text: "Product Portfolio Review" },
  subtitle: { text: "Marker size shows annual revenue" },
  xKey: "revenueGrowth",
  xName: "Revenue growth",
  yKey: "marginChange",
  yName: "Margin change",
  sizeKey: "revenue",
  sizeName: "Revenue",
  minSize: 8,
  maxSize: 40,
  labelKey: "category",
  labelName: "Category",
  xAxis: { title: { text: "Revenue growth (%)" } },
  yAxis: { title: { text: "Margin change (% points)" } },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createQuadrantChart(options);
```

[Live example: Marker Sizes](https://www.ag-grid.com/charts/typescript/quadrant-chart/examples/quadrant-chart-size/)

```js
{
    sizeKey: 'revenue',
    minSize: 8,
    maxSize: 40,
}
```

In this configuration:

- `sizeKey` maps to the data field determining the size of each marker.
- `minSize` sets the size of the marker for the smallest data point. This defaults to the `size` property when not set.
- `maxSize` sets the size for the largest data point.

When `sizeKey` is not set, the `size` property sets a fixed size for every marker.

## Pivot

The `pivot` option determines the data values at which the regions are divided. It defaults to `{ x: 0, y: 0 }`.

#### Pivot

```ts
import {
  AgCharts,
  AgQuadrantChartOptions,
  ModuleRegistry,
  QuadrantChartModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

const MIN = 0;
const MAX = 10;
let pivotX = 4;
let pivotY = 6;
ModuleRegistry.registerModules([QuadrantChartModule]);

const options: AgQuadrantChartOptions = {
  data: getData(),
  title: { text: "Roadmap Prioritisation" },
  // subtitle: { text: 'Expected impact against implementation effort' },
  xKey: "effort",
  xName: "Effort",
  yKey: "impact",
  yName: "Impact",
  labelKey: "initiative",
  labelName: "Initiative",
  label: { enabled: true },
  xAxis: { min: MIN, max: MAX, title: { text: "Effort" } },
  yAxis: { min: MIN, max: MAX, title: { text: "Impact" } },
  pivot: { x: 4, y: 6 },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createQuadrantChart(options);
updatePivotButtons();

function updatePivotButtons() {
  (document.getElementById("pivot-left") as HTMLButtonElement).disabled =
    pivotX <= MIN;
  (document.getElementById("pivot-right") as HTMLButtonElement).disabled =
    pivotX >= MAX;
  (document.getElementById("pivot-down") as HTMLButtonElement).disabled =
    pivotY <= MIN;
  (document.getElementById("pivot-up") as HTMLButtonElement).disabled =
    pivotY >= MAX;
}

function movePivot(dx: number, dy: number) {
  pivotX = Math.min(MAX, Math.max(MIN, pivotX + dx));
  pivotY = Math.min(MAX, Math.max(MIN, pivotY + dy));
  options.pivot = { x: pivotX, y: pivotY };

  updatePivotButtons();
  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).movePivot = movePivot;
}
```

[Live example: Pivot](https://www.ag-grid.com/charts/typescript/quadrant-chart/examples/quadrant-chart-pivot/)

```js
{
    pivot: { x: 4, y: 6 },
}
```

In this configuration:

- `pivot.x` and `pivot.y` divide the chart into regions at an effort of `4` and an impact of `6`.
- The `pivot` uses a data value tied to both the x- and y-axis, allowing full control over the size of the regions.

## Regions

The fill and stroke of each region, as well as the style of their markers and labels is configured under the region specific properties within the `regions` options. There is also a shared `regions.label` property which each region can override as necessary.

Callbacks such as `itemStyler`, `tooltip.renderer` and label callbacks receive the region of each point to allow for region specific styling.

### Labels

#### Regions

```ts
import {
  AgCharts,
  AgQuadrantChartOptions,
  AgQuadrantRegionLabelPosition,
  ModuleRegistry,
  QuadrantChartModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([QuadrantChartModule]);

const options: AgQuadrantChartOptions = {
  data: getData(),
  title: { text: "Product Portfolio Review" },
  xKey: "revenueGrowth",
  xName: "Revenue growth",
  yKey: "marginChange",
  yName: "Margin change",
  labelKey: "category",
  labelName: "Category",
  xAxis: { title: { text: "Revenue growth (%)" } },
  yAxis: { title: { text: "Margin change (% points)" } },
  padding: { top: 30, right: 30, bottom: 10, left: 10 },
  regions: {
    label: { position: "inside-outer-outer" },
    topLeft: { label: { text: "Shrinking, Wider Margins" } },
    topRight: { label: { text: "Growing, Wider Margins" } },
    bottomLeft: { label: { text: "Shrinking, Thinner Margins" } },
    bottomRight: { label: { text: "Growing, Thinner Margins" } },
  },
  tooltip: {
    renderer: (params) => {
      return {
        data: [
          { label: "Category", value: params.datum.category },
          { label: "Revenue growth", value: `${params.datum.revenueGrowth}%` },
          { label: "Margin change", value: `${params.datum.marginChange}%` },
        ],
      };
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createQuadrantChart(options);

function updateLabelPosition(position: AgQuadrantRegionLabelPosition) {
  options.regions!.label = { position };

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).updateLabelPosition = updateLabelPosition;
}
```

[Live example: Regions](https://www.ag-grid.com/charts/typescript/quadrant-chart/examples/quadrant-chart-regions/)

```js
{
    regions: {
        label: { position: 'inside-outer-outer' },
        topLeft: { label: { text: 'Shrinking, Wider Margins' } },
        topRight: { label: { text: 'Growing, Wider Margins' } },
        bottomLeft: { label: { text: 'Shrinking, Thinner Margins' } },
        bottomRight: { label: { text: 'Growing, Thinner Margins' } },
    },
}
```

In this example:

- Use the dropdown to change the `label.position`, moving a region label to any corner, any edge or the center of each region.
- All regions use the shared `label` option.
- Each region has its own `label.text` to set the text for that region.

### Customisation

#### Region Styling

```ts
import {
  AgCharts,
  AgQuadrantChartOptions,
  ModuleRegistry,
  QuadrantChartModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

function formatRegion(region: string) {
  return region
    .split("-")
    .map((word) => word[0].toUpperCase() + word.slice(1))
    .join(" ");
}
ModuleRegistry.registerModules([QuadrantChartModule]);

const options: AgQuadrantChartOptions = {
  data: getData(),
  title: { text: "Climate Anomalies" },
  xKey: "tempAnomaly",
  xName: "Temperature anomaly (°C)",
  yKey: "precipAnomaly",
  yName: "Precipitation anomaly (%)",
  labelKey: "country",
  labelName: "Country",
  xAxis: {
    title: { text: "Temperature anomaly (°C)" },
    label: { formatter: (params) => `${params.value} °C` },
    line: { enabled: false, width: 0 },
    gridLine: { enabled: false },
  },
  yAxis: {
    title: { text: "Precipitation anomaly (%)" },
    label: { formatter: (params) => `${params.value}%` },
    max: 20,
    line: { enabled: false },
    gridLine: { enabled: false },
  },
  pivot: { x: 1.35, y: 0 },
  regions: {
    label: {
      fontSize: 14,
      fontWeight: "bold",
    },
    topLeft: {
      fill: {
        type: "gradient",
        rotation: 315,
        colorStops: [{ color: "rgba(56, 189, 248, 0)" }, { color: "#38bdf8" }],
      },
      fillOpacity: 0.45,
      stroke: "#0284c7",
      strokeOpacity: 0.4,
      strokeWidth: 1.5,
      marker: { fill: "#38bdf8", strokeWidth: 0 },
      label: {
        text: "Slower Warming, Wetter",
        color: "#0284c7",
      },
    },
    topRight: {
      fill: {
        type: "gradient",
        rotation: 45,
        colorStops: [{ color: "rgba(168, 85, 247, 0)" }, { color: "#a855f7" }],
      },
      fillOpacity: 0.45,
      stroke: "#9333ea",
      strokeOpacity: 0.4,
      strokeWidth: 1.5,
      marker: { fill: "#a855f7", strokeWidth: 0, size: 14 },
      label: {
        text: "Faster Warming, Wetter",
        color: "#9333ea",
      },
    },
    bottomLeft: {
      fill: {
        type: "gradient",
        rotation: 225,
        colorStops: [{ color: "rgba(20, 184, 166, 0)" }, { color: "#14b8a6" }],
      },
      fillOpacity: 0.45,
      stroke: "#0d9488",
      strokeOpacity: 0.4,
      strokeWidth: 1.5,
      marker: {
        fill: "#14b8a6",
        stroke: "#0d9488",
        strokeWidth: 2,
        shape: "cross",
      },
      label: {
        text: "Slower Warming, Drier",
        color: "#0d9488",
      },
    },
    bottomRight: {
      fill: {
        type: "gradient",
        rotation: 135,
        colorStops: [{ color: "rgba(249, 115, 22, 0)" }, { color: "#f97316" }],
      },
      fillOpacity: 0.45,
      stroke: "#ea580c",
      strokeOpacity: 0.4,
      strokeWidth: 1.5,
      marker: { fill: "#f97316", strokeWidth: 0 },
      label: {
        text: "Faster Warming, Drier",
        color: "#ea580c",
      },
    },
  },
  tooltip: {
    renderer: ({ region }) => ({
      title: formatRegion(region),
    }),
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createQuadrantChart(options);
```

[Live example: Region Styling](https://www.ag-grid.com/charts/typescript/quadrant-chart/examples/quadrant-chart-region-styling/)

```js
{
    regions: {
        label: { fontSize: 14, fontWeight: 'bold' },
        topLeft: {
            fill: {
                type: 'gradient',
                rotation: 315,
                colorStops: [{ color: 'rgba(56, 189, 248, 0)' }, { color: '#38bdf8' }],
            },
            stroke: '#0284c7',
            marker: { fill: '#38bdf8', strokeWidth: 0 },
            label: { text: 'Slower Warming, Wetter', color: '#0284c7' },
        },
        topRight: {
            // ... other options
            marker: { fill: '#a855f7', strokeWidth: 0, size: 14 },
        },
        bottomLeft: {
            // ... other options
            marker: { fill: '#14b8a6', stroke: '#0d9488', strokeWidth: 2, shape: 'cross' },
        },
        // ... other regions
    },
    tooltip: {
        renderer: ({ region }) => ({
            title: formatRegion(region),
        }),
    },
}
```

In this configuration:

- `fill` takes a colour, gradient, pattern or image; `stroke` outlines the region.
- `marker` styles the points inside that region, including `size` and `shape`.
- `label` sets the region label text and colour. Styling shared by every region goes on `regions.label`.
- A `region` property is also passed to `itemStyler`, `tooltip.renderer` and label callbacks. It is used here to set the tooltip `title`.

## Axes

By default the axis lines cross at the pivot, while the axis titles, labels and crosshair labels stay at the edge of the chart.

#### Axes

```ts
import {
  AgCartesianAxisCrossAtPlacement,
  AgCharts,
  AgQuadrantChartOptions,
  ModuleRegistry,
  QuadrantChartModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

let alignAxesToPivot = true;
ModuleRegistry.registerModules([QuadrantChartModule]);

const options: AgQuadrantChartOptions = {
  data: getData(),
  title: { text: "Roadmap Prioritisation" },
  xKey: "effort",
  xName: "Effort",
  yKey: "impact",
  yName: "Impact",
  // labelKey: 'initiative',
  // labelName: 'Initiative',
  label: { enabled: false },
  pivot: { x: 4, y: 6 },
  xAxis: { min: 0, max: 10, title: { text: "Effort" } },
  yAxis: { min: 0, max: 10, title: { text: "Impact" } },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createQuadrantChart(options);
updatePlacementSelects();

function updatePlacementSelects() {
  (document.getElementById("placementGroup") as HTMLFieldSetElement).disabled =
    !alignAxesToPivot;
}

function toggleAlignAxesToPivot() {
  alignAxesToPivot = !alignAxesToPivot;
  options.alignAxesToPivot = alignAxesToPivot;

  (
    document.getElementById("alignAxesToPivotToggle") as HTMLButtonElement
  ).setAttribute("aria-pressed", String(alignAxesToPivot));
  updatePlacementSelects();
  chart.update(options);
}

function updateTitlePlacement(placement: AgCartesianAxisCrossAtPlacement) {
  options.axisPlacement = { ...options.axisPlacement, title: placement };

  chart.update(options);
}

function updateLabelPlacement(placement: AgCartesianAxisCrossAtPlacement) {
  options.axisPlacement = { ...options.axisPlacement, label: placement };

  chart.update(options);
}

function updateCrosshairLabelPlacement(
  placement: AgCartesianAxisCrossAtPlacement,
) {
  options.axisPlacement = {
    ...options.axisPlacement,
    crosshairLabel: placement,
  };

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).toggleAlignAxesToPivot = toggleAlignAxesToPivot;
  (<any>window).updateTitlePlacement = updateTitlePlacement;
  (<any>window).updateLabelPlacement = updateLabelPlacement;
  (<any>window).updateCrosshairLabelPlacement = updateCrosshairLabelPlacement;
}
```

[Live example: Axes](https://www.ag-grid.com/charts/typescript/quadrant-chart/examples/quadrant-chart-axis-alignment/)

```js
{
    alignAxesToPivot: true,
    axisPlacement: {
        title: 'crossing',
        label: 'crossing',
        crosshairLabel: 'crossing',
    },
    xAxis: {
        title: { text: 'Effort' },
    },
    yAxis: {
        title: { text: 'Impact' },
    },
}
```

In this configuration:

- `alignAxesToPivot` toggles whether the axis lines to cross at the pivot point or remain at the edge.
- `axisPlacement.title`, `.label` and `.crosshairLabel` each default to `'edge'`. Set any to `'crossing'` to move them to the pivot while `alignAxesToPivot` is `true`.
- The `xAxis` and `yAxis` properties allow customising the axes which are both [Number Axes](https://www.ag-grid.com/charts/javascript/axes-types/#number).

## Quadrant Chart Examples

See more Quadrant Chart examples in the [AG Charts Gallery](https://www.ag-grid.com/charts/gallery/#quadrant).

- [Quadrant Chart Example](https://www.ag-grid.com/charts/gallery/quadrant-chart/)
- [Quadrant Chart With Varying Size Example](https://www.ag-grid.com/charts/gallery/quadrant-chart-with-size/)
- [Quadrant Chart With Large Data Example](https://www.ag-grid.com/charts/gallery/quadrant-chart-with-large-data/)

## API Reference

#### Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| xKey (required) | DatumKey |  | The key to use to retrieve x-values from the data. |
| yKey (required) | DatumKey |  | The key to use to retrieve y-values from the data. |
| theme | AgChartTheme \| AgChartThemeName |  | A predefined theme name or an object containing theme overrides.   See: [Themes Reference](/themes-api/) |
| data | DatumDefault[] |  | The data to render the chart from. If this is not specified, it must be set on individual series instead. |
| dataIdKey | DatumKey |  | The key of the property on each datum that contains its unique identifier. When specified, transactions will match items by this field instead of by object reference. The values of this field must be unique across the dataset. |
| container | HTMLElement \| null |  | The element to place the rendered chart into. |
| initialState | AgInitialStateOptions |  | The initial state of the chart. This must be a serialisable value. |
| initialState.active | AgActiveState |  | The initial picked item. |
| initialState.active.activeItem | AgActiveItemState |  | The active series datum shape. If the entire series is active, then `itemId` will be set to `undefined`. |
| initialState.active.activeItem.type (required) | 'series-node' \| 'legend' |  | Where the item activation originates from. |
| initialState.active.activeItem.seriesId (required) | string |  | The unique identifier of the series that this picked datum belongs to. |
| initialState.active.activeItem.itemId (required) | string \| number |  | The unique identifier of the picked datum. |
| initialState.active.frozen | boolean |  | The frozen state. When the picked item is frozen, user interactions with the chart will be ignored and not updated the currently picked item. |
| initialState.annotations | AgAnnotation[] |  | The initial set of annotations to display on the chart. |
| initialState.chartType | AgInitialStateChartType |  | The initial chart type. |
| initialState.collapsed | Array<string \| number> |  | The initial collapsed datums by id, for Organization Charts. |
| initialState.legend | AgInitialStateLegendOptions[] |  | The initial legend series visibility state. |
| initialState.legend.visible (required) | boolean |  | Whether the legend item is currently enabled or not. |
| initialState.legend.seriesId | string |  | Series or item id |
| initialState.legend.itemId | string |  | Legend item id - usually yKey value for cartesian series. |
| initialState.legend.legendItemName | string |  | Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together. |
| initialState.legendPagination | number |  | The initial legend pagination page as a zero-based index, restored on a best-effort like-for-like basis as the page count depends on the render size. |
| initialState.zoom | AgInitialStateZoomOptions |  | The initial zoom state. |
| initialState.zoom.rangeX | AgInitialStateZoomRange |  | The initial zoom range for the x-axis. |
| initialState.zoom.rangeX.start | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The start value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.rangeX.end | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The end value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.rangeY | AgInitialStateZoomRange |  | The initial zoom range for the y-axis. |
| initialState.zoom.rangeY.start | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The start value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.rangeY.end | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The end value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.ratioX | AgInitialStateZoomRatio |  | The initial zoom ratio for the x-axis. |
| initialState.zoom.ratioX.start | Ratio |  | The start ratio of the zoom range. |
| initialState.zoom.ratioX.end | Ratio |  | The end ratio of the zoom range. |
| initialState.zoom.ratioY | AgInitialStateZoomRatio |  | The initial zoom ratio for the y-axis. |
| initialState.zoom.ratioY.start | Ratio |  | The start ratio of the zoom range. |
| initialState.zoom.ratioY.end | Ratio |  | The end ratio of the zoom range. |
| initialState.zoom.autoScaledAxes | AgAutoScaledAxes |  | Axes that are zoomed by the auto scaling functionality. |
| width | PixelSize |  | The width of the chart in pixels. |
| height | PixelSize |  | The height of the chart in pixels. |
| minHeight | PixelSize | 300 | Sets the minimum height of the chart. Ignored if `height` is specified. |
| minWidth | PixelSize | 300 | Sets the minimum width of the chart. Ignored if `width` is specified. |
| padding | PixelSize \| PaddingOptions |  | Configuration for the padding of the chart. A number applies uniform padding; an object sets each side. |
| title | AgChartCaptionOptions |  | Configuration for the title shown at the top of the chart. |
| title.enabled | boolean |  | Whether the text should be shown. |
| title.text | TextValue \| ContentSegment[] |  | The text to display. Plain text, or an array of segments for rich content. |
| title.textAlign | 'left' \| 'center' \| 'right' \| 'start' \| 'end' |  | Horizontal position of the text. |
| title.fontStyle | FontStyle |  | The font style to use for the text. |
| title.fontWeight | FontWeight |  | The font weight to use for the text. |
| title.fontSize | FontSize |  | The font size in pixels to use for the text. |
| title.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the text. A single family name, or an array of names used as fallbacks. |
| title.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the text. A colour string, or a theme-colour reference object. |
| title.spacing | PixelSize |  | Spacing added to help position the text. |
| title.maxWidth | PixelSize |  | Used to constrain the width of the title before text is wrapped or truncated. |
| title.maxHeight | PixelSize |  | Used to constrain the height of the title before text is truncated. |
| title.minimumFontSize | FontSize |  | If the text does not fit within the space available to it, setting this will allow the text to pick a font size between its normal `fontSize` and `minimumFontSize` to fit. The text is only truncated when it still does not fit at `minimumFontSize`. |
| title.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. |
| title.tooltip | AgCaptionTooltipOptions |  | Configuration for the caption tooltip shown on hover. |
| title.tooltip.visible | 'auto' \| 'always' \| 'never' |  | Controls when the caption tooltip is shown. - `'auto'` — only when text is truncated. - `'always'` — on every hover. - `'never'` — tooltip is disabled.  Default: `'always'` when `text` or `renderer` is provided, `'auto'` otherwise. |
| title.tooltip.text | string |  | Static text to display in the tooltip. Overrides the default caption text. |
| title.tooltip.renderer | Renderer |  | Function to produce tooltip content. Return a plain string or an HTML string. Takes precedence over `text`.  Returning `undefined` falls back to `text` (or the caption's own text). Returning an empty string suppresses the tooltip. |
| title.listeners | AgCaptionListeners |  | A map of event names to event listeners. |
| title.listeners.click | Listener |  | The listener to call when the caption is clicked. |
| title.listeners.doubleClick | Listener |  | The listener to call when the caption is double-clicked. |
| title.border | BorderOptions |  | Stroke options for the box border. |
| title.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| title.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| title.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| title.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| title.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| title.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| title.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| title.fillOpacity | Opacity |  | The opacity of the fill colour. |
| subtitle | AgChartSubtitleOptions |  | Configuration for the subtitle shown beneath the chart title. |
| subtitle.enabled | boolean |  | Whether the text should be shown. |
| subtitle.text | TextValue \| ContentSegment[] |  | The text to display. Plain text, or an array of segments for rich content. |
| subtitle.textAlign | 'left' \| 'center' \| 'right' \| 'start' \| 'end' |  | Horizontal position of the text. |
| subtitle.fontStyle | FontStyle |  | The font style to use for the text. |
| subtitle.fontWeight | FontWeight |  | The font weight to use for the text. |
| subtitle.fontSize | FontSize |  | The font size in pixels to use for the text. |
| subtitle.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the text. A single family name, or an array of names used as fallbacks. |
| subtitle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the text. A colour string, or a theme-colour reference object. |
| subtitle.spacing | PixelSize |  | Spacing added to help position the text. |
| subtitle.maxWidth | PixelSize |  | Used to constrain the width of the title before text is wrapped or truncated. |
| subtitle.maxHeight | PixelSize |  | Used to constrain the height of the title before text is truncated. |
| subtitle.minimumFontSize | FontSize |  | If the text does not fit within the space available to it, setting this will allow the text to pick a font size between its normal `fontSize` and `minimumFontSize` to fit. The text is only truncated when it still does not fit at `minimumFontSize`. |
| subtitle.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. |
| subtitle.tooltip | AgCaptionTooltipOptions |  | Configuration for the caption tooltip shown on hover. |
| subtitle.tooltip.visible | 'auto' \| 'always' \| 'never' |  | Controls when the caption tooltip is shown. - `'auto'` — only when text is truncated. - `'always'` — on every hover. - `'never'` — tooltip is disabled.  Default: `'always'` when `text` or `renderer` is provided, `'auto'` otherwise. |
| subtitle.tooltip.text | string |  | Static text to display in the tooltip. Overrides the default caption text. |
| subtitle.tooltip.renderer | Renderer |  | Function to produce tooltip content. Return a plain string or an HTML string. Takes precedence over `text`.  Returning `undefined` falls back to `text` (or the caption's own text). Returning an empty string suppresses the tooltip. |
| subtitle.listeners | AgCaptionListeners |  | A map of event names to event listeners. |
| subtitle.listeners.click | Listener |  | The listener to call when the caption is clicked. |
| subtitle.listeners.doubleClick | Listener |  | The listener to call when the caption is double-clicked. |
| subtitle.border | BorderOptions |  | Stroke options for the box border. |
| subtitle.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| subtitle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| subtitle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| subtitle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| subtitle.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| subtitle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| subtitle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| subtitle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| footnote | AgChartFooterOptions |  | Configuration for the footnote shown at the bottom of the chart. |
| footnote.enabled | boolean |  | Whether the text should be shown. |
| footnote.text | TextValue \| ContentSegment[] |  | The text to display. Plain text, or an array of segments for rich content. |
| footnote.textAlign | 'left' \| 'center' \| 'right' \| 'start' \| 'end' |  | Horizontal position of the text. |
| footnote.fontStyle | FontStyle |  | The font style to use for the text. |
| footnote.fontWeight | FontWeight |  | The font weight to use for the text. |
| footnote.fontSize | FontSize |  | The font size in pixels to use for the text. |
| footnote.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the text. A single family name, or an array of names used as fallbacks. |
| footnote.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the text. A colour string, or a theme-colour reference object. |
| footnote.spacing | PixelSize |  | Spacing added to help position the text. |
| footnote.maxWidth | PixelSize |  | Used to constrain the width of the title before text is wrapped or truncated. |
| footnote.maxHeight | PixelSize |  | Used to constrain the height of the title before text is truncated. |
| footnote.minimumFontSize | FontSize |  | If the text does not fit within the space available to it, setting this will allow the text to pick a font size between its normal `fontSize` and `minimumFontSize` to fit. The text is only truncated when it still does not fit at `minimumFontSize`. |
| footnote.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. |
| footnote.tooltip | AgCaptionTooltipOptions |  | Configuration for the caption tooltip shown on hover. |
| footnote.tooltip.visible | 'auto' \| 'always' \| 'never' |  | Controls when the caption tooltip is shown. - `'auto'` — only when text is truncated. - `'always'` — on every hover. - `'never'` — tooltip is disabled.  Default: `'always'` when `text` or `renderer` is provided, `'auto'` otherwise. |
| footnote.tooltip.text | string |  | Static text to display in the tooltip. Overrides the default caption text. |
| footnote.tooltip.renderer | Renderer |  | Function to produce tooltip content. Return a plain string or an HTML string. Takes precedence over `text`.  Returning `undefined` falls back to `text` (or the caption's own text). Returning an empty string suppresses the tooltip. |
| footnote.listeners | AgCaptionListeners |  | A map of event names to event listeners. |
| footnote.listeners.click | Listener |  | The listener to call when the caption is clicked. |
| footnote.listeners.doubleClick | Listener |  | The listener to call when the caption is double-clicked. |
| footnote.border | BorderOptions |  | Stroke options for the box border. |
| footnote.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| footnote.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| footnote.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| footnote.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| footnote.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| footnote.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| footnote.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| footnote.fillOpacity | Opacity |  | The opacity of the fill colour. |
| animation | AgAnimationOptions |  | Configuration for chart animations. |
| animation.enabled | boolean |  | Set to `true` to enable the animation module. Defaults to `false` when `flashOnUpdate.enabled` is `true`. |
| animation.duration | DurationMs |  | The total duration of the animation on initial load and updates. |
| contextMenu | AgContextMenuOptions |  | Configuration for the context menu. |
| contextMenu.enabled | boolean | true | Whether to show the context menu. |
| contextMenu.items | AgContextMenuItem[] | ['defaults'] | List of menu items (and submenus) for the context menu. |
| contextMenu.getItems | AgContextMenuGetItemsCallback | undefined | Callback to list the menu items (and submenus) for the context menu. Overrides `items` if return-value is defined, otherwise `items` is used as a fallback. |
| locale | AgLocaleOptions |  | Configuration for localisation. |
| locale.localeText | Record |  | A record of locale texts keyed by id. |
| locale.getLocaleText | Formatter |  | Formatter that generates the text displayed to the user. |
| selection | AgChartSelectionOptions |  | Data selection options |
| selection.enabled | boolean | false | Set to `true` to enable the data-selection module. |
| selection.enableClick | boolean | true | Set to `true` to enable click-to-select. |
| selection.enableDrag | boolean | false | Set to `true` to enable drag-to-select. |
| selection.enableClickAwayToClear | boolean | true | Set to `true` to clear the selection by clicking an empty space on the chart. |
| selection.clickMode | 'single' \| 'multiple' | 'single' | Click-to-select mode. `'single'` replaces the current selection; `'multiple'` toggles each click. Holding Control (or Command) temporarily promotes a single click to `'multiple'`. |
| selection.containment | 'any' \| 'all' | 'any' | Drag-to-select containment rule. `'any'` selects a datum when any part overlaps the drag rectangle; `'all'` requires the datum to be fully enclosed. |
| listeners | AgBaseChartListeners |  | A map of event names to event listeners. |
| listeners.seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is clicked. Useful for a chart containing multiple series. |
| listeners.seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is double-clicked. Useful for a chart containing multiple series. |
| listeners.axisClick | Listener |  | The listener to call when any axis in the chart is clicked. Useful for a chart containing multiple axes. |
| listeners.axisDoubleClick | Listener |  | The listener to call when any axis in the chart is double-clicked. Useful for a chart containing multiple axes. |
| listeners.captionClick | Listener |  | The listener to call when any caption (title, subtitle or footnote) in the chart is clicked. |
| listeners.captionDoubleClick | Listener |  | The listener to call when any caption (title, subtitle or footnote) in the chart is double-clicked. |
| listeners.seriesVisibilityChange | Listener |  | The listener to call when a series visibility is changed. |
| listeners.activeChange | Listener |  | The listener to call when the active state (highlight/tooltip) is changed. |
| listeners.selectionChange | Listener |  | The listener to call when data selection is changed |
| listeners.collapsedChange | Listener |  | The listener to call when collapsed items are changed. |
| listeners.click | Listener |  | The listener to call when the chart is clicked. |
| listeners.doubleClick | Listener |  | The listener to call when the chart is double-clicked. |
| listeners.crossLineClick | Listener |  | The listener to call when a Cross Line on any axis is clicked. |
| listeners.crossLineDoubleClick | Listener |  | The listener to call when a Cross Line on any axis is double-clicked. |
| listeners.annotations | Listener |  | The listener to call when the annotations are changed. |
| listeners.zoom | Listener |  | The listener to call when the zoom is changed. |
| formatter | FunctionFormatter \| Partial |  | Global formatter configuration. |
| enableRtl | boolean |  | Set to `true` to render the chart in right-to-left mode. If not specified, the chart will detect the `dir` attribute on the container or its ancestors. |
| alignAxesToPivot | boolean | true | Whether to move the axis lines so that they cross at the pivot. When `false`, the axes stay at the bottom and left of the chart. |
| axisPlacement | AgQuadrantAxisPlacementOptions |  | Configuration for placement of axis titles and labels. |
| axisPlacement.title | 'crossing' \| 'edge' | 'edge' | Whether the axis title is placed at the crossing point, or at the axis' `position` edge. |
| axisPlacement.label | 'crossing' \| 'edge' | 'edge' | Whether the axis labels are placed at the crossing point, or at the axis' `position` edge. |
| axisPlacement.crosshairLabel | 'crossing' \| 'edge' | 'edge' | Whether the crosshair label is placed at the crossing point, or at the axis' `position` edge. |
| errorBar | AgErrorBarOptions |  | Configuration for the Error Bars. |
| errorBar.xLowerKey | DatumKey |  | The key to use to retrieve lower bound error values from the x-axis data. |
| errorBar.xUpperKey | DatumKey |  | The key to use to retrieve upper bound error values from the x-axis data. |
| errorBar.yLowerKey | DatumKey |  | The key to use to retrieve lower bound error values from the y-axis data. |
| errorBar.yUpperKey | DatumKey |  | The key to use to retrieve upper bound error values from the y-axis data. |
| errorBar.xLowerName | string |  | Human-readable description of the lower bound error value for the x-axis. This is the value to use in tooltips or labels. |
| errorBar.xUpperName | string |  | Human-readable description of the upper bound error value for the x-axis. This is the value to use in tooltips or labels. |
| errorBar.yLowerName | string |  | Human-readable description of the lower bound error value for the y-axis. This is the value to use in tooltips or labels. |
| errorBar.yUpperName | string |  | Human-readable description of the upper bound error value for the y-axis. This is the value to use in tooltips or labels. |
| errorBar.itemStyler | Styler |  | Function used to return formatting for individual error bars, based on the given parameters. |
| errorBar.cap | ErrorBarCapOptions |  | Options to style error bars' caps |
| errorBar.cap.length | PixelSize |  | Absolute length of caps in pixels. |
| errorBar.cap.lengthRatio | Ratio |  | Length of caps relative to the shape used by the series. |
| errorBar.cap.visible | boolean |  | Whether to display the error bars. |
| errorBar.cap.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| errorBar.cap.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| errorBar.cap.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| errorBar.cap.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| errorBar.cap.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| errorBar.visible | boolean |  | Whether to display the error bars. |
| errorBar.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| errorBar.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| errorBar.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| errorBar.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| errorBar.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| itemStyler | Styler |  | Function used to return formatting for individual markers, based on the supplied information. |
| label | AgQuadrantLabelOptions |  | Configuration for the labels shown on top of data points. |
| label.enabled | boolean |  | Whether to show the labels. Defaults to `true` when `labelKey` is set. |
| label.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| label.itemStyler | Styler |  | Function used to style individual datum labels. |
| label.placement | AgChartLabelCollisionPlacement \| AgChartLabelCollisionPlacement[] | top | Placement of the label in relation to the marker. Either a single placement or an ordered fallback list tried in turn until one fits. Use `inside` to centre the label within the marker. |
| label.spacing | PixelSize |  | Distance in pixels between the label and its anchor marker. |
| label.format | string |  | Format string used when rendering labels. |
| label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| label.fontFamily | FontFamily |  | The font family for text elements. |
| label.fontStyle | FontStyle |  | The style to use for text elements. |
| label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| label.border | BorderOptions |  | Stroke options for the box border. |
| label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| label.collision | AgChartLabelCollisionOptions |  | Configuration controlling the spacing kept from obstacles and whether a label that cannot be placed clear of every obstacle is kept at its least-overflowing placement or hidden. |
| label.collision.threshold | PixelSize |  | Collision threshold in pixels. A positive value triggers avoidance strategies when labels are further away, a negative value allows labels to overlap without triggering avoidance. |
| label.collision.alwaysShow | boolean |  | Whether to keep a colliding label visible when a collision remains after every avoidance strategy has been applied. When `true` the label stays at the best available position; when `false` it is hidden instead. |
| label.maxWidth | PixelSize |  | Maximum width, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| label.maxHeight | PixelSize |  | Maximum height, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' |  | Text wrapping strategy applied when the label is constrained by `maxWidth` or `maxHeight`. - `'always'` will always wrap text to fit within the bounds. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the bounds, the text will be truncated. - `'never'` disables text wrapping. |
| label.truncate | boolean |  | Whether to truncate the label with an ellipsis when it does not fit within its bounds. |
| label.minimumFontSize | FontSize |  | If the label does not fit within its bounds, setting this will allow the label to pick a font size between its normal `fontSize` and `minimumFontSize` to fit. The label is only truncated or hidden when it still does not fit at `minimumFontSize`. |
| label.insideStyle | AgChartLabelPlacementStyleOptions |  | Styles applied when the label is placed inside the shape. |
| label.insideStyle.cornerRadius | PixelSize |  | Rounded corners of the label box. |
| label.insideStyle.padding | PixelSize \| PaddingOptions |  | Padding between the label text and the box edge. |
| label.insideStyle.border | BorderOptions |  | Border applied to the label box for this placement. |
| label.insideStyle.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.insideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.insideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.insideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.insideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.insideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.insideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| label.outsideStyle | AgChartLabelPlacementStyleOptions |  | Styles applied when the label is placed outside the shape. |
| label.outsideStyle.cornerRadius | PixelSize |  | Rounded corners of the label box. |
| label.outsideStyle.padding | PixelSize \| PaddingOptions |  | Padding between the label text and the box edge. |
| label.outsideStyle.border | BorderOptions |  | Border applied to the label box for this placement. |
| label.outsideStyle.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.outsideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.outsideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.outsideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.outsideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.outsideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.outsideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| pivot | AgQuadrantPivotOptions |  | The data values at which the chart is divided into four regions. |
| pivot.x | number \| bigint | 0 | The x-value at which the chart is divided into left and right regions. |
| pivot.y | number \| bigint | 0 | The y-value at which the chart is divided into bottom and top regions. |
| regions | AgQuadrantRegionsOptions |  | Configuration for each of the four regions the pivot divides the chart into. |
| regions.label | AgQuadrantRegionsLabelOptions |  | Configuration for labels shared across every region. |
| regions.label.position | AgQuadrantRegionLabelPosition | 'inside-outer-outer' | The placement of the label within its region, resolved relative to the region so that a single value places all four region labels symmetrically. |
| regions.label.spacing | PixelSize | 10 | The distance in pixels between the label and the region edges its `position` places it against, moving it away from those edges. |
| regions.label.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the label. A single family name, or an array of names used as fallbacks. |
| regions.label.rotation | Degree |  | The rotation of the Background Region label in degrees. |
| regions.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| regions.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| regions.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| regions.label.fontStyle | FontStyle |  | The style to use for text elements. |
| regions.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| regions.label.border | BorderOptions |  | Stroke options for the box border. |
| regions.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| regions.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| regions.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| regions.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.topLeft | AgQuadrantRegionOptions |  | Configuration for the top left region. |
| regions.topLeft.label | AgQuadrantRegionLabelOptions |  | Configuration for the label displayed with the region. |
| regions.topLeft.label.text | string |  | The text to show in the label. |
| regions.topLeft.label.position | AgQuadrantRegionLabelPosition | 'inside-outer-outer' | The placement of the label within its region, resolved relative to the region so that a single value places all four region labels symmetrically. |
| regions.topLeft.label.spacing | PixelSize | 10 | The distance in pixels between the label and the region edges its `position` places it against, moving it away from those edges. |
| regions.topLeft.label.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the label. A single family name, or an array of names used as fallbacks. |
| regions.topLeft.label.rotation | Degree |  | The rotation of the Background Region label in degrees. |
| regions.topLeft.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| regions.topLeft.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| regions.topLeft.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| regions.topLeft.label.fontStyle | FontStyle |  | The style to use for text elements. |
| regions.topLeft.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| regions.topLeft.label.border | BorderOptions |  | Stroke options for the box border. |
| regions.topLeft.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| regions.topLeft.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.topLeft.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.topLeft.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.topLeft.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| regions.topLeft.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| regions.topLeft.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.topLeft.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.topLeft.marker | AgQuadrantRegionMarkerStyle |  | Styling for the markers of the data points that fall within this region. When `fill` is omitted, markers use the region's own `fill` at full opacity. |
| regions.topLeft.marker.size | PixelSize |  | The size in pixels of the markers. |
| regions.topLeft.marker.shape | 'circle' \| 'cross' \| 'diamond' \| 'heart' \| 'plus' \| 'pin' \| 'square' \| 'star' \| 'triangle' \| AgMarkerShapeFn |  | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. |
| regions.topLeft.marker.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.topLeft.marker.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.topLeft.marker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.topLeft.marker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.topLeft.marker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.topLeft.marker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| regions.topLeft.marker.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| regions.topLeft.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.topLeft.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.topLeft.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.topLeft.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.topLeft.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.topRight | AgQuadrantRegionOptions |  | Configuration for the top right region. |
| regions.topRight.label | AgQuadrantRegionLabelOptions |  | Configuration for the label displayed with the region. |
| regions.topRight.label.text | string |  | The text to show in the label. |
| regions.topRight.label.position | AgQuadrantRegionLabelPosition | 'inside-outer-outer' | The placement of the label within its region, resolved relative to the region so that a single value places all four region labels symmetrically. |
| regions.topRight.label.spacing | PixelSize | 10 | The distance in pixels between the label and the region edges its `position` places it against, moving it away from those edges. |
| regions.topRight.label.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the label. A single family name, or an array of names used as fallbacks. |
| regions.topRight.label.rotation | Degree |  | The rotation of the Background Region label in degrees. |
| regions.topRight.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| regions.topRight.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| regions.topRight.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| regions.topRight.label.fontStyle | FontStyle |  | The style to use for text elements. |
| regions.topRight.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| regions.topRight.label.border | BorderOptions |  | Stroke options for the box border. |
| regions.topRight.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| regions.topRight.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.topRight.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.topRight.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.topRight.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| regions.topRight.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| regions.topRight.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.topRight.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.topRight.marker | AgQuadrantRegionMarkerStyle |  | Styling for the markers of the data points that fall within this region. When `fill` is omitted, markers use the region's own `fill` at full opacity. |
| regions.topRight.marker.size | PixelSize |  | The size in pixels of the markers. |
| regions.topRight.marker.shape | 'circle' \| 'cross' \| 'diamond' \| 'heart' \| 'plus' \| 'pin' \| 'square' \| 'star' \| 'triangle' \| AgMarkerShapeFn |  | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. |
| regions.topRight.marker.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.topRight.marker.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.topRight.marker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.topRight.marker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.topRight.marker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.topRight.marker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| regions.topRight.marker.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| regions.topRight.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.topRight.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.topRight.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.topRight.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.topRight.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.bottomLeft | AgQuadrantRegionOptions |  | Configuration for the bottom left region. |
| regions.bottomLeft.label | AgQuadrantRegionLabelOptions |  | Configuration for the label displayed with the region. |
| regions.bottomLeft.label.text | string |  | The text to show in the label. |
| regions.bottomLeft.label.position | AgQuadrantRegionLabelPosition | 'inside-outer-outer' | The placement of the label within its region, resolved relative to the region so that a single value places all four region labels symmetrically. |
| regions.bottomLeft.label.spacing | PixelSize | 10 | The distance in pixels between the label and the region edges its `position` places it against, moving it away from those edges. |
| regions.bottomLeft.label.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the label. A single family name, or an array of names used as fallbacks. |
| regions.bottomLeft.label.rotation | Degree |  | The rotation of the Background Region label in degrees. |
| regions.bottomLeft.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| regions.bottomLeft.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| regions.bottomLeft.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| regions.bottomLeft.label.fontStyle | FontStyle |  | The style to use for text elements. |
| regions.bottomLeft.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| regions.bottomLeft.label.border | BorderOptions |  | Stroke options for the box border. |
| regions.bottomLeft.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| regions.bottomLeft.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.bottomLeft.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.bottomLeft.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.bottomLeft.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| regions.bottomLeft.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| regions.bottomLeft.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.bottomLeft.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.bottomLeft.marker | AgQuadrantRegionMarkerStyle |  | Styling for the markers of the data points that fall within this region. When `fill` is omitted, markers use the region's own `fill` at full opacity. |
| regions.bottomLeft.marker.size | PixelSize |  | The size in pixels of the markers. |
| regions.bottomLeft.marker.shape | 'circle' \| 'cross' \| 'diamond' \| 'heart' \| 'plus' \| 'pin' \| 'square' \| 'star' \| 'triangle' \| AgMarkerShapeFn |  | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. |
| regions.bottomLeft.marker.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.bottomLeft.marker.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.bottomLeft.marker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.bottomLeft.marker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.bottomLeft.marker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.bottomLeft.marker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| regions.bottomLeft.marker.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| regions.bottomLeft.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.bottomLeft.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.bottomLeft.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.bottomLeft.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.bottomLeft.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.bottomRight | AgQuadrantRegionOptions |  | Configuration for the bottom right region. |
| regions.bottomRight.label | AgQuadrantRegionLabelOptions |  | Configuration for the label displayed with the region. |
| regions.bottomRight.label.text | string |  | The text to show in the label. |
| regions.bottomRight.label.position | AgQuadrantRegionLabelPosition | 'inside-outer-outer' | The placement of the label within its region, resolved relative to the region so that a single value places all four region labels symmetrically. |
| regions.bottomRight.label.spacing | PixelSize | 10 | The distance in pixels between the label and the region edges its `position` places it against, moving it away from those edges. |
| regions.bottomRight.label.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the label. A single family name, or an array of names used as fallbacks. |
| regions.bottomRight.label.rotation | Degree |  | The rotation of the Background Region label in degrees. |
| regions.bottomRight.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| regions.bottomRight.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| regions.bottomRight.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| regions.bottomRight.label.fontStyle | FontStyle |  | The style to use for text elements. |
| regions.bottomRight.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| regions.bottomRight.label.border | BorderOptions |  | Stroke options for the box border. |
| regions.bottomRight.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| regions.bottomRight.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.bottomRight.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.bottomRight.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.bottomRight.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| regions.bottomRight.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| regions.bottomRight.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.bottomRight.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.bottomRight.marker | AgQuadrantRegionMarkerStyle |  | Styling for the markers of the data points that fall within this region. When `fill` is omitted, markers use the region's own `fill` at full opacity. |
| regions.bottomRight.marker.size | PixelSize |  | The size in pixels of the markers. |
| regions.bottomRight.marker.shape | 'circle' \| 'cross' \| 'diamond' \| 'heart' \| 'plus' \| 'pin' \| 'square' \| 'star' \| 'triangle' \| AgMarkerShapeFn |  | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. |
| regions.bottomRight.marker.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.bottomRight.marker.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.bottomRight.marker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.bottomRight.marker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.bottomRight.marker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| regions.bottomRight.marker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| regions.bottomRight.marker.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| regions.bottomRight.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| regions.bottomRight.fillOpacity | Opacity |  | The opacity of the fill colour. |
| regions.bottomRight.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| regions.bottomRight.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| regions.bottomRight.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| sizeKey | DatumKey |  | The key to use to retrieve size values from the data, used to control the size of the markers. |
| sizeName | string |  | A human-readable description of the size values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| minSize | PixelSize |  | Determines the smallest size a marker can be in pixels when `sizeKey` is present. Defaults to `size` when not set. |
| maxSize | PixelSize |  | Determines the largest size a marker can be in pixels when `sizeKey` is present. |
| tooltip | AgSeriesTooltip |  | Series-specific tooltip configuration. |
| tooltip.enabled | boolean |  | Whether to show tooltips when the series are hovered over. |
| tooltip.showArrow | boolean |  | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. |
| tooltip.range | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. |
| tooltip.position | AgTooltipPositionOptions |  | The position of the tooltip. Each series type uses its own default; typically this is `'node'` for marker-based series and `'pointer'` for shape-based series. |
| tooltip.position.anchorTo | AgTooltipAnchorTo |  | The element or point to position the tooltip relative to. |
| tooltip.position.placement | AgTooltipPlacement \| AgTooltipPlacement[] |  | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. |
| tooltip.position.xOffset | PixelSize |  | The horizontal offset in pixels for the position of the tooltip. |
| tooltip.position.yOffset | PixelSize |  | The vertical offset in pixels for the position of the tooltip. |
| tooltip.position.offset | PixelSize |  | The distance in pixels between the tooltip and its anchor point, applied in the placement direction.  Default: `12` (`0` when `anchorTo` is `'chart'`). |
| tooltip.interaction | AgSeriesTooltipInteraction |  | Configuration for tooltip interaction. |
| tooltip.interaction.enabled (required) | boolean |  | Set to `true` to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text |
| tooltip.renderer | Renderer |  | Function used to create the content for tooltips. |
| xAxis | AgQuadrantAxisOptions |  | Configuration for the horizontal axis, which is always a number axis. Its ticks are hidden by default. |
| xAxis.thickness | PixelSize |  | Sets the axis thickness regardless of its content. |
| xAxis.maxThicknessRatio | Ratio | 0.3 | The maximum thickness of the axis, as a ratio of the chart's width or height depending on axis direction. Used to prevent the axis from growing too large when labels or content are oversized. |
| xAxis.title | AgCartesianAxisCaptionOptions |  | Configuration for the title shown next to the axis. |
| xAxis.title.orientation | 'horizontal' \| 'vertical' \| 'vertical-reversed' |  | Orientation of the title.  Default: aligned with the axis line (`'horizontal'` on the x-axis, `'vertical'` on the y-axis). |
| xAxis.title.enabled | boolean |  | Whether the title should be shown. |
| xAxis.title.text | string |  | The text to show in the title. |
| xAxis.title.fontStyle | FontStyle |  | The font style to use for the title. |
| xAxis.title.fontWeight | FontWeight |  | The font weight to use for the title. |
| xAxis.title.fontSize | FontSize |  | The font size in pixels to use for the title. |
| xAxis.title.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the title. A single family name, or an array of names used as fallbacks. |
| xAxis.title.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the title. A colour string, or a theme-colour reference object. |
| xAxis.title.spacing | PixelSize |  | Spacing between the axis labels and the axis title. |
| xAxis.title.maxWidth | PixelSize |  | Used to constrain the size of the title along the text direction before wrapping or truncation. |
| xAxis.title.maxHeight | PixelSize |  | Used to constrain the size of the title across the text direction before wrapping or truncation. |
| xAxis.title.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'always' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. |
| xAxis.title.truncate | boolean | true | Whether the title text should be automatically truncated to fit the available axis length. |
| xAxis.title.formatter | RichFormatter |  | Formatter to allow dynamic axis title calculation. |
| xAxis.crosshair | AgCrosshairOptions |  | Configuration for the axis crosshair. |
| xAxis.crosshair.enabled | boolean |  | Whether to show the crosshair. |
| xAxis.crosshair.snap | boolean |  | When true, the crosshair snaps to the highlighted data point. By default this property is true. |
| xAxis.crosshair.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour of the stroke for the lines. A colour string, or a theme-colour reference object. |
| xAxis.crosshair.strokeWidth | PixelSize |  | The width in pixels of the stroke for the lines. |
| xAxis.crosshair.strokeOpacity | Opacity |  | The opacity of the stroke for the lines. |
| xAxis.crosshair.lineDash | PixelSize[] |  | Defines how the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels. |
| xAxis.crosshair.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| xAxis.crosshair.label | AgCrosshairLabel |  | The crosshair label configuration |
| xAxis.crosshair.label.format | TFormat |  | Format string used when rendering labels. |
| xAxis.crosshair.label.enabled | boolean |  | Whether to show label when the crosshair is visible. |
| xAxis.crosshair.label.xOffset | PixelSize |  | The horizontal offset in pixels for the label. |
| xAxis.crosshair.label.yOffset | PixelSize |  | The vertical offset in pixels for the label. |
| xAxis.crosshair.label.formatter | Formatter |  | Function used to render crosshair labels. If `value` is a number, `fractionDigits` will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of `0.0005` would have `fractionDigits` set to `4` |
| xAxis.crosshair.label.renderer | Renderer |  | Function used to create the content for the label. |
| xAxis.listeners | AgAxisListeners |  | A map of event names to event listeners. |
| xAxis.listeners.click | Listener |  | The listener to call when the axis is clicked. |
| xAxis.listeners.doubleClick | Listener |  | The listener to call when the axis is double-clicked. |
| xAxis.listeners.crossLineClick | Listener |  | The listener to call when a Cross Line on this axis is clicked. |
| xAxis.listeners.crossLineDoubleClick | Listener |  | The listener to call when a Cross Line on this axis is double-clicked. |
| xAxis.context | ContextDefault |  | Context object to use in callbacks. |
| xAxis.line | AgAxisLineOptions |  | Configuration for the axis line. |
| xAxis.line.enabled | boolean |  | Set to `false` to hide the axis line. |
| xAxis.line.width | PixelSize |  | The width in pixels of the axis line. |
| xAxis.line.stroke | CssColor |  | The colour of the axis line. |
| xAxis.gridLine | AgAxisGridLineOptions |  | Configuration for the axis grid lines. |
| xAxis.gridLine.enabled | boolean |  | Set to `false` to hide the axis grid lines. |
| xAxis.gridLine.width | PixelSize |  | The width in pixels of the axis grid lines. |
| xAxis.gridLine.style | AgAxisGridStyle[] |  | Configuration of the lines used to form the grid in the chart series area. |
| xAxis.gridLine.style.fill | CssColor |  | The colour of the fill between grid lines. |
| xAxis.gridLine.style.fillOpacity | Ratio |  | The opacity of the fill between grid lines. |
| xAxis.gridLine.style.stroke | CssColor |  | The colour of the grid line. |
| xAxis.gridLine.style.strokeWidth | PixelSize |  | The width of the grid line in pixels. |
| xAxis.gridLine.style.lineDash | PixelSize[] |  | Defines how the grid lines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels. |
| xAxis.label | AgCartesianAxisLabelOptions |  | Configuration for the axis labels, shown next to the ticks. |
| xAxis.label.autoRotate | boolean |  | If specified and axis labels may collide, they are rotated so that they are positioned at the supplied angle. This is enabled by default for category. If the `rotation` property is specified, it takes precedence. |
| xAxis.label.autoRotateAngle | Degree |  | If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified. |
| xAxis.label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. |
| xAxis.label.truncate | boolean |  | If truncate is enabled, the text will be truncated to fit available space and an ellipsis (`...`) will be added at the end of the text. |
| xAxis.label.enabled | boolean |  | Set to `false` to hide the axis labels. |
| xAxis.label.rotation | Degree |  | The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line. |
| xAxis.label.textAlign | 'left' \| 'center' \| 'right' \| 'start' \| 'end' | undefined | The horizontal alignment of the axis labels. If unset, the alignment is derived from the axis position and the label rotation.  On a vertical axis with unrotated labels this aligns each label within the axis's label column; on a horizontal axis, or whenever the labels are rotated, it aligns each label around its own anchor point.  On a horizontal axis with a banded scale (`category`, `ordinal-time`) the labels align to the edges of the band each tick belongs to, rather than to the middle of the band where the tick sits.  Honoured on cartesian axes (`number`, `category`, `time`, `log`, `ordinal-time`). Ignored on grouped-category, angle and radius axes, and on funnel / cone-funnel `stageLabel`. |
| xAxis.label.verticalAlign | 'top' \| 'middle' \| 'bottom' | undefined | The vertical alignment of the axis labels. If unset, the alignment is derived from the axis position and the label rotation.  On a horizontal axis, labels align within the space reserved for them, never over the series area. On a vertical axis, `'top'` places each label above its tick (or at the top of its band) and `'bottom'` below.  Honoured on cartesian axes (`number`, `category`, `time`, `log`, `ordinal-time`). Ignored on grouped-category, angle and radius axes, and on funnel / cone-funnel `stageLabel`. |
| xAxis.label.avoidCollisions | boolean |  | Avoid axis label collision by automatically reducing the number of ticks displayed. If set to `false`, axis labels may collide. |
| xAxis.label.minSpacing | PixelSize |  | Minimum gap in pixels between the axis labels before being removed to avoid collisions. |
| xAxis.label.formatter | RichFormatter |  | Function used to render axis labels. If `value` is a number, `fractionDigits` will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of `0.0005` would have `fractionDigits` set to `4` |
| xAxis.label.itemStyler | Styler |  | Function used to style axis labels. |
| xAxis.label.fontStyle | FontStyle |  | The font style to use for the labels. |
| xAxis.label.fontWeight | FontWeight |  | The font weight to use for the labels. |
| xAxis.label.fontSize | FontSize |  | The font size in pixels to use for the labels. |
| xAxis.label.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the labels. A single family name, or an array of names used as fallbacks. |
| xAxis.label.spacing | PixelSize |  | Spacing in pixels between the axis label and the tick. |
| xAxis.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the labels. A colour string, or a theme-colour reference object. |
| xAxis.label.border | BorderOptions |  | Stroke options for the box border. |
| xAxis.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| xAxis.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| xAxis.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| xAxis.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| xAxis.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| xAxis.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| xAxis.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| xAxis.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| xAxis.label.format | string |  | Format string used when rendering labels. |
| xAxis.tick | AgAxisBaseTickOptions |  | Configuration for the axis ticks. |
| xAxis.tick.enabled | boolean |  | Set to `false` to hide the axis ticks. |
| xAxis.tick.width | PixelSize |  | The width in pixels of the axis ticks. |
| xAxis.tick.size | PixelSize |  | The length in pixels of the axis ticks. |
| xAxis.tick.stroke | CssColor |  | The colour of the axis ticks. |
| xAxis.nice | boolean |  | If `true`, the range will be rounded up to ensure nice equal spacing between the ticks.  __Note:__ This does not override the `min` or `max` options. |
| xAxis.interval | AgAxisContinuousIntervalOptions |  | Configuration for the axis ticks interval. A unit keyword (or number), or an object describing the interval. |
| xAxis.interval.step | number \| bigint |  | The axis interval. Expressed in the units of the axis. If the configured interval results in too many items given the chart size, it will be ignored. `bigint` steps are accepted but precision is limited to the Number range. |
| xAxis.interval.maxSpacing | PixelSize |  | Maximum gap in pixels between items. |
| xAxis.interval.values | any[] |  | Array of values in axis units for specified intervals along the axis. The values in this array must be compatible with the axis type. |
| xAxis.interval.minSpacing | PixelSize |  | Minimum gap in pixels between intervals. |
| xAxis.min | number \| bigint |  | The min value for the axis domain. |
| xAxis.max | number \| bigint |  | The max value for the axis domain. |
| xAxis.preferredMin | number \| bigint |  | The min value for the axis, unless extended by the series data or `nice` option. |
| xAxis.preferredMax | number \| bigint |  | The max value for the axis, unless extended by the series data or `nice` option. |
| yAxis | AgQuadrantAxisOptions |  | Configuration for the vertical axis, which is always a number axis. Its ticks are hidden by default. |
| yAxis.thickness | PixelSize |  | Sets the axis thickness regardless of its content. |
| yAxis.maxThicknessRatio | Ratio | 0.3 | The maximum thickness of the axis, as a ratio of the chart's width or height depending on axis direction. Used to prevent the axis from growing too large when labels or content are oversized. |
| yAxis.title | AgCartesianAxisCaptionOptions |  | Configuration for the title shown next to the axis. |
| yAxis.title.orientation | 'horizontal' \| 'vertical' \| 'vertical-reversed' |  | Orientation of the title.  Default: aligned with the axis line (`'horizontal'` on the x-axis, `'vertical'` on the y-axis). |
| yAxis.title.enabled | boolean |  | Whether the title should be shown. |
| yAxis.title.text | string |  | The text to show in the title. |
| yAxis.title.fontStyle | FontStyle |  | The font style to use for the title. |
| yAxis.title.fontWeight | FontWeight |  | The font weight to use for the title. |
| yAxis.title.fontSize | FontSize |  | The font size in pixels to use for the title. |
| yAxis.title.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the title. A single family name, or an array of names used as fallbacks. |
| yAxis.title.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the title. A colour string, or a theme-colour reference object. |
| yAxis.title.spacing | PixelSize |  | Spacing between the axis labels and the axis title. |
| yAxis.title.maxWidth | PixelSize |  | Used to constrain the size of the title along the text direction before wrapping or truncation. |
| yAxis.title.maxHeight | PixelSize |  | Used to constrain the size of the title across the text direction before wrapping or truncation. |
| yAxis.title.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'always' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. |
| yAxis.title.truncate | boolean | true | Whether the title text should be automatically truncated to fit the available axis length. |
| yAxis.title.formatter | RichFormatter |  | Formatter to allow dynamic axis title calculation. |
| yAxis.crosshair | AgCrosshairOptions |  | Configuration for the axis crosshair. |
| yAxis.crosshair.enabled | boolean |  | Whether to show the crosshair. |
| yAxis.crosshair.snap | boolean |  | When true, the crosshair snaps to the highlighted data point. By default this property is true. |
| yAxis.crosshair.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour of the stroke for the lines. A colour string, or a theme-colour reference object. |
| yAxis.crosshair.strokeWidth | PixelSize |  | The width in pixels of the stroke for the lines. |
| yAxis.crosshair.strokeOpacity | Opacity |  | The opacity of the stroke for the lines. |
| yAxis.crosshair.lineDash | PixelSize[] |  | Defines how the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels. |
| yAxis.crosshair.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| yAxis.crosshair.label | AgCrosshairLabel |  | The crosshair label configuration |
| yAxis.crosshair.label.format | TFormat |  | Format string used when rendering labels. |
| yAxis.crosshair.label.enabled | boolean |  | Whether to show label when the crosshair is visible. |
| yAxis.crosshair.label.xOffset | PixelSize |  | The horizontal offset in pixels for the label. |
| yAxis.crosshair.label.yOffset | PixelSize |  | The vertical offset in pixels for the label. |
| yAxis.crosshair.label.formatter | Formatter |  | Function used to render crosshair labels. If `value` is a number, `fractionDigits` will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of `0.0005` would have `fractionDigits` set to `4` |
| yAxis.crosshair.label.renderer | Renderer |  | Function used to create the content for the label. |
| yAxis.listeners | AgAxisListeners |  | A map of event names to event listeners. |
| yAxis.listeners.click | Listener |  | The listener to call when the axis is clicked. |
| yAxis.listeners.doubleClick | Listener |  | The listener to call when the axis is double-clicked. |
| yAxis.listeners.crossLineClick | Listener |  | The listener to call when a Cross Line on this axis is clicked. |
| yAxis.listeners.crossLineDoubleClick | Listener |  | The listener to call when a Cross Line on this axis is double-clicked. |
| yAxis.context | ContextDefault |  | Context object to use in callbacks. |
| yAxis.line | AgAxisLineOptions |  | Configuration for the axis line. |
| yAxis.line.enabled | boolean |  | Set to `false` to hide the axis line. |
| yAxis.line.width | PixelSize |  | The width in pixels of the axis line. |
| yAxis.line.stroke | CssColor |  | The colour of the axis line. |
| yAxis.gridLine | AgAxisGridLineOptions |  | Configuration for the axis grid lines. |
| yAxis.gridLine.enabled | boolean |  | Set to `false` to hide the axis grid lines. |
| yAxis.gridLine.width | PixelSize |  | The width in pixels of the axis grid lines. |
| yAxis.gridLine.style | AgAxisGridStyle[] |  | Configuration of the lines used to form the grid in the chart series area. |
| yAxis.gridLine.style.fill | CssColor |  | The colour of the fill between grid lines. |
| yAxis.gridLine.style.fillOpacity | Ratio |  | The opacity of the fill between grid lines. |
| yAxis.gridLine.style.stroke | CssColor |  | The colour of the grid line. |
| yAxis.gridLine.style.strokeWidth | PixelSize |  | The width of the grid line in pixels. |
| yAxis.gridLine.style.lineDash | PixelSize[] |  | Defines how the grid lines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels. |
| yAxis.label | AgCartesianAxisLabelOptions |  | Configuration for the axis labels, shown next to the ticks. |
| yAxis.label.autoRotate | boolean |  | If specified and axis labels may collide, they are rotated so that they are positioned at the supplied angle. This is enabled by default for category. If the `rotation` property is specified, it takes precedence. |
| yAxis.label.autoRotateAngle | Degree |  | If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified. |
| yAxis.label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. |
| yAxis.label.truncate | boolean |  | If truncate is enabled, the text will be truncated to fit available space and an ellipsis (`...`) will be added at the end of the text. |
| yAxis.label.enabled | boolean |  | Set to `false` to hide the axis labels. |
| yAxis.label.rotation | Degree |  | The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line. |
| yAxis.label.textAlign | 'left' \| 'center' \| 'right' \| 'start' \| 'end' | undefined | The horizontal alignment of the axis labels. If unset, the alignment is derived from the axis position and the label rotation.  On a vertical axis with unrotated labels this aligns each label within the axis's label column; on a horizontal axis, or whenever the labels are rotated, it aligns each label around its own anchor point.  On a horizontal axis with a banded scale (`category`, `ordinal-time`) the labels align to the edges of the band each tick belongs to, rather than to the middle of the band where the tick sits.  Honoured on cartesian axes (`number`, `category`, `time`, `log`, `ordinal-time`). Ignored on grouped-category, angle and radius axes, and on funnel / cone-funnel `stageLabel`. |
| yAxis.label.verticalAlign | 'top' \| 'middle' \| 'bottom' | undefined | The vertical alignment of the axis labels. If unset, the alignment is derived from the axis position and the label rotation.  On a horizontal axis, labels align within the space reserved for them, never over the series area. On a vertical axis, `'top'` places each label above its tick (or at the top of its band) and `'bottom'` below.  Honoured on cartesian axes (`number`, `category`, `time`, `log`, `ordinal-time`). Ignored on grouped-category, angle and radius axes, and on funnel / cone-funnel `stageLabel`. |
| yAxis.label.avoidCollisions | boolean |  | Avoid axis label collision by automatically reducing the number of ticks displayed. If set to `false`, axis labels may collide. |
| yAxis.label.minSpacing | PixelSize |  | Minimum gap in pixels between the axis labels before being removed to avoid collisions. |
| yAxis.label.formatter | RichFormatter |  | Function used to render axis labels. If `value` is a number, `fractionDigits` will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of `0.0005` would have `fractionDigits` set to `4` |
| yAxis.label.itemStyler | Styler |  | Function used to style axis labels. |
| yAxis.label.fontStyle | FontStyle |  | The font style to use for the labels. |
| yAxis.label.fontWeight | FontWeight |  | The font weight to use for the labels. |
| yAxis.label.fontSize | FontSize |  | The font size in pixels to use for the labels. |
| yAxis.label.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the labels. A single family name, or an array of names used as fallbacks. |
| yAxis.label.spacing | PixelSize |  | Spacing in pixels between the axis label and the tick. |
| yAxis.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the labels. A colour string, or a theme-colour reference object. |
| yAxis.label.border | BorderOptions |  | Stroke options for the box border. |
| yAxis.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| yAxis.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| yAxis.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| yAxis.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| yAxis.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| yAxis.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| yAxis.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| yAxis.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| yAxis.label.format | string |  | Format string used when rendering labels. |
| yAxis.tick | AgAxisBaseTickOptions |  | Configuration for the axis ticks. |
| yAxis.tick.enabled | boolean |  | Set to `false` to hide the axis ticks. |
| yAxis.tick.width | PixelSize |  | The width in pixels of the axis ticks. |
| yAxis.tick.size | PixelSize |  | The length in pixels of the axis ticks. |
| yAxis.tick.stroke | CssColor |  | The colour of the axis ticks. |
| yAxis.nice | boolean |  | If `true`, the range will be rounded up to ensure nice equal spacing between the ticks.  __Note:__ This does not override the `min` or `max` options. |
| yAxis.interval | AgAxisContinuousIntervalOptions |  | Configuration for the axis ticks interval. A unit keyword (or number), or an object describing the interval. |
| yAxis.interval.step | number \| bigint |  | The axis interval. Expressed in the units of the axis. If the configured interval results in too many items given the chart size, it will be ignored. `bigint` steps are accepted but precision is limited to the Number range. |
| yAxis.interval.maxSpacing | PixelSize |  | Maximum gap in pixels between items. |
| yAxis.interval.values | any[] |  | Array of values in axis units for specified intervals along the axis. The values in this array must be compatible with the axis type. |
| yAxis.interval.minSpacing | PixelSize |  | Minimum gap in pixels between intervals. |
| yAxis.min | number \| bigint |  | The min value for the axis domain. |
| yAxis.max | number \| bigint |  | The max value for the axis domain. |
| yAxis.preferredMin | number \| bigint |  | The min value for the axis, unless extended by the series data or `nice` option. |
| yAxis.preferredMax | number \| bigint |  | The max value for the axis, unless extended by the series data or `nice` option. |
| labelKey | DatumKey |  | The key to use to retrieve values from the data to use as labels for the markers. |
| xName | string |  | A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| yName | string |  | A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| labelName | string |  | A human-readable description of the label values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| maxRenderedItems | number | 2000 | Determines the largest number of items that can be rendered at once. If there are more items, they will be aggregated to resemble similar visual appearance. |
| styler | Styler |  | Function used to return formatting for entire series, based on the given parameters. |
| highlight | AgMultiSeriesHighlightOptions |  | Configuration for highlighting when a series or legend item is hovered over. |
| highlight.highlightedSeries | AgHighlightStyleOptions |  | Options for the highlighted series. |
| highlight.highlightedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.highlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.highlightedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.highlightedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.highlightedSeries.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.unhighlightedSeries | AgHighlightStyleOptions |  | Options for the un-highlighted series when there is an active highlight. |
| highlight.unhighlightedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.unhighlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.unhighlightedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.unhighlightedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.unhighlightedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.unhighlightedSeries.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.bringToFront | boolean | true | Show this series in front when highlighted. |
| highlight.enabled | boolean |  | Set to `false` to disable highlighting. |
| highlight.highlightedItem | AgHighlightStyleOptions |  | Options for the highlighted item. |
| highlight.highlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.highlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.highlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.highlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.unhighlightedItem | AgHighlightStyleOptions |  | Options for the un-highlighted items when there is an active highlight. |
| highlight.unhighlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.unhighlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.unhighlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.unhighlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.unhighlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| cursor | string |  | The cursor to use for hovered markers. This config is identical to the CSS `cursor` property. |
| context | ContextDefault |  | Context object to use in callbacks. |
| nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a node that a click triggers the listener. |
| size | PixelSize |  | The size in pixels of the markers. |
| shape | 'circle' \| 'cross' \| 'diamond' \| 'heart' \| 'plus' \| 'pin' \| 'square' \| 'star' \| 'triangle' \| AgMarkerShapeFn |  | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. |
| fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| fillOpacity | Opacity |  | The opacity of the fill colour. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |