---
title: "Cross Lines"
framework: react
version: "14.1.0"
---

# Cross Lines

Cross Lines are lines or shaded areas in a chart that denote additional information or thresholds, making them useful for data analysis.

## Adding Cross Lines

To add a Cross Line at a specific data value on an axis, use the `crossLines` property in the `axis` options.

A Cross Line can either be a `line` or a `range`, and multiple Cross Lines can be added to a single axis.

#### Adding Cross Lines

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  CategoryAxisModule,
  CrossLinesModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  CategoryAxisModule,
  CrossLinesModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    series: [
      {
        type: "line",
        xKey: "month",
        yKey: "temp",
      },
    ],
    axes: {
      x: {
        type: "category",
        title: {
          text: "Month",
        },
        crossLines: [
          {
            type: "range",
            range: ["Jun", "Sep"],
          },
        ],
      },
      y: {
        type: "number",
        title: {
          text: "Temperature (°C)",
        },
        crossLines: [
          {
            type: "line",
            value: 11,
          },
        ],
      },
    },
  });

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

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

[Live example: Adding Cross Lines](https://www.ag-grid.com/charts/reactFunctionalTs/axes-cross-lines/examples/axis-cross-lines-adding)

```js
{
    axes: {
        y: {
            position: 'left',
            type: 'number',
            crossLines: [
                {
                    type: 'line',
                    value: 11,
                },
            ],
        },
        x: {
            position: 'bottom',
            type: 'category',
            crossLines: [
                {
                    type: 'range',
                    range: ['Jun', 'Sep'],
                },
            ],
        },
    },
}
```

In this configuration:

- A `line` is displayed on the vertical axis at value 11.
- A `range` is displayed on the horizontal axis between June and September.
- The `value` or `range` values should be the same types as those displayed in the axis.

## Customising Cross Lines

#### Customising Cross Lines

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

ModuleRegistry.registerModules([
  CrossLinesModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    series: [
      {
        type: "line",
        xKey: "date",
        yKey: "petrol",
        yName: "Petrol",
      },
      {
        type: "line",
        xKey: "date",
        yKey: "diesel",
        yName: "Diesel",
      },
    ],
    axes: {
      x: {
        type: "unit-time",
        title: {
          text: "Date",
        },
        crossLines: [
          {
            type: "range",
            range: [new Date(2019, 4, 1), new Date(2019, 6, 1)],
            strokeWidth: 0,
            fill: "#7290C4",
            fillOpacity: 0.4,
            label: {
              text: "Price Peak",
              position: "top",
              fontSize: 14,
              fill: "#7290C4",
              fillOpacity: 0.4,
              cornerRadius: 4,
              border: {
                stroke: "#7290C4",
              },
            },
          },
        ],
      },
      y: {
        type: "number",
        title: {
          text: "Price in pence",
        },
        crossLines: [
          {
            type: "line",
            value: 142.45,
            stroke: "#7290C4",
            lineDash: [6, 12],
            label: {
              text: "142.4",
              position: "right",
              fontSize: 12,
              color: "#000000",
            },
          },
          {
            type: "line",
            value: 133.8,
            stroke: "#7290C4",
            lineDash: [6, 12],
            label: {
              text: "133.8",
              position: "right",
              fontSize: 12,
              color: "#01c185",
            },
          },
          {
            type: "line",
            value: 135.35,
            stroke: "#D21E75",
            lineDash: [2, 4],
            label: {
              text: "135.3",
              position: "right",
              fontSize: 12,
              color: "#000000",
            },
          },
          {
            type: "line",
            value: 123.97,
            stroke: "#D21E75",
            lineDash: [2, 4],
            label: {
              text: "124.0",
              position: "right",
              fontSize: 12,
              color: "#01c185",
            },
          },
        ],
      },
    },
  });

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

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

[Live example: Customising Cross Lines](https://www.ag-grid.com/charts/reactFunctionalTs/axes-cross-lines/examples/axis-cross-lines-customising)

```js
{
    crossLines: [
        {
            type: 'range',
            range: [new Date(2019, 4, 1), new Date(2019, 6, 1)],
            strokeWidth: 0,
            fill: '#7290C4',
            fillOpacity: 0.4,
            label: {
                text: 'Price Peak',
                position: 'top',
                fontSize: 14,
            },
        },
    ],
}
```

In this configuration:

- Properties such as `stroke`, `strokeWidth`, and `fill` are used to customise the Cross Line.
- A label is added, customised and positioned in relation to the Cross Line.

## Polar Axes Cross Lines

Cross Lines are also available for Polar Axes. These have the same configuration as the Cartesian Cross Lines.

> **Note**
>
> Polar Cross Lines are not included in `CrossLinesModule`. Register `PolarCrossLinesModule` separately when using [module imports](https://www.ag-grid.com/charts/react/module-registry/).

#### Polar Axis Angle Crosslines

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AngleCategoryAxisModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  PolarCrossLinesModule,
  RadarLineSeriesModule,
  RadiusNumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AngleCategoryAxisModule,
  AnimationModule,
  CrosshairModule,
  PolarCrossLinesModule,
  LegendModule,
  RadarLineSeriesModule,
  RadiusNumberAxisModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "Skill Analysis",
    },
    series: [
      {
        type: "radar-line",
        angleKey: "skill",
        radiusKey: "value",
      },
    ],
    axes: {
      angle: {
        type: "angle-category",
        shape: "circle",
        crossLines: [
          {
            type: "range",
            range: ["Technical Skills", "Communication"],
            label: {
              text: "Valuable Skills",
            },
          },
        ],
      },
      radius: {
        type: "radius-number",
        shape: "circle",
        crossLines: [
          {
            type: "line",
            value: 6,
            stroke: "red",
            label: {
              text: "Minimal\nRequirement",
              positionAngle: 180,
            },
          },
        ],
      },
    },
  });

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

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

