---
title: "Series Fills"
framework: angular
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
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

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

Supported Fill Types are:

- **Solid Fill**: A single colour. See [Colours](https://www.ag-grid.com/charts/angular/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/angular/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/angular/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
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Gradient Fill](https://www.ag-grid.com/charts/angular/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
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Pattern Fill](https://www.ag-grid.com/charts/angular/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
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Pattern Fill Customisation](https://www.ag-grid.com/charts/angular/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
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Pattern Custom Path](https://www.ag-grid.com/charts/angular/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
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Image Fill](https://www.ag-grid.com/charts/angular/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
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Image Fill Tiling](https://www.ag-grid.com/charts/angular/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. |