---
title: "Range Area Series"
enterprise: true
framework: javascript
version: "14.1.0"
---

# Range Area Series

A Range Area Series represents data ranges using a shaded area between high and low data values. This series type is often used to show variations or trends in data over a specified time.

## Simple Range Area

#### Simple Range Area

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  RangeAreaSeriesModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  RangeAreaSeriesModule,
  UnitTimeAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: getData(),
  title: {
    text: "London Property Average Price Range",
  },
  subtitle: {
    text: "2000 - 2020",
  },
  series: [
    {
      type: "range-area",
      xKey: "date",
      yLowKey: "flatsAndMaisonettes",
      yHighKey: "detachedHouses",
    },
  ],
  axes: {
    y: {
      type: "number",
      title: {
        text: "Average Price",
      },
      label: {
        formatter: ({ value }) => `£${Number(value).toLocaleString()}`,
      },
    },
    x: {
      type: "unit-time",
    },
  },
};

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

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

[Live example: Simple Range Area](https://www.ag-grid.com/charts/typescript/range-area-series/examples/simple-range-area)

The Range Area Series is created using the `range-area` series type.

```js
{
    series: [
        {
            type: 'range-area',
            xKey: 'date',
            yLowKey: 'flatsAndMaisonettes',
            yHighKey: 'detachedHouses',
        },
    ],
}
```

The `yLowKey` and `yHighKey` are used to retrieve the range of values for the y-axis.

## Multiple Range Area Series

Multiple Range Area Series can be combined into a single chart.

#### Multiple Range Area Series

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  RangeAreaSeriesModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  RangeAreaSeriesModule,
  UnitTimeAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: getData(),
  title: {
    text: "London Property Average Price Range",
  },
  subtitle: {
    text: "2000 - 2020",
  },
  series: [
    {
      type: "range-area",
      xKey: "date",
      yLowKey: "flatsAndMaisonettes",
      yHighKey: "terracedHouses",
      xName: "Date",
      yName: "Flats & Terraced",
      yLowName: "Flats & Maisonettes",
      yHighName: "Terraced",
    },
    {
      type: "range-area",
      xKey: "date",
      yLowKey: "semiDetachedHouses",
      yHighKey: "detachedHouses",
      xName: "Date",
      yName: "Semi-detached & Detached",
      yLowName: "Semi-detached",
      yHighName: "Detached",
    },
  ],
  axes: {
    y: {
      type: "number",
      title: {
        text: "Average Price",
      },
      label: {
        formatter: ({ value }) => `£${Number(value).toLocaleString()}`,
      },
    },
    x: {
      type: "unit-time",
    },
  },
};

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

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

[Live example: Multiple Range Area Series](https://www.ag-grid.com/charts/typescript/range-area-series/examples/multiple-range-areas)

```js
{
    series: [
        {
            type: 'range-area',
            xKey: 'date',
            yLowKey: 'flatsAndMaisonettes',
            yHighKey: 'terracedHouses',
            xName: 'Date',
            yName: 'Flats & Terraced',
            yLowName: 'Flats & Maisonettes',
            yHighName: 'Terraced',
        },
        {
            type: 'range-area',
            xKey: 'date',
            yLowKey: 'semiDetachedHouses',
            yHighKey: 'detachedHouses',
            xName: 'Date',
            yName: 'Semi-detached & Detached',
            yLowName: 'Semi-detached',
            yHighName: 'Detached',
        },
    ],
}
```

In this configuration:

- `yName` is used to control the text displayed in the legend.
- `yLowName`, `yHighName` and `xName` are used to control the text displayed in the tooltip.

## Missing Data

The series handles missing or invalid data based on the presence or validity of `xKey`, `yLowKey` and `yHighKey` values in the data object.

#### Range Area Missing Data

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AgRangeAreaSeriesOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  RangeAreaSeriesModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

function reset() {
  options.data = getData();
  chart.update(options);
}
ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  RangeAreaSeriesModule,
  UnitTimeAxisModule,
  ContextMenuModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  title: {
    text: "London Property Average Price Range",
  },
  subtitle: {
    text: "2000 - 2020",
  },
  series: [
    {
      type: "range-area",
      xKey: "date",
      yLowKey: "flatsAndMaisonettes",
      yHighKey: "detachedHouses",
      connectMissingData: false,
    },
  ],
  axes: {
    y: {
      type: "number",
      title: {
        text: "Average Price",
      },
      label: {
        formatter: ({ value }) => `£${Number(value).toLocaleString()}`,
      },
    },
    x: {
      type: "unit-time",
    },
  },
};

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

