---
title: "Range Controls"
enterprise: true
framework: javascript
version: "14.1.0"
---

# Range Controls

Range Controls allow the user to easily navigate to specific time periods and ranges along the chart timeline.

## Enabling Range Controls

Set `ranges.enabled` to `true` to display range control buttons.

#### Range Controls

```ts
import {
  AgChartOptions,
  AgCharts,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  RangesModule,
  ZoomModule,
  NavigatorModule,
]);

const options: AgChartOptions = {
  data: getData(),
  title: { text: "Daily Readings" },
  series: [{ type: "line", xKey: "date", yKey: "value", yName: "Value" }],
  axes: {
    x: { type: "unit-time" },
    y: { type: "number" },
  },
  zoom: { enabled: true },
  navigator: { enabled: true },
  ranges: { enabled: true },
};

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

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

[Live example: Range Controls](https://www.ag-grid.com/charts/typescript/range-controls/examples/range-controls)

```js
{
    ranges: { enabled: true },
}
```

In this example:

- Clicking a range button updates the visible range to the corresponding time period.
- Time periods are calculated from the end of the axis domain. For example, '1 M' shows the last month of data.
- Range controls are commonly used alongside [Zoom](https://www.ag-grid.com/charts/javascript/zoom/) and [Navigator](https://www.ag-grid.com/charts/javascript/navigator/) for a complete navigation experience.
- Financial Charts also include range controls - see [Financial Charts - Range Buttons](https://www.ag-grid.com/charts/javascript/range-buttons/).

## Position

Use the `position` property to change where the range buttons are displayed. The default is `'top-right'`.

#### Position

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AgRangesPosition,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  RangesModule,
  ZoomModule,
  NavigatorModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  title: { text: "Daily Readings" },
  series: [{ type: "line", xKey: "date", yKey: "value", yName: "Value" }],
  axes: {
    x: { type: "unit-time" },
    y: { type: "number" },
  },
  zoom: { enabled: true },
  navigator: { enabled: true },
  ranges: {
    enabled: true,
    position: "top-right",
  },
};

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

const chart = AgCharts.create(options);

function changePosition(position: AgRangesPosition) {
  options.ranges = {
    ...options.ranges,
    position,
  };

  chart.update(options);
}

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

[Live example: Position](https://www.ag-grid.com/charts/typescript/range-controls/examples/position)

```js
{
    ranges: {
        position: 'bottom-left',
    },
}
```

In this example:

- Use the dropdown to select different positions for the range buttons.
- Available positions are: `'top-left'`, `'top'`, `'top-right'`, `'bottom-left'`, `'bottom'`, `'bottom-right'`.

## Custom Ranges

Override the default buttons by providing a `buttons` array. Each button has a `label`, and a `value` that determines the range.

#### Custom Buttons

```ts
import {
  AgChartOptions,
  AgCharts,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  RangesModule,
  ZoomModule,
  NavigatorModule,
]);

const options: AgChartOptions = {
  data: getData(),
  title: { text: "Daily Readings" },
  series: [{ type: "line", xKey: "date", yKey: "value", yName: "Value" }],
  axes: {
    x: { type: "unit-time" },
    y: { type: "number" },
  },
  zoom: { enabled: true },
  navigator: { enabled: true },
  ranges: {
    buttons: [
      { label: "6 Months", value: 6 * 30 * 24 * 60 * 60 * 1000 },
      { label: "1 Year", value: 365 * 24 * 60 * 60 * 1000 },
      { label: "H1 2023", value: [new Date(2023, 0, 1), new Date(2023, 6, 1)] },
      { label: "All Data", value: undefined },
    ],
  },
};

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

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