[Live example: Polar Axis Angle Crosslines](https://www.ag-grid.com/charts/reactFunctionalTs/axes-cross-lines/examples/polar-axes-crosslines-angle)

```js
{
    axes: {
        angle: {
            type: 'angle-category',
            shape: 'circle',
            crossLines: [
                {
                    type: 'range',
                    range: ['Technical Skills', 'Communication'],
                    label: {
                        text: 'Valuable Skills',
                    },
                },
            ],
        },
        radius: {
            type: 'radius-number',
            shape: 'circle',
            crossLines: [
                {
                    type: 'line',
                    stroke: 'red',
                    value: 6,
                    label: {
                        text: 'Minimal\nRequirement',
                        positionAngle: 180,
                    },
                },
            ],
        },
    },
}
```

## API Reference

#### Line

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'line' |  | Renders the Cross Line as a single line positioned at `value`. |
| value (required) | AxisValue |  | The data value at which the line should be positioned. |
| id | string |  | A user-supplied identifier for the Cross Line, surfaced as `crossLineId` in callback and event params. Defaults to an internally generated identifier. |
| enabled | boolean |  | Whether to show the Cross Line. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour of the stroke for the lines. A colour string, or a theme-colour reference object. |
| strokeWidth | PixelSize |  | The width in pixels of the stroke for the lines. |
| strokeOpacity | Opacity |  | The opacity of the stroke for the lines. |
| lineDash | PixelSize[] |  | Defines how the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels. |
| label | AgBaseCrossLineLabelOptions |  | Configuration for the Cross Line label. |
| label.text | string |  | The text to show in the label. |
| label.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the label. A single family name, or an array of names used as fallbacks. |
| 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.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. |

#### Range

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'range' |  | Renders the Cross Line as a shaded band spanning `range`. |
| range (required) | [AxisValue, AxisValue] |  | The `[start, end]` data values bounding the shaded region. |
| fill | CssColor |  | The colour to use for the fill of the range. |
| fillOpacity | Opacity |  | The opacity of the fill for the range. |
| id | string |  | A user-supplied identifier for the Cross Line, surfaced as `crossLineId` in callback and event params. Defaults to an internally generated identifier. |
| enabled | boolean |  | Whether to show the Cross Line. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour of the stroke for the lines. A colour string, or a theme-colour reference object. |
| strokeWidth | PixelSize |  | The width in pixels of the stroke for the lines. |
| strokeOpacity | Opacity |  | The opacity of the stroke for the lines. |
| lineDash | PixelSize[] |  | Defines how the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels. |
| label | AgBaseCrossLineLabelOptions |  | Configuration for the Cross Line label. |
| label.text | string |  | The text to show in the label. |
| label.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the label. A single family name, or an array of names used as fallbacks. |
| 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.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. |