const chart = AgCharts.create(options);

function toggleConnectMissingData() {
  options.series = (options.series as Array<AgRangeAreaSeriesOptions>).map(
    (series) => ({
      ...series,
      connectMissingData: !series.connectMissingData,
    }),
  );

  chart.update(options);
}

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

[Live example: Range Area Missing Data](https://www.ag-grid.com/charts/typescript/range-area-series/examples/range-area-missing-data)

- Data points with a `yLowKey` or `yHighKey` value of positive or negative `Infinity`, `null`, `undefined` or `NaN` will be rendered as a gap in the range.
- Set `connectMissingData: true` to draw a connecting area between points either side of a missing section.
- Data points with invalid `xKey` values will be ignored.

## Customisation

Series markers and labels can be enabled using the `marker` and `label` options.

#### Range Area Labels

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  RangeAreaSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  RangeAreaSeriesModule,
  ContextMenuModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  title: {
    text: "Range Area Markers and Labels",
  },
  seriesArea: {
    padding: {
      left: 30,
      right: 30,
    },
  },
  series: [
    {
      type: "range-area",
      xKey: "date",
      xName: "Date",
      yLowKey: "low",
      yHighKey: "high",
      marker: {
        size: 7,
      },
      label: {
        spacing: 17,
        formatter: ({ itemType, value }) => {
          return `${itemType === "low" ? "L" : "H"}: ${value.toFixed(0)}`;
        },
      },
    },
  ],
};

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

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

[Live example: Range Area Labels](https://www.ag-grid.com/charts/typescript/range-area-series/examples/range-area-labels)

```js
{
    series: [
        {
            // ...
            marker: {
                size: 7,
            },
            label: {
                spacing: 17,
                formatter: ({ itemType, value }) => {
                    return `${itemType === 'low' ? 'L' : 'H'}: ${value.toFixed(0)}`;
                },
            },
        },
    ],
}
```

In this configuration:

- Markers have been enabled using the `marker` options object.
- The `yHighKey` and `yLowKey` values for each data point are presented as labels via the `label` options.
- The `label.formatter` function uses the `itemType` from the params object to distinguish whether the label is a `low` or `high` value.

### Inverted Style

The `invertedStyle` property allows specifying a fill for areas where the `yHighKey` line is below the `yLowKey` line.

#### Range Area Inverted Style

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  RangeAreaSeriesModule,
} from "ag-charts-enterprise";
import { DataType, data } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  RangeAreaSeriesModule,
  ContextMenuModule,
]);

const options: AgCartesianChartOptions<DataType> = {
  title: { text: "Performance: Projected vs Actual" },
  subtitle: {
    text: "Red fill highlights quarters where actual performance fell below projections",
  },
  data,
  series: [
    {
      type: "range-area",
      xKey: "quarter",
      yLowKey: "projected",
      yHighKey: "actual",
      yLowName: "Projected",
      yHighName: "Actual",
      invertedStyle: {
        fill: "red",
      },
      interpolation: {
        type: "smooth",
      },
    },
  ],
};

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

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

[Live example: Range Area Inverted Style](https://www.ag-grid.com/charts/typescript/range-area-series/examples/range-area-inverted-style)

```js
{
    series: [
        {
            type: 'range-area',
            xKey: 'quarter',
            yLowKey: 'projected',
            yHighKey: 'actual',
            invertedStyle: {
                fill: 'red',
            },
        },
    ],
}
```

In this configuration:

- The series `fill` of blue is used where `high > low`.
- The `invertedStyle.fill` of red is used where `high < low`.
- The `invertedStyle` object supports `fill` and `fillOpacity`.

### High and Low Styling

By default, the Line and Marker styling options are applied to both the high and low values of the data.

Use the `item.high` and `item.low` properties to apply specific overrides.

#### High & Low Styling

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AgRangeAreaSeriesItemStylerParams,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  RangeAreaSeriesModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { DataType, getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  RangeAreaSeriesModule,
  UnitTimeAxisModule,
  ContextMenuModule,
]);

