---
title: "Series Fills"
framework: javascript
version: "14.1.0"
---

# Series Fills

Series and Markers can have solid, gradient and pattern fills, allowing for unique visual styles and improved contrasts between series.

## Fill Types

#### Fill Types

```ts
import {
  AgBarSeriesOptions,
  AgCartesianChartOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "station",
      yKey: "early",
      yName: "Early",
    },
    {
      type: "bar",
      xKey: "station",
      yKey: "morningPeak",
      yName: "Morning peak",
    },
    {
      type: "bar",
      xKey: "station",
      yKey: "interPeak",
      yName: "Between peak",
    },
    {
      type: "bar",
      xKey: "station",
      yKey: "afternoonPeak",
      yName: "Afternoon peak",
    },
    {
      type: "bar",
      xKey: "station",
      yKey: "evening",
      yName: "Evening",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function defaultFill() {
  (options.series as AgBarSeriesOptions[])?.forEach((series) => {
    series.fill = undefined;
  });

  chart.update(options);
}

function gradientFill() {
  (options.series as AgBarSeriesOptions[])?.forEach((series) => {
    series.fill = {
      type: "gradient",
    };
  });

  chart.update(options);
}

function patternFill() {
  (options.series as AgBarSeriesOptions[])?.forEach((series) => {
    series.fill = {
      type: "pattern",
    };
  });

  chart.update(options);
}

function imageFill() {
  (options.series as AgBarSeriesOptions[])?.forEach((series) => {
    series.fill = {
      type: "image",
      url: "https://www.ag-grid.com/charts/example-assets/docs-images/" + `${series.yKey}.png`,
      backgroundFillOpacity: 0.4,
      width: 30,
      height: 30,
    };
  });

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).defaultFill = defaultFill;
  (<any>window).gradientFill = gradientFill;
  (<any>window).patternFill = patternFill;
  (<any>window).imageFill = imageFill;
}
```