[Live example: Custom Buttons](https://www.ag-grid.com/charts/typescript/range-controls/examples/custom-buttons)

```js
{
    ranges: {
        buttons: [
            { label: '6 Months', value: 6 * 30 * 24 * 60 * 60 * 1000 },
            { label: '1 Year', value: 365 * 24 * 60 * 60 * 1000 },
            { label: 'H1 2023', value: [new Date(2023, 0, 1), new Date(2023, 6, 1)] },
            { label: 'All Data', value: undefined },
        ],
    },
}
```

The `value` property accepts:

- [Calendar Interval](#calendar-intervals) - An `AgTimeInterval` or `AgTimeIntervalUnit` for calendar-aware ranges on time axes.
- Number - A duration in milliseconds for time axes, or a numeric offset for number axes.
- Pair - A `[Date | number, Date | number]` tuple defining an absolute range.
- [Function](#window-relative-functions) - A function that receives the data domain and current visible window, and returns a new range. The function may return `undefined` for either endpoint to leave that side of the range unchanged.
- `undefined` - Resets the zoom to show all data or the initial zoom range.

### Calendar Intervals

Use `AgTimeInterval` or `AgTimeIntervalUnit` values for calendar-aware ranges that handle variable-length months and years correctly.

#### Calendar Intervals

```ts
import {
  AgChartOptions,
  AgCharts,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  RangesModule,
  ZoomModule,
  NavigatorModule,
]);

const options: AgChartOptions = {
  data: getData(),
  title: { text: "Daily Readings" },
  series: [{ type: "line", xKey: "date", yKey: "value", yName: "Value" }],
  axes: {
    x: { type: "unit-time" },
    y: { type: "number" },
  },
  zoom: { enabled: true },
  navigator: { enabled: true },
  ranges: {
    buttons: [
      { label: "1 Month", value: "month" },
      { label: "3 Months", value: { unit: "month", step: 3 } },
      { label: "6 Months", value: { unit: "month", step: 6 } },
      { label: "1 Year", value: "year" },
      { label: "All Data", value: undefined },
    ],
  },
};

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

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

[Live example: Calendar Intervals](https://www.ag-grid.com/charts/typescript/range-controls/examples/calendar-intervals)

```js
{
    ranges: {
        buttons: [
            { label: '1 Month', value: 'month' },
            { label: '3 Months', value: { unit: 'month', step: 3 } },
            { label: '1 Year', value: 'year' },
            { label: 'All Data', value: undefined },
        ],
    },
}
```

- Calendar intervals account for varying month lengths rather than using a fixed number of milliseconds. For example, '1 Month' from 31 March navigates back to 28 February.
- See [Time Intervals](https://www.ag-grid.com/charts/javascript/axes-time/#time-intervals) for more details.

### Window-Relative Functions

For full control, provide a function that receives the data domain and current visible window, and returns a new range.

#### Window-Relative Functions

```ts
import {
  AgChartOptions,
  AgCharts,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  RangesModule,
  ZoomModule,
  NavigatorModule,
]);

const options: AgChartOptions = {
  data: getData(),
  series: [
    {
      type: "line",
      xKey: "date",
      yKey: "value",
    },
  ],
  axes: {
    x: {
      type: "unit-time",
      label: {
        autoRotate: false,
      },
    },
    y: {
      type: "number",
    },
  },
  ranges: {
    buttons: [
      {
        label: "Last 1M",
        value: ({ windowEnd }) => {
          const month = 30 * 24 * 60 * 60 * 1000;
          return [Number(windowEnd) - month, windowEnd];
        },
      },
      {
        label: "Last 3M",
        value: ({ windowEnd }) => {
          const months = 3 * 30 * 24 * 60 * 60 * 1000;
          return [Number(windowEnd) - months, windowEnd];
        },
      },
      {
        label: "1M Centre",
        value: ({ windowStart, windowEnd }) => {
          const mid = (Number(windowStart) + Number(windowEnd)) / 2;
          const halfMonth = (30 * 24 * 60 * 60 * 1000) / 2;
          return [mid - halfMonth, mid + halfMonth];
        },
      },
      {
        label: "3M Centre",
        value: ({ windowStart, windowEnd }) => {
          const mid = (Number(windowStart) + Number(windowEnd)) / 2;
          const halfRange = (3 * 30 * 24 * 60 * 60 * 1000) / 2;
          return [mid - halfRange, mid + halfRange];
        },
      },
      {
        label: "< 1M",
        value: ({ windowStart, windowEnd }) => {
          const month = 30 * 24 * 60 * 60 * 1000;
          return [Number(windowStart) - month, Number(windowEnd) - month];
        },
      },
      {
        label: "1M >",
        value: ({ windowStart, windowEnd }) => {
          const month = 30 * 24 * 60 * 60 * 1000;
          return [Number(windowStart) + month, Number(windowEnd) + month];
        },
      },
      { label: "All", value: undefined },
    ],
  },
  zoom: { enabled: true },
  navigator: { enabled: true },
};

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

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

[Live example: Window-Relative Functions](https://www.ag-grid.com/charts/typescript/range-controls/examples/window-relative)

```js
{
    ranges: {
        buttons: [
            {
                label: 'Last 1M',
                value: ({ windowEnd }) => {
                    const month = 30 * 24 * 60 * 60 * 1000;
                    return [Number(windowEnd) - month, windowEnd];
                },
            },
            {
                label: '1M Centre',
                value: ({ windowStart, windowEnd }) => {
                    const mid = (Number(windowStart) + Number(windowEnd)) / 2;
                    const halfMonth = (30 * 24 * 60 * 60 * 1000) / 2;
                    return [mid - halfMonth, mid + halfMonth];
                },
            },
            {
                label: '< 1M',
                value: ({ windowStart, windowEnd }) => {
                    const month = 30 * 24 * 60 * 60 * 1000;
                    return [Number(windowStart) - month, Number(windowEnd) - month];
                },
            },
            { label: 'All', value: undefined },
        ],
    },
}
```

Use the Navigator to zoom into the middle of the data, then try the buttons:

- 'Last 1M' and 'Last 3M' - Shows the last 1 or 3 months from the right edge of the current window.
- '1M Centre' and '3M Centre' - Zooms to 1 or 3 months centred on the midpoint of the current window.
- '< 1M' and '1M >' - Pan the entire window one month backward or forward.

The function receives a single params object which includes the following properties:

- `start` and `end` - The full data domain bounds.
- `windowStart` and `windowEnd` - The currently visible range.
- `source` - Indicates what triggered the function call. As the function is also called to determine [whether the button should be disabled](#out-of-range-buttons), this allows differentiation.

## Appearance

### Out-of-Range Buttons

When buttons specify ranges that exceed the data bounds, they are disabled by default. Set `enableOutOfRange` to `true` to keep them enabled.

#### Out-of-Range Buttons

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  RangesModule,
  ZoomModule,
  NavigatorModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  series: [
    {
      type: "line",
      xKey: "date",
      yKey: "value",
    },
  ],
  axes: {
    x: {
      type: "unit-time",
      label: {
        autoRotate: false,
      },
    },
    y: {
      type: "number",
    },
  },
  zoom: { enabled: true },
  navigator: { enabled: true },
  ranges: {
    enabled: true,
  },
};

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

const chart = AgCharts.create(options);

function toggleOutOfRange(enabled: boolean) {
  options.ranges = {
    ...options.ranges,
    enableOutOfRange: enabled,
  };

  chart.update(options);
}

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

[Live example: Out-of-Range Buttons](https://www.ag-grid.com/charts/typescript/range-controls/examples/out-of-range)

```js
{
    ranges: {
        enableOutOfRange: true,
    },
}
```

In this example:

- The data only spans 3 months, so the '6M', 'YTD', and '1Y' buttons are disabled by default.
- The 'All' button is always enabled.
- Individual buttons can use the `enabled` property within their definition to force enable or disable states.

### Responsive Dropdown

When the chart is too narrow for all buttons, they automatically collapse into a dropdown.

#### Responsive Dropdown

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  RangesModule,
  ZoomModule,
  NavigatorModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  series: [
    {
      type: "line",
      xKey: "date",
      yKey: "value",
    },
  ],
  axes: {
    x: {
      type: "unit-time",
      label: {
        autoRotate: false,
      },
    },
    y: {
      type: "number",
    },
  },
  ranges: {
    enabled: true,
    dropdown: { visible: "auto" },
    buttons: [
      { label: "1 Month", value: "month" },
      { label: "3 Months", value: { unit: "month", step: 3 } },
      { label: "6 Months", value: { unit: "month", step: 6 } },
      { label: "1 Year", value: "year" },
      { label: "All Data", value: undefined },
    ],
  },
  zoom: { enabled: true },
  navigator: { enabled: true },
};

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

const chart = AgCharts.create(options);

function changeDropdown(visible: "auto" | "always" | "never") {
  options.ranges = {
    ...options.ranges,
    dropdown: { visible },
  };

  chart.update(options);
}

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

[Live example: Responsive Dropdown](https://www.ag-grid.com/charts/typescript/range-controls/examples/dropdown)

```js
{
    ranges: {
        dropdown: { visible: 'auto' },
    },
}
```

Control this behaviour with the `dropdown.visible` property.

In this example:

- Select the different options and use the resize handle to see how the buttons respond when the chart width is reduced.
  - `'auto'` (default) - Switches to dropdown when buttons exceed available space.
  - `'always'` - Always shows a dropdown.
  - `'never'` - Never collapses to dropdown; buttons may overflow.

### Styling

Customise the appearance of range buttons using styling properties on the `ranges` options object.

#### Styling

```ts
import {
  AgChartOptions,
  AgCharts,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  RangesModule,
  ZoomModule,
  NavigatorModule,
]);

const options: AgChartOptions = {
  data: getData(),
  series: [
    {
      type: "line",
      xKey: "date",
      yKey: "value",
    },
  ],
  axes: {
    x: {
      type: "unit-time",
      label: {
        autoRotate: false,
      },
    },
    y: {
      type: "number",
    },
  },
  zoom: { enabled: true },
  navigator: { enabled: true },
  ranges: {
    enabled: true,
    fill: "#6366f1",
    cornerRadius: 8,
    textColor: "#ffffff",
    stroke: "#4f46e5",
    strokeWidth: 2,
    active: {
      fill: "#16a34a",
      textColor: "#ffffff",
      stroke: "#15803d",
    },
    hover: {
      fill: "#ea580c",
      textColor: "#ffffff",
      stroke: "#c2410c",
    },
    disabled: {
      fill: "#e5e7eb",
      textColor: "#9ca3af",
      stroke: "#d1d5db",
    },
    button: {
      padding: { top: 6, right: 12, bottom: 6, left: 12 },
    },
    gap: 4,
  },
};

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

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

[Live example: Styling](https://www.ag-grid.com/charts/typescript/range-controls/examples/styling)

```js
{
    ranges: {
        fill: '#6366f1',
        cornerRadius: 8,
        textColor: '#ffffff',
        stroke: '#4f46e5',
        active: {
            fill: '#16a34a',
            textColor: '#ffffff',
            stroke: '#15803d',
        },
        hover: {
            fill: '#ea580c',
            textColor: '#ffffff',
            stroke: '#c2410c',
        },
        disabled: {
            fill: '#e5e7eb',
            textColor: '#9ca3af',
            stroke: '#d1d5db',
        },
    },
}
```

In this example:

- Default - Purple fill. The idle state for buttons that are not active, hovered, or disabled.
- Active - Green fill. Click a button to see this state.
- Hover - Orange fill. Hover over a button to see this state.
- Disabled - Light grey fill with muted text. The '1Y' button shows this state as the data only spans 6 months.
- Button and dropdown styling inherit from the top level options, but can be overridden with the `button` and `dropdown` objects.

## API Reference

#### Range Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| enableOutOfRange | boolean | false | Whether out of range buttons should be enabled. |
| gap | PixelSize | 0 | The gap between each button. |
| position | 'top-left' \| 'top' \| 'top-right' \| 'bottom-left' \| 'bottom' \| 'bottom-right' | 'top-right' | The position of the range buttons on the chart. |
| spacing | PixelSize | 10 | The spacing between the range buttons and the series area or axis when positioned at the top or bottom, respectively. |
| button | AgRangesButtonStyles |  |  |
| button.cornerRadius | PixelSize |  |  |
| button.padding | PixelSize \| PaddingOptions |  | The padding inside the range buttons. A number applies uniform padding; an object sets each side. |
| button.textColor | CssColor |  |  |
| button.active | AgRangesStateStyles |  |  |
| button.active.textColor | CssColor |  |  |
| button.active.fill | CssColor |  | The colour for filling shapes. |
| button.active.fillOpacity | Opacity |  | The opacity of the fill colour. |
| button.active.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| button.disabled | AgRangesStateStyles |  |  |
| button.disabled.textColor | CssColor |  |  |
| button.disabled.fill | CssColor |  | The colour for filling shapes. |
| button.disabled.fillOpacity | Opacity |  | The opacity of the fill colour. |
| button.disabled.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| button.hover | AgRangesStateStyles |  |  |
| button.hover.textColor | CssColor |  |  |
| button.hover.fill | CssColor |  | The colour for filling shapes. |
| button.hover.fillOpacity | Opacity |  | The opacity of the fill colour. |
| button.hover.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| button.fill | CssColor |  | The colour for filling shapes. |
| button.fillOpacity | Opacity |  | The opacity of the fill colour. |
| button.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| button.fontFamily | FontFamily |  | The font family for text elements. |
| button.fontStyle | FontStyle |  | The style to use for text elements. |
| button.fontWeight | FontWeight |  | The font weight to use for text elements. |
| button.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| button.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| dropdown | AgRangesDropdown |  |  |
| dropdown.visible | 'auto' \| 'always' \| 'never' | 'auto' | When to swap out the range buttons for a dropdown. |
| dropdown.cornerRadius | PixelSize |  |  |
| dropdown.padding | PixelSize \| PaddingOptions |  | The padding inside the range buttons. A number applies uniform padding; an object sets each side. |
| dropdown.textColor | CssColor |  |  |
| dropdown.active | AgRangesStateStyles |  |  |
| dropdown.active.textColor | CssColor |  |  |
| dropdown.active.fill | CssColor |  | The colour for filling shapes. |
| dropdown.active.fillOpacity | Opacity |  | The opacity of the fill colour. |
| dropdown.active.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| dropdown.disabled | AgRangesStateStyles |  |  |
| dropdown.disabled.textColor | CssColor |  |  |
| dropdown.disabled.fill | CssColor |  | The colour for filling shapes. |
| dropdown.disabled.fillOpacity | Opacity |  | The opacity of the fill colour. |
| dropdown.disabled.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| dropdown.hover | AgRangesStateStyles |  |  |
| dropdown.hover.textColor | CssColor |  |  |
| dropdown.hover.fill | CssColor |  | The colour for filling shapes. |
| dropdown.hover.fillOpacity | Opacity |  | The opacity of the fill colour. |
| dropdown.hover.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| dropdown.fill | CssColor |  | The colour for filling shapes. |
| dropdown.fillOpacity | Opacity |  | The opacity of the fill colour. |
| dropdown.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| dropdown.fontFamily | FontFamily |  | The font family for text elements. |
| dropdown.fontStyle | FontStyle |  | The style to use for text elements. |
| dropdown.fontWeight | FontWeight |  | The font weight to use for text elements. |
| dropdown.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| dropdown.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| buttons | AgRangesButton[] |  | The buttons to display. |
| buttons.value (required) | number \| AgRangesButtonValuePair \| AgRangesButtonValueFunction \| AgTimeInterval \| AgTimeIntervalUnit \| undefined |  | Timestamp range on which to focus the chart, as either a single start time, a pair of times or a function that returns a pair of times. |
| buttons.enabled | boolean |  | Set to force this button to be enabled or disabled. |
| buttons.icon | AgIconName |  | Icon to display on the button. |
| buttons.label | string |  | Text label to display on the button. |
| buttons.ariaLabel | string |  | Text label to announce in screen readers. |
| buttons.tooltip | string |  | Tooltip text to display on hover over the button. |
| enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| cornerRadius | PixelSize |  |  |
| padding | PixelSize \| PaddingOptions |  | The padding inside the range buttons. A number applies uniform padding; an object sets each side. |
| textColor | CssColor |  |  |
| active | AgRangesStateStyles |  |  |
| active.textColor | CssColor |  |  |
| active.fill | CssColor |  | The colour for filling shapes. |
| active.fillOpacity | Opacity |  | The opacity of the fill colour. |
| active.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| disabled | AgRangesStateStyles |  |  |
| disabled.textColor | CssColor |  |  |
| disabled.fill | CssColor |  | The colour for filling shapes. |
| disabled.fillOpacity | Opacity |  | The opacity of the fill colour. |
| disabled.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| hover | AgRangesStateStyles |  |  |
| hover.textColor | CssColor |  |  |
| hover.fill | CssColor |  | The colour for filling shapes. |
| hover.fillOpacity | Opacity |  | The opacity of the fill colour. |
| hover.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| fill | CssColor |  | The colour for filling shapes. |
| fillOpacity | Opacity |  | The opacity of the fill colour. |
| fontSize | FontSize |  | The size of the font in pixels for text elements. |
| fontFamily | FontFamily |  | The font family for text elements. |
| fontStyle | FontStyle |  | The style to use for text elements. |
| fontWeight | FontWeight |  | The font weight to use for text elements. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| strokeWidth | PixelSize |  | The width of the stroke in pixels. |