React ChartsCross Lines

Cross lines are lines or shaded areas in a chart that can highlight important information like trends and thresholds, making them useful for data analysis.

Adding Cross Lines

To add a cross line at a specific data value on an axis, you need to specify the crossLines property on the axis options object:

`crossLines`

AgCrossLineOptions[]

Add cross lines or regions corresponding to data values.

crossLines: AgCrossLineOptions[];

interface AgCrossLineOptions {
  // Whether or not to show the cross line. 
  enabled?: boolean;
  // Type of cross line to render. 
  type: 'line' | 'range';
  // The data value at which the line should be positioned. This property is used if the crossLine type is `line`. 
  value?: DataValue;
  // The range of values from the data used to display lines at a desired chart region. This property is only used for crossLine type `range`. 
  range?: [ DataValue, DataValue ];
  // The colour to use for the fill of the range. 
  fill?: CssColor;
  // The opacity of the fill for the range. 
  fillOpacity?: Opacity;
  // The colour of the stroke for the lines. 
  stroke?: CssColor;
  // The width in pixels of the stroke for the lines. 
  strokeWidth?: PixelSize;
  // The opacity of the stroke for the lines. 
  strokeOpacity?: Opacity;
  // 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. 
  lineDash?: PixelSize[];
  // Configuration for the crossLine label. 
  label?: AgCrossLineLabelOptions;
}

interface AgCrossLineLabelOptions {
  // Whether or not to show the cross line label. 
  enabled?: boolean;
  // The text to show in the label. 
  text?: string;
  // The font style to use for the label. 
  fontStyle?: FontStyle;
  // The font weight to use for the label. 
  fontWeight?: FontWeight;
  // The font size in pixels to use for the label. 
  fontSize?: FontSize;
  // The font family to use for the label. 
  fontFamily?: FontFamily;
  // Padding in pixels between the label and the edge of the crossLine. 
  padding?: PixelSize;
  // The colour to use for the label. 
  color?: CssColor;
  // The position of the crossLine label. 
  position?: AgCrossLineLabelPosition;
  // The rotation of the crossLine label in degrees. 
  rotation?: number;
}

The following snippet shows how to add a horizontal cross line:

axes: [
	{
		position: 'left',
		type: 'number',
		crossLines: [
			{
				type: 'line',
				value: 11
			}
		]
	}
]

To create a region on a chart between two lines, set the type of cross line to range, and provide an array with the two data values that define the region as shown below:

axes: [
	{
		position: 'bottom',
		type: 'category',
		crossLines: [
			{
				type: 'range',
				range: ['Jun', 'Sep']
			}
		]
	}
]

The following example demonstrates these configurations:

Example: Adding Cross Lines

Customising Cross Lines

The properties such as stroke, strokeWidth, and fill can be customised by using AgCrossLineOptions. Additionally, a label can be added and positioned in relation to the cross line, as shown below:

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,
        },
    }
]

The example below demonstrates these configurations, note the following:

Data values can be numbers or categories such as String values or Date objects in accordance with values provided in the chart data.
The left Y axis has cross lines with type line, so the value property on each cross lines options object is used to position the lines on the chart.
The bottom X axis has a cross line of type range; the range property is used to configure the range of the cross line boundaries.

Example: Customising Cross Lines