[Live example: Fill Types](https://www.ag-grid.com/charts/typescript/fills/examples/series-fill-types)

Supported Fill Types are:

- **Solid Fill**: A single colour. See [Colours](https://www.ag-grid.com/charts/javascript/colours/) for the accepted colour formats, CSS variables, and theme references.
- **Gradient Fill**: A transition between multiple colours.
- **Pattern Fill**: Predefined patterns including lines and shapes, or a user provided path.
- **Image Fill**: A user provided image.

The default colours and fills come from the default or user provided [Theme Palette](https://www.ag-grid.com/charts/javascript/themes/#palette).

## Setting a Fill

### Series

The `fill` attribute is set at the series level.

Solid fills use a CSS colour string. Gradient and Pattern fills require an object with type `gradient` or `pattern`.

```js
{
    series: [
        {
            // ...
            fill: {
                type: 'gradient',
            },
        },
    ],
}
```

### Markers

[Series Markers](https://www.ag-grid.com/charts/javascript/markers/) support the same fill options. The `fill` attribute is contained in the `marker` property of the `series` options.

```js
{
    series: [
        {
            // ...
            marker: {
                fill: {
                    type: 'gradient',
                },
            },
        },
    ],
}
```

## Gradients

#### Gradient Fill

```ts
import {
  AgBarSeriesOptions,
  AgCartesianChartOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "animal",
      xName: "Animal",
      yKey: "lifespan",
      yName: "Lifespan",
      fill: {
        type: "gradient",
      },
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function defaultGradient() {
  (options.series![0] as AgBarSeriesOptions).fill = {
    type: "gradient",
  };

  chart.update(options);
}

function gradientColorStops() {
  (options.series![0] as AgBarSeriesOptions).fill = {
    type: "gradient",
    colorStops: [
      { color: "#70C1FF", stop: 0.1 },
      { color: "#FFD86F", stop: 0.3 },
      { color: "#FF9A60", stop: 0.5 },
      { color: "#D16BA5" },
    ],
  };

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).defaultGradient = defaultGradient;
  (<any>window).gradientColorStops = gradientColorStops;
}
```

[Live example: Gradient Fill](https://www.ag-grid.com/charts/typescript/fills/examples/gradient-fill)

Gradient `colorStops` define an array of colours for the gradient to use.

The array should contain a minimum of two objects, with each object providing optional values for:

- `color`: Any valid CSS colour value.
- `stop`: A ratio between `0` and `1` indicating the position within the gradient where the colour changes.

```js
{
    series: [
        {
            fill: {
                type: 'gradient',
                colorStops: [
                    { color: '#70C1FF', stop: 0.1 },
                    { color: '#FFD86F', stop: 0.3 },
                    { color: '#FF9A60', stop: 0.5 },
                    { color: '#D16BA5' }, //will continue to the end
                ],
            },
        },
    ],
}
```

In this configuration:

- Each colour stops at the `stop` value, and the next colour begins at that point.
- If no `stop` is provided, the fills will be distributed equally.
- The last colour is used until the end of the gradient scale.

See the [Gradient API reference](#reference-AgGradientColor) for all the available options.

## Patterns

### Predefined

#### Pattern Fill

```ts
import {
  AgCharts,
  AgPolarChartOptions,
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([LegendModule, PieSeriesModule]);

const options: AgPolarChartOptions = {
  data: getData(),
  series: [
    {
      type: "pie",
      angleKey: "value",
      radiusKey: "radius",
      legendItemKey: "name",
      strokeWidth: 1,
      fills: [
        {
          type: "pattern",
          pattern: "diamonds",
        },
        {
          type: "pattern",
          pattern: "hearts",
        },
        {
          type: "pattern",
          pattern: "squares",
        },
        {
          type: "pattern",
          pattern: "triangles",
        },
        {
          type: "pattern",
          pattern: "stars",
        },
      ],
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Pattern Fill](https://www.ag-grid.com/charts/typescript/fills/examples/pattern-fill)

Any of the [stock patterns](#reference-AgPatternColor-pattern) can be provided in the `fill.pattern` property.

```js
{
    series: [
        {
            fill: {
                type: 'pattern',
                pattern: 'stars',
            },
        },
    ],
}
```

Stock patterns include:

- Lines: `vertical-lines`, `horizontal-lines`, `forward-slanted-lines`, `backward-slanted-lines`.
- Shapes: `squares`, `circles`, `triangles`, `diamonds`, `stars`, `hearts`, `crosses`.

#### Pattern Fill Customisation

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  BubbleSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BubbleSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  seriesArea: {
    padding: {
      right: 30,
      top: 30,
    },
  },
  series: [
    {
      type: "bubble",
      xKey: "weight",
      xName: "Weight",
      yKey: "lifespan",
      yName: "lifespan",
      sizeKey: "weight",
      sizeName: "Weight",
      labelKey: "animal",
      fill: {
        type: "pattern",
        pattern: "stars",
        fill: "#6A4C93",
        backgroundFill: "#B8A0D2",
        backgroundFillOpacity: 0.5,
        stroke: "white",
        strokeWidth: 1,
      },
      maxSize: 70,
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Pattern Fill Customisation](https://www.ag-grid.com/charts/typescript/fills/examples/pattern-fill-customisation)

Use styling properties such as `stroke`, `fill` and `backgroundFill` to further customise the patterns.

### Path

SVG Path Data can be used to create custom patterns. The path can be a line or a shape.

#### Pattern Custom Path

```ts
import {
  AgAreaSeriesOptions,
  AgCartesianChartOptions,
  AgCharts,
  AreaSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

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

const options: AgCartesianChartOptions = {
  data: getData(),
  title: {
    text: "Streaming Music Sales",
  },
  subtitle: {
    text: "IN BILLIONS USD",
  },
  series: [
    {
      type: "area",
      xKey: "date",
      yKey: "sales",
      yName: "Sales",
      strokeWidth: 1,
      fill: {
        type: "pattern",
        path: "M0,6 Q4,1 8,6 T16,6",
        width: 16,
        height: 10,
        strokeWidth: 1,
        fill: "none",
      },
    },
  ],
  axes: {
    x: {
      type: "unit-time",
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function line() {
  (options.series![0] as AgAreaSeriesOptions).fill = {
    type: "pattern",
    path: "M0,6 Q4,1 8,6 T16,6",
    width: 16,
    height: 10,
    strokeWidth: 1,
    fill: "none",
  };

  chart.update(options);
}

function shape() {
  (options.series![0] as AgAreaSeriesOptions).fill = {
    type: "pattern",
    path: "M7.83985 3.88382V16.6592C7.09646 15.9961 6.11687 15.5923 5.04461 15.5923C2.72664 15.5923 0.84082 17.4782 0.84082 19.7962C0.84082 22.1142 2.72664 24 5.04461 24C7.35971 24 9.24357 22.1189 9.24835 19.8049H9.24845V9.53787L21.7527 6.36814V13.2679C21.0093 12.6048 20.0297 12.201 18.9575 12.201C16.6394 12.201 14.7536 14.0868 14.7536 16.4048C14.7536 18.7228 16.6394 20.6086 18.9575 20.6086C21.2754 20.6086 23.1612 18.7228 23.1612 16.4048V0L7.83985 3.88382Z",
    width: 24,
    height: 24,
    strokeWidth: 0,
  };

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).line = line;
  (<any>window).shape = shape;
}
```

[Live example: Pattern Custom Path](https://www.ag-grid.com/charts/typescript/fills/examples/pattern-custom-path)

- To remove the stroke, set `strokeWidth` to `0`
- To remove the fill, set `fill` to `none`.

```js
{
    series: [
        {
            fill: {
                type: 'pattern',
                path: 'M0,6 Q4,1 8,6 T16,6', // svg path data string
            },
        },
    ],
}
```

- In the snippet above, the string in the `fill.path` property is an SVG path.
- It is the value of the `d` attribute on the SVG <path>, in the SVG element shown below.

```html
<svg viewBox="0 0 16 10">
    <path d="M0,6 Q4,1 8,6 T16,6" />
</svg>
```

For detailed SVG Path Data syntax, refer to the [SVG Path Specification](https://www.w3.org/TR/SVG/paths.html#TheDProperty).

To be valid, the path string must follow the SVG path grammar outlined in the [Path Data BNF](https://www.w3.org/TR/SVG/paths.html#PathDataBNF).

## Images

Any image url or data:url can be provided in the `fill.url` property to fill shapes with an image.

```js
{
    series: [
        {
            fill: {
                type: 'image',
                url: 'url',
            },
        },
    ],
}
```

Additional configuration options include `fit`, `width`, `height` and `repeat`.

The `backgroundFill` and `backgroundFillOpacity` properties provide a fallback if the image fails to load. These options are also used in any empty space if the image doesn’t fully cover the shape.

### Image Fit

#### Image Fill

```ts
import {
  AgBarSeriesOptions,
  AgCartesianChartOptions,
  AgCharts,
  AgImageFill,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

const data = getData();
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions = {
  data,
  title: {
    text: "Journey Time by Transport Mode",
  },
  series: [
    {
      type: "bar",
      xKey: "mode",
      yKey: "timeToDestination",
      fill: {
        type: "image",
        url: "https://www.ag-grid.com/charts/example-assets/docs-images/map.png",
      },
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function contain() {
  const series = options.series![0] as AgBarSeriesOptions;
  series.fill = {
    ...(series.fill as AgImageFill),
    fit: "contain",
  };

  chart.update(options);
}

function cover() {
  const series = options.series![0] as AgBarSeriesOptions;
  series.fill = {
    ...(series.fill as AgImageFill),
    fit: "cover",
  };

  chart.update(options);
}

function stretch() {
  const series = options.series![0] as AgBarSeriesOptions;
  series.fill = {
    ...(series.fill as AgImageFill),
    fit: "stretch",
  };

  chart.update(options);
}

function none() {
  const series = options.series![0] as AgBarSeriesOptions;
  series.fill = {
    ...(series.fill as AgImageFill),
    fit: "none",
  };

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).contain = contain;
  (<any>window).cover = cover;
  (<any>window).stretch = stretch;
  (<any>window).none = none;
}
```

[Live example: Image Fill](https://www.ag-grid.com/charts/typescript/fills/examples/image-fill)

`image.fit` controls how the image is scaled within the shape. In the example above:

- **Contain**: Scales the image to fit entirely within the shape area without cropping, preserving the aspect ratio of the image. This may leave empty space in one dimension.
- **Cover**: Scales the image to cover the shape area, potentially cropping parts of the image if the aspect ratios don’t match.
- **Stretch**: Stretches the image to fill the shape area, ignoring the original aspect ratio, this can distort the image.
- **None**: Displays the image at its original size and resolution, without any scaling. The image may be clipped depending on the shape size.

### Image Tiling

Images can be tiled by using the `repeat` property.

```js
{
    series: [
        {
            fill: {
                type: 'image',
                url: 'url',
                repeat: 'repeat-x',
            },
        },
    ],
}
```

#### Image Fill Tiling

```ts
import {
  AgCharts,
  AgColorRepeat,
  AgDonutSeriesOptions,
  AgImageFill,
  AgPolarChartOptions,
  DonutSeriesModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-community";
import { getData } from "./data";

const data = getData();
ModuleRegistry.registerModules([DonutSeriesModule, LegendModule]);

const options: AgPolarChartOptions = {
  data,
  title: {
    text: "A City in Motion: How Londoners Commute",
  },
  series: [
    {
      type: "donut",
      angleKey: "percent",
      innerRadiusRatio: 0.2,
      legendItemKey: "mode",
      fills: data.map(({ mode }) => {
        return {
          type: "image",
          url:
            "https://www.ag-grid.com/charts/example-assets/docs-images/" +
            `${mode.toLowerCase()}.png`,
          width: 20,
          height: 20,
          repeat: "no-repeat", // Default
        };
      }),
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function repeat(type: AgColorRepeat) {
  const series = options.series![0] as AgDonutSeriesOptions;
  series.fills = series.fills?.map((fill) => ({
    ...(fill as AgImageFill),
    repeat: type,
  }));

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).repeat = repeat;
}
```

[Live example: Image Fill Tiling](https://www.ag-grid.com/charts/typescript/fills/examples/image-fill-tiling)

See the [Image API reference](#reference-AgImageFill) all the available options.

## API Reference

#### Gradient Fill

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'gradient' |  |  |
| colorStops | AgGradientColorStop[] |  | Represents the position and color of stops in the gradient. |
| colorStops.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | Colour of this category. |
| colorStops.stop | Ratio |  | Stop value of this category. Defaults the maximum value if unset. |
| rotation | number |  | The rotation angle of the line along which the gradient is rendered. |

#### Pattern Fill

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'pattern' |  |  |
| pattern | AgPatternName |  | The stock pattern to apply. |
| path | string |  | The svg path for a custom pattern |
| width | number |  | Width of the pattern unit. |
| height | number |  | Height of the pattern unit. |
| rotation | number |  | The rotation angle of the pattern. |
| scale | number |  | The scaling of the pattern. |
| fill | CssColor |  | The colour for filling closed shapes in the pattern. |
| fillOpacity | Opacity |  | The opacity of the shapes fill colour. |
| backgroundFill | CssColor |  | The colour for filling the background in the pattern. |
| backgroundFillOpacity | Opacity |  | The opacity of the background fill colour. |
| stroke | CssColor |  | The colour for the strokes of shapes in the pattern. |
| strokeOpacity | Opacity |  | The opacity of the shapes stroke colour. |
| strokeWidth | PixelSize |  | The width of the stroke of shapes in pixels. |

#### Image Fill

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'image' |  |  |
| url (required) | string |  | URL of the image. |
| backgroundFill | CssColor |  | The colour for filling the background in the pattern. |
| backgroundFillOpacity | Opacity |  | The colour for filling the background in the pattern. |
| width | number |  | Height of the image. |
| height | number |  | Width of the image. |
| repeat | 'repeat' \| 'repeat-x' \| 'repeat-y' \| 'no-repeat' |  | A string indicating how to repeat the pattern's unit. |
| fit | 'stretch' \| 'cover' \| 'contain' \| 'none' |  | The fit mode of the image. |
| rotation | number |  | The rotation angle of the image. |