const options: AgCartesianChartOptions<DataType> = {
  title: {
    text: "AA-Rated Corporate Bond Yield Range (2024)",
  },
  data: getData(),
  series: [
    {
      type: "range-area",
      xKey: "date",
      yLowKey: "low",
      yHighKey: "high",
      fill: {
        type: "gradient",
        colorStops: [{ color: "#8ADAF100", stop: 0 }, { color: "#8ADAF1cc" }],
      },
      // Shared high/low styling options:
      strokeWidth: 2,
      marker: {
        size: 12,
        fill: "#cccccc",
        itemStyler: (
          params: AgRangeAreaSeriesItemStylerParams<DataType, unknown>,
        ) => {
          // Highlight datum styling options:
          if (params.highlightState === "highlighted-item") {
            if (params.itemType === "high") {
              return { fill: "#53c653" };
            }
            if (params.itemType === "low") {
              return { fill: "#ff3333" };
            }
          }
          return {};
        },
      },
      // Distinguished high/low styling options:
      item: {
        high: {
          stroke: "#39ac39",
          marker: {
            stroke: "#39ac39",
          },
        },
        low: {
          stroke: "#e60000",
          marker: {
            stroke: "#e60000",
          },
        },
      },
    },
  ],
  axes: {
    x: {
      type: "unit-time",
    },
    y: {
      type: "number",
      label: { format: "#{0.1%}" },
    },
  },
};

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

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

