---
title: "Range Controls"
enterprise: true
framework: react
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

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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 },
  });

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

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

[Live example: Range Controls](https://www.ag-grid.com/charts/reactFunctionalTs/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/react/zoom/) and [Navigator](https://www.ag-grid.com/charts/react/navigator/) for a complete navigation experience.
- Financial Charts also include range controls - see [Financial Charts - Range Buttons](https://www.ag-grid.com/charts/react/range-buttons/).

## Position

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

#### Position

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgRangesPosition,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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",
    },
  });

  const changePosition = (position: AgRangesPosition) => {
    const nextOptions = clone(options);

    nextOptions.ranges = {
      ...nextOptions.ranges,
      position,
    };

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label>Position:</label>
          <select onChange={(event) => changePosition(event.target.value)}>
            <option value="top-left">Top Left</option>
            <option value="top">Top</option>
            <option value="top-right">Top Right</option>
            <option value="bottom-left">Bottom Left</option>
            <option value="bottom">Bottom</option>
            <option value="bottom-right">Bottom Right</option>
          </select>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Position](https://www.ag-grid.com/charts/reactFunctionalTs/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

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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 },
      ],
    },
  });

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

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

[Live example: Custom Buttons](https://www.ag-grid.com/charts/reactFunctionalTs/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

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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 },
      ],
    },
  });

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

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

[Live example: Calendar Intervals](https://www.ag-grid.com/charts/reactFunctionalTs/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/react/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

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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 },
  });

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

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

[Live example: Window-Relative Functions](https://www.ag-grid.com/charts/reactFunctionalTs/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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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,
    },
  });

  const toggleOutOfRange = (enabled: boolean) => {
    const nextOptions = clone(options);

    nextOptions.ranges = {
      ...nextOptions.ranges,
      enableOutOfRange: enabled,
    };

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label>Enable Out of Range:</label>
          <button onClick={() => toggleOutOfRange(true)}>True</button>
          <button onClick={() => toggleOutOfRange(false)}>
            False (default)
          </button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

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

[Live example: Out-of-Range Buttons](https://www.ag-grid.com/charts/reactFunctionalTs/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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";
import "./styles.css";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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 },
  });

  const changeDropdown = (visible: "auto" | "always" | "never") => {
    const nextOptions = clone(options);

    nextOptions.ranges = {
      ...nextOptions.ranges,
      dropdown: { visible },
    };

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label>Dropdown:</label>
          <select onChange={(event) => changeDropdown(event.target.value)}>
            <option value="auto">Auto</option>
            <option value="always">Always</option>
            <option value="never">Never</option>
          </select>
        </div>
      </div>
      <div className="resizable-container">
        <AgCharts options={options} className="resizable" />
      </div>
    </Fragment>
  );
};

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

[Live example: Responsive Dropdown](https://www.ag-grid.com/charts/reactFunctionalTs/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

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  RangesModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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,
    },
  });

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

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

[Live example: Styling](https://www.ag-grid.com/charts/reactFunctionalTs/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. |