AG Studio Launch Week 🚀🚀🚀 28 Sep - 2 Oct 2026 🚀🚀🚀 Join now
AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
Skills
Core features
Specialised Charts
Org ChartQuadrant Chart
Series
BarLineAreaScatterBubblePieDonutCombinationBox PlotCandlestickOHLCHeatmapHistogramNightingaleRadar AreaRadar LineRadial BarRadial ColumnRange AreaRange BarWaterfallSunburstTreemapSankeyChordFunnelCone FunnelPyramid
Gauges
Radial GaugeLinear Gauge

JavaScript ChartsCross Lines

Version 14.2.0

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 Copy Link

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.

 
{
    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 Copy Link 

{
    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 Copy Link

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

Polar Cross Lines are not included in CrossLinesModule. Register PolarCrossLinesModule separately when using module imports.

 
{
    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 Copy Link

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 AgCssColorOrRef
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.
listeners AgCrossLineListeners
A map of event names to listeners.
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 AgCssColorOrRef
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.
listeners AgCrossLineListeners
A map of event names to listeners.