React ChartsCross 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 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: [
        {
            position: 'left',
            type: 'number',
            crossLines: [
                {
                    type: 'line',
                    value: 11,
                },
            ],
        },
        {
            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.

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

API Reference Copy Link