---
title: "Bubble Series"
framework: react
version: "14.1.0"
---

# Bubble Series

A Bubble Series extends the Scatter Series by using the size of each marker to represent a third variable.

## Simple Bubble

#### Simple Bubble

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BubbleSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { femaleHeightWeight, maleHeightWeight } from "./height-weight-data";

ModuleRegistry.registerModules([
  BubbleSeriesModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Weight vs Height",
    },
    subtitle: {
      text: "by gender",
    },
    series: [
      {
        type: "bubble",
        title: "Male",
        data: maleHeightWeight,
        xKey: "height",
        xName: "Height",
        yKey: "weight",
        yName: "Weight",
        sizeKey: "age",
        sizeName: "Age",
      },
      {
        type: "bubble",
        title: "Female",
        data: femaleHeightWeight,
        xKey: "height",
        xName: "Height",
        yKey: "weight",
        yName: "Weight",
        sizeKey: "age",
        sizeName: "Age",
      },
    ],
    axes: {
      x: {
        type: "number",
        title: {
          text: "Height",
        },
        label: {
          formatter: (params) => {
            return params.value + "cm";
          },
        },
      },
      y: {
        type: "number",
        title: {
          text: "Weight",
        },
        label: {
          formatter: (params) => {
            return params.value + "kg";
          },
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Simple Bubble](https://www.ag-grid.com/charts/reactFunctionalTs/bubble-series/examples/simple-bubble)

To create a Bubble Series use the `'bubble'` series type, and provide a `sizeKey` for the variable that will determine the size of each bubble or marker.

```js
{
    series: [
        {
            type: 'bubble',
            xKey: 'height',
            yKey: 'weight',
            sizeKey: 'age',
            xName: 'Height',
            yName: 'Weight',
            sizeName: 'Age',
            title: 'Male',
        },
    ],
}
```

In this configuration:

- `xKey` defines the numerical values for the x-axis, and is mapped by default to a [Number](https://www.ag-grid.com/charts/react/axes-types/#number).
- `yKey` provides the numerical values for the y-axis, and is mapped by default to a [Number Axis](https://www.ag-grid.com/charts/react/axes-types/#number).
- `sizeKey` provides the numerical values determining the size of each bubble.
- `xName`, `yName` and `sizeName` are optional and configure display names, reflected in [Tooltips](https://www.ag-grid.com/charts/react/tooltips/).
- `title` is optional and is used in the [Tooltip Titles](https://www.ag-grid.com/charts/react/tooltips/) and [Legend Items](https://www.ag-grid.com/charts/react/legend/).

## Markers

#### Bubble Markers

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BubbleSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { femaleHeightWeight, maleHeightWeight } from "./height-weight-data";

ModuleRegistry.registerModules([
  BubbleSeriesModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Weight vs Height",
    },
    subtitle: {
      text: "by Gender",
    },
    series: [
      {
        type: "bubble",
        title: "Male",
        data: maleHeightWeight,
        xKey: "height",
        xName: "Height",
        yKey: "weight",
        yName: "Weight",
        sizeKey: "age",
        sizeName: "Age",
        shape: "square",
        fill: "#e36f6ab5",
        stroke: "#9f4e4a",
      },
      {
        type: "bubble",
        title: "Female",
        data: femaleHeightWeight,
        xKey: "height",
        xName: "Height",
        yKey: "weight",
        yName: "Weight",
        sizeKey: "age",
        sizeName: "Age",
        shape: "circle", // default
        fill: "#7b91deb5",
        stroke: "#56659b",
      },
    ],
    axes: {
      x: {
        type: "number",
        title: {
          text: "Height",
        },
        label: {
          formatter: (params) => {
            return params.value + "cm";
          },
        },
      },
      y: {
        type: "number",
        title: {
          text: "Weight",
        },
        label: {
          formatter: (params) => {
            return params.value + "kg";
          },
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Bubble Markers](https://www.ag-grid.com/charts/reactFunctionalTs/bubble-series/examples/bubble-customised-markers)

### Size

The values defined by `sizeKey` are used to calculate the marker size domain for each series. Markers are sized proportionally between the lowest and highest values.

Use `minSize` to set the smallest possible marker size, and `maxSize` to set the largest possible marker size.

To manually set the value domain used to calculate the size, use `sizeDomain`. This is particularly useful when showing multiple Bubble Series in the same chart. Values outside the domain are clamped to `minSize` or `maxSize`.

```js
{
    series: [
        {
            //...
            minSize: 10, //defaults to 7
            maxSize: 20, //defaults to 30
            sizeDomain: [0, 100], //defaults to the series data domain
        },
    ],
}
```

Using the above configuration

- The size domain is set to between 0 and 100.
- A value of 0 will be represented by a marker of size 10.
- A value of 100 will be represented by a marker of size 20.
- A value of 50 will be represented by a marker the size of 15.

To reverse the mapping so that larger values produce smaller markers, reverse the `sizeDomain` bounds, for example `sizeDomain: [100, 0]`.

### Customisation

It is possible to customise the fill, stroke and shape of the markers used in the Bubble Series.

```js
{
    series: [
        {
            //...
            shape: 'square',
            fill: '#e36f6ab5',
            stroke: '#9f4e4a',
        },
    ],
}
```

In the above example, the 'females' series uses `'circle'` markers and the 'male' series uses `'square'` markers.

Please see the [Series Markers](https://www.ag-grid.com/charts/react/markers/) page for more information or the [API Reference](#api-reference) for a list of all available marker options.

## Labels

To show labels for a Bubble Series set the `label.enabled` config of a series to `true` and specify which key should be used to fetch the label values.

#### Bubble Chart with Labels

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBubbleSeriesOptions,
  AgCartesianChartOptions,
  BubbleSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { femaleHeightWeight, maleHeightWeight } from "./height-weight-data";
import clone from "clone";

ModuleRegistry.registerModules([
  BubbleSeriesModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    title: {
      text: "Weight vs Height",
    },
    subtitle: {
      text: "With Name Labels",
    },
    series: [
      {
        type: "bubble",
        title: "Male",
        data: maleHeightWeight,
        xKey: "height",
        xName: "Height",
        yKey: "weight",
        yName: "Weight",
        sizeKey: "age",
        sizeName: "Age",
        labelKey: "name",
        labelName: "Name",
        shape: "square",
        fill: "#e36f6ab5",
        stroke: "#9f4e4a",
        label: { enabled: true },
      },
      {
        type: "bubble",
        title: "Female",
        data: femaleHeightWeight,
        xKey: "height",
        xName: "Height",
        yKey: "weight",
        yName: "Weight",
        labelName: "Name",
        sizeKey: "age",
        sizeName: "Age",
        labelKey: "name",
        fill: "#7b91deb5",
        stroke: "#56659b",
        label: {
          enabled: true,
        },
      },
    ],
    axes: {
      x: {
        type: "number",
        title: {
          text: "Height",
        },
        label: {
          formatter: (params) => {
            return params.value + "cm";
          },
        },
      },
      y: {
        type: "number",
        title: {
          text: "Weight",
        },
        label: {
          formatter: (params) => {
            return params.value + "kg";
          },
        },
      },
    },
  });

  const updateFontSize = (event: any) => {
    const nextOptions = clone(options);

    const value = Number(event.target.value);
    (nextOptions.series![0] as AgBubbleSeriesOptions).label!.fontSize = value;
    (nextOptions.series![1] as AgBubbleSeriesOptions).label!.fontSize = value;

    document.getElementById("fontSizeSliderValue")!.innerHTML = String(value);

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label htmlFor="sliderInput">Label font size:</label>
          <input
            type="range"
            id="sliderInput"
            min="8"
            max="30"
            defaultValue="12"
            step="1"
            onInput={(event) => updateFontSize(event)}
            onChange={(event) => updateFontSize(event)}
          />
          <span id="fontSizeSliderValue">12</span>
        </div>
      </div>
      <AgCharts options={options} className="chart" />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Bubble Chart with Labels](https://www.ag-grid.com/charts/reactFunctionalTs/bubble-series/examples/bubble-chart-labels)

Bubble Series label placement is constrained so that:

- Labels don't overlap any markers.
- Labels don't overlap other labels.

If these constraints are not satisfied, a label is not placed.

Try opening the above example in a larger window to see that more labels are placed as the chart gets bigger. You can also try changing the size of the markers and the font size of the labels to see how that affects label placement.

See [Series Labels: Collision Avoidance](https://www.ag-grid.com/charts/react/series-labels/#collision-avoidance) for more details.

## Colour Scale

Supply a `colorKey` to colour each marker by a data value, and customise the colouring via `colorScale`.

See the [Colour Scale](https://www.ag-grid.com/charts/react/colour-scale/) page for the full configuration reference including custom fills, discrete bins, and the Gradient Legend.

## Large Datasets

By default, a maximum of 2000 markers per series are rendered. Items beyond this limit are aggregated to improve performance whilst maintaining the same visual appearance. Use `maxRenderedItems` to increase this limit if needed.

See [Large Dataset Interactivity](https://www.ag-grid.com/charts/react/large-dataset-interactivity/) for more details.

## API Reference

#### Bubble Series

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'bubble' |  | Configuration for Bubble Series. |
| 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. |
| sizeKey (required) | DatumKey |  | The key to use to retrieve size values from the data, used to control the size of the markers. |
| id | string | auto-generated value | Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value. |
| context | ContextDefault |  | Context object to use in callbacks. |
| data | DatumDefault[] |  | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. |
| visible | boolean |  | Whether to display the series. |
| cursor | string |  | The cursor to use for hovered markers. This config is identical to the CSS `cursor` property. |
| selection | AgSelectionOptions |  | Configuration for data selection. |
| selection.enabled | boolean |  | Set to `true` to enable the data-selection on this series. |
| selection.containment | 'any' \| 'all' | chart.selection.containment | Override the drag-to-select containment rule for this series. |
| selection.selectedItem | AgSelectionStyleOptions |  | Styling options for selected items. |
| selection.selectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.selectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.selectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.selectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.selectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.selectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.selectedItem.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. |
| selection.selectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedItem | AgSelectionStyleOptions |  | Styling options for unselected items. |
| selection.unselectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedItem.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. |
| selection.unselectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedSeries | AgSelectionStyleOptions |  | Styling options for series with no selections when there is at least one other selected series. |
| selection.unselectedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedSeries.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. |
| selection.unselectedSeries.fillOpacity | Opacity |  | The opacity of the fill colour. |
| nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a node that a click triggers the listener. |
| showInLegend | boolean |  | Whether to include the series in the legend. |
| listeners | AgSeriesListeners |  | 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 the series is clicked. |
| listeners.seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double-clicked. |
| xKeyAxis | string | 'x' | The key of the x-axis to which this series is bound. |
| yKeyAxis | string | 'y' | The key of the y-axis to which this series is bound. |
| sizeDomain | [AgNumericValue, AgNumericValue] |  | Explicitly specifies the extent of the domain of `sizeKey` values to map onto the `[minSize, maxSize]` range.  Reverse the bounds (e.g. `[100, 0]`) to invert the mapping so that larger values produce smaller markers. |
| minSize | PixelSize | 7 | Determines the smallest size a marker can be in pixels. `sizeKey` values at the lower end of `sizeDomain` map to this size. |
| maxSize | PixelSize | 30 | Determines the largest size a marker can be in pixels. `sizeKey` values at the upper end of `sizeDomain` map to this size. |
| 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. |
| title | string |  | The title to use for the series. Defaults to `yName` if it exists, or `yKey` if not. |
| label | AgBubbleSeriesLabel |  | Configuration for the labels shown on top of data points. |
| 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.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| label.format | string |  | Format string used when rendering labels. |
| label.itemStyler | Styler |  | Function used to style individual datum labels. |
| label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| 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.insideStyle | AgChartLabelPlacementStyleOptions |  | Style overrides applied only when the label's resolved placement is inside the shape. |
| label.insideStyle.cornerRadius | PixelSize |  | Rounded corners applied to the label box for this placement. |
| label.insideStyle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the box edge for this placement. |
| label.insideStyle.border | StrokeOptions |  | Border stroke applied to the label box for this placement. |
| 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 |  | Style overrides applied only when the label's resolved placement is outside the shape. |
| label.outsideStyle.cornerRadius | PixelSize |  | Rounded corners applied to the label box for this placement. |
| label.outsideStyle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the box edge for this placement. |
| label.outsideStyle.border | StrokeOptions |  | Border stroke applied to the label box for this placement. |
| 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. |
| 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. |
| styler | Styler |  | Function used to return formatting for entire series, based on the given parameters. |
| itemStyler | Styler |  | Function used to return formatting for individual markers, based on the supplied information. |
| 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. |
| colorScale | AgColorScale |  | Configuration for colour scale with fills, domain, and mode. |
| colorScale.fills | AgColorScaleColorStop[] |  | Configuration for two or more colours, and the values they are rendered at. |
| colorScale.fills.color (required) | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | Colour at this position. |
| colorScale.fills.stop | number \| bigint |  | Position of this colour in the data domain. In continuous mode, the colour appears exactly at this value. In discrete mode, this is the first value of the next bin. |
| colorScale.fills.name | string |  | Display name for this bin, used in legend and tooltip labels. |
| colorScale.domain | [AgNumericValue, AgNumericValue] |  | Fixed domain for the colour scale. If unset, the domain is derived from the data extent. |
| colorScale.mode | 'continuous' \| 'discrete' | continuous | Whether the fills should be rendered as a continuous gradient or discrete bins. |
| colorScale.missingDataFill | CssColor |  | Fill colour for datums with no `colorKey` value. If unset, each series preserves its default behaviour for missing data. |
| 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. |
| showInMiniChart | boolean |  | Whether to include the series in the Mini Chart. |
| labelKey | DatumKey |  | The key to use to retrieve values from the data to use as labels for the markers. |
| colorKey | DatumKey |  | The key to use to retrieve colour values from the data. This value (along with `colorScale` config) will be used to determine the marker colour. |
| 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. |
| 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. |
| 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. |
| colorName | string |  | A human-readable description of the colour values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| legendItemName | string |  | The text to display in the legend for this series. If supplied, matching items with the same value will be toggled together. |