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.
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
orrange
values should be the same types as those displayed in the axis.
Customising Cross Lines
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
, andfill
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.
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
The data value at which the line should be positioned. This property is used if the Cross Line type is line
.
The range of values from the data used to display lines at a desired chart region. This property is only used for Cross Line type range
.
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.