[Live example: High & Low Styling](https://www.ag-grid.com/charts/typescript/range-area-series/examples/high-low-styler)

```js
{
    series: [
        {
            // ...

            // Shared high/low styling options:
            strokeWidth: 2,
            marker: {
                size: 12,
                fill: '#cccccc',
                itemStyler: (params) => {
                    // Highlight datum styling options:
                    if (params.highlightState === 'highlighted-item') {
                        if (params.itemType === 'high') {
                            return { fill: '#53c653' };
                        }
                        if (params.itemType === 'low') {
                            return { fill: '#ff3333' };
                        }
                    }
                    return {};
                },
            },

            // Differentiated high/low styling options
            item: {
                high: {
                    stroke: '#39ac39',
                    marker: {
                        stroke: '#39ac39',
                    },
                },
                low: {
                    stroke: '#e60000',
                    marker: {
                        stroke: '#e60000',
                    },
                },
            },
        },
    ],
}
```

In this configuration:

- The `strokeWidth` is set to 2 on all lines.
- All Markers are set a `size` of 12 with a gray `fill`.
- The `stroke` for high line is set to a greenish colour.
- The `stroke` for low Line is set to a reddish colour.
- An [itemStyler](https://www.ag-grid.com/charts/javascript/stylers/#item-stylers) is used to override the `fill` of [highlighted Markers](https://www.ag-grid.com/charts/javascript/series-highlighting/#stylers), using different fill values for the `high` and `low` Markers.

## API Reference

#### Range Area Series

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'range-area' |  | Configuration for the Range Area Series. |
| xKey (required) | DatumKey |  | The key to use to retrieve x-values from the data. |
| yLowKey (required) | DatumKey |  | The key to use to retrieve y-low-values from the data. |
| yHighKey (required) | DatumKey |  | The key to use to retrieve y-high-values from the data. |
| 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. |
| 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. |
| yLowName | string |  | A human-readable description of the y-low-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| yHighName | string |  | A human-readable description of the y-high-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. |
| legendItemName | string |  | Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together. |
| marker | AgRangeAreaMarker |  | Configuration for the markers used in the series. |
| marker.itemStyler | Styler |  | Function used to return formatting for individual markers, based on the supplied information. |
| marker.enabled | boolean |  | Whether to show markers. |
| marker.size | PixelSize |  | The size in pixels of the markers. |
| 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. |
| 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. |
| marker.fillOpacity | Opacity |  | The opacity of the fill colour. |
| marker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| marker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| marker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| marker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| marker.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. A colour string, or a theme-colour reference object. |
| 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 for the stroke. |
| lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| item | AgRangeAreaSeriesItemThemeableOptions |  | Configuration used for distinct styling of the low and high lines. |
| item.low | AgRangeAreaSeriesItemLineThemeableOptions |  | Configuration for the `yLowKey` line. |
| item.low.marker | AgRangeAreaSeriesItemMarker |  | Styling configuration for the markers used in the series. |
| item.low.marker.enabled | boolean |  | Whether to show markers. |
| item.low.marker.size | PixelSize |  | The size in pixels of the markers. |
| item.low.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. |
| item.low.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. |
| item.low.marker.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.low.marker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.low.marker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.low.marker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.low.marker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| item.low.marker.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| item.low.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.low.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.low.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.low.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| item.low.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| item.high | AgRangeAreaSeriesItemLineThemeableOptions |  | Configuration for `yHighKey` line. |
| item.high.marker | AgRangeAreaSeriesItemMarker |  | Styling configuration for the markers used in the series. |
| item.high.marker.enabled | boolean |  | Whether to show markers. |
| item.high.marker.size | PixelSize |  | The size in pixels of the markers. |
| item.high.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. |
| item.high.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. |
| item.high.marker.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.high.marker.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.high.marker.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.high.marker.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.high.marker.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| item.high.marker.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| item.high.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.high.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.high.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.high.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| item.high.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| interpolation | AgLineLinearType \| AgLineSmoothType \| AgLineStepType |  | Configuration for the line used in the series. |
| label | AgRangeAreaSeriesLabelOptions |  | Configuration for the labels shown on top of data points. |
| label.placement | AgRangeAreaSeriesLabelPlacement \| AgRangeAreaSeriesLabelPlacement[] |  | Where to render series labels relative to the area. Either a single placement or an ordered fallback list tried in turn until one fits. |
| label.spacing | PixelSize |  | Spacing in pixels between the label and the edge of the 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. |
| shadow | AgDropShadowOptions |  | Configuration for the shadow used behind the series items. |
| shadow.enabled | boolean |  | Whether the shadow is visible. |
| shadow.color | CssColor |  | The colour of the shadow. |
| shadow.xOffset | PixelSize |  | The horizontal offset in pixels for the shadow. |
| shadow.yOffset | PixelSize |  | The vertical offset in pixels for the shadow. |
| shadow.blur | PixelSize |  | The radius of the shadow's blur, given in pixels. |
| 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. |
| connectMissingData | boolean |  | Set to `true` to connect across missing data points. |
| 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. |
| segmentation | AgSeriesSegmentation |  | Configuration for styling series as separate segments. |
| segmentation.key (required) | 'x' \| 'y' |  | The axis key used for segmentation. |
| segmentation.segments (required) | AgSeriesShapeSegmentOptions[] |  | Configuration for each segment. |
| segmentation.segments.start | AxisValue |  | The axis value at which the styles should start. This is the start of the axis domain by default. |
| segmentation.segments.stop | AxisValue |  | The axis value at which the styles should stop. This is the end of the axis domain by default. |
| segmentation.segments.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| segmentation.segments.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| segmentation.segments.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| segmentation.segments.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| segmentation.segments.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| segmentation.segments.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. |
| segmentation.segments.fillOpacity | Opacity |  | The opacity of the fill colour. |
| segmentation.enabled | boolean |  | Whether segmentation is enabled. |
| invertedStyle | AgRangeAreaSeriesInvertedStyle |  | Style options for the fill of areas where the `yHigh` line is below the `yLow` line. |
| invertedStyle.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. |
| invertedStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| invertedStyle.enabled | boolean |  |  |
| 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. |
| showInMiniChart | boolean |  | Whether to include the series in the Mini Chart. |