Vue ChartsSeries Fills

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

Fill Types Copy Link

Supported Fill Types are:

Solid Fill: A single CSS colour (provided as a #rgb hex code, rgb() or rgba() values, or a CSS colour name such as 'black').
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.

Setting a Fill Copy Link

Series Copy Link

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.

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

Markers Copy Link

Series Markers support the same fill options. The fill attribute is contained in the marker property of the series options.

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

Gradients Copy Link

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.

{
    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 for all the available options.

Patterns Copy Link

Predefined Copy Link

Any of the stock patterns can be provided in the fill.pattern property.

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

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

Path Copy Link

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

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

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

<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.

To be valid, the path string must follow the SVG path grammar outlined in the Path Data BNF.

Images Copy Link

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

{
    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 Copy Link

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 Copy Link

Images can be tiled by using the repeat property.

{
    series: {
        fill: {
            type: 'image',
            url: 'url',
            repeat: 'repeat-x'
        },
    },
}

See the Image API reference all the available options.

Getting started

Core features

Specialised Charts

Series

Gauges