Stripline in React Chart

Striplines are horizontal or vertical bands in charts that highlight specific regions or intervals to emphasize important data points or ranges. They're commonly used to indicate target ranges, thresholds, or to visually separate different sections of a chart.

Horizontal striplines

A horizontal stripline is a visual element used in charts to highlight or mark a specific range or threshold along the vertical axis using the ChartStripLines component. It resembles a band or line drawn horizontally across the chart to emphasize a particular value or region. Striplines are rendered within the defined start-to-end range, and multiple striplines can be added to a single axis.

Vertical striplines

A vertical stripline is a visual element used in charts to highlight or mark a specific range or threshold along the horizontal axis using the ChartStripLines component. It appears as a vertical band or line across the chart to emphasize a particular value or region. Striplines are rendered within the defined start-to-end range, and multiple striplines can be added to a single axis.

Stripline recurrence

When a stripline is set to repeat, it creates evenly spaced regions across the chart, making patterns or recurring intervals easy to identify. This can be achieved by configuring the range and repeat properties in the ChartStripLines component.

Customize the stripline text

You can enhance the appearance and positioning of stripline text in charts using the following properties:

Text Styling Properties

• color – Sets the color of the stripline text.

• fontSize – Defines the font size of the stripline text.

• fontWeight – Determines the thickness of the text (e.g., Normal, Bold, 600, 700).

• fontFamily – Specifies the font type (e.g., Arial, Roboto, Times New Roman).

• fontStyle – Applies custom styling to the stripline text, including italic, normal, or oblique.

• opacity – Adjusts the transparency level of the stripline text.

Text Positioning Properties

• hAlign – Aligns the text horizontally within the stripline region (Left, Center, Right).

• vAlign – Aligns the text vertically within the stripline region (Top, Center, Bottom).

• rotation – Rotates the stripline text by a specified degree to match the chart’s layout or direction.