---
title: "Style Segments"
framework: vue
version: "14.1.0"
---

# Style Segments

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

#### Segmentation

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AreaSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-community";
import { data } from "./data";

ModuleRegistry.registerModules([
  AreaSeriesModule,
  LegendModule,
  NumberAxisModule,
  UnitTimeAxisModule,
]);

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgCartesianChartOptions<DataType>>({
      title: { text: "Performance Variance" },
      data,
      series: [
        {
          type: "area",
          yKey: "variance",
          xKey: "date",
          interpolation: {
            type: "smooth",
          },
          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 min until 0
                fill: "red", //used for this segment
                stroke: "red", //used for this segment
              },
            ],
          },
        },
      ],
      axes: {
        x: {
          type: "unit-time",
          paddingOuter: 0,
        },
        y: {
          type: "number",
          title: { text: "Variance ($)" },
        },
      },
    });

    return {
      options,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Segmentation](https://www.ag-grid.com/charts/vue3/style-segments/examples/segmentation)

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

```js
{
    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.

#### Segmentation

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-community";
import { data } from "./data";

ModuleRegistry.registerModules([
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
]);

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgCartesianChartOptions<DataType>>({
      title: { text: "Performance Variance" },
      data,
      series: [
        {
          type: "line",
          xKey: "date",
          yKey: "value",
          xName: "Date",
          yName: "Value",
          interpolation: {
            type: "smooth",
          },
          segmentation: {
            key: "x",
            segments: [
              {
                start: new Date("2025-01-01"),
                lineDash: [5, 10],
              },
            ],
          },
        },
      ],
      axes: {
        x: { type: "unit-time" },
        y: { type: "number" },
      },
    });

    return {
      options,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Segmentation](https://www.ag-grid.com/charts/vue3/style-segments/examples/segmentation-x-direction)

```js
{
    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

#### Segment Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| start | AxisValue |  | The axis value at which the styles should start. This is the start of the axis domain by default. |
| stop | AxisValue |  | The axis value at which the styles should stop. This is the end of the axis domain by default. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| fillOpacity | Opacity |  | The opacity of the fill colour. |