Getting started

Setup

Tutorials

Security & Compatibility

Core features

Data

Axes

Data Elements

Interactivity

Layout & Styling

Specialised Charts

Financial Charts

Maps

Series

Gauges

Style Segments allow customising the style of a series for defined ranges along an axis, making it easier to highlight thresholds, distinguish data ranges, or separate actual and predicted values.

Segmentation

Angular Example - Style Segments - Segmentation

Hide filesViewing: app.component.ts

The segmentation option takes a key to determine which axis to use, and a segments array for the styles.

{
    series: [
        {
            type: 'area',
            yKey: 'variance',
            xKey: 'date',
            strokeWidth: 2,
            fillOpacity: 0.3,
            fill: 'green', //used for the series
            stroke: 'green', //used for the series
            segmentation: {
                key: 'y', //segment along the y-axis
                segments: [
                    {
                        stop: 0, //domain minimum until 0
                        fill: 'red', //used for this segment
                        stroke: 'red', //used for this segment
                    },
                ],
            },
        },
    ],
}

In this configuration:

• The series fill and stroke are red when values fall below 0 on the y-axis.
• The series fill and stroke are green when values are above 0 on the y-axis.
• Properties fillOpacity and strokeWidth not specified in the segment are inherited from the series.

Segmentation Key

Set segmentation.key: 'x' to segment along the xKey axis, or segmentation.key: 'y' to segment along the yKey axis.

Angular Example - Style Segments - Segmentation X Direction

Hide filesViewing: app.component.ts

{
    series: [
        {
            type: 'line',
            xKey: 'date',
            yKey: 'value',
            segmentation: {
                key: 'x',
                segments: [
                    {
                        start: new Date('2025-01-01'),
                        lineDash: [5, 10],
                    },
                ],
            },
        },
    ],
}

In the example above:

• The series uses a solid stroke for 2024 and a dashed stroke for 2025 to distinguish actual and forecast data.

Segments

Each segment in the segments array is defined by bounds and provides style overrides:

• start / stop

  • The axis range for the segment style to start and stop at.
  • Omit start to begin at the axis minimum or the stop of the previous segment.
  • Omit stop to end at the axis maximum or the start of the next segment.

• Style properties

  • These are the same styling keys available on the series, such as stroke and fill.
  • Unspecified properties fall back to the main series options or defaults.

API Reference

Properties available on the AgSeriesShapeSegmentOptions interface.

• start: The axis value at which the styles should start. This is the start of the axis domain by default.
• stop: The axis value at which the styles should stop. This is the end of the axis domain by default.
• stroke: The colour for the stroke.
• strokeWidth: The width of the stroke in pixels.
• strokeOpacity: The opacity of the stroke colour.
• lineDash: An array specifying the length in pixels of alternating dashes and gaps.
• lineDashOffset: The initial offset of the dashed line in pixels.
• fill: The colour for filling shapes.
• fillOpacity: The opacity of the fill colour.