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

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.

• Image Fill: An image.

The default colours and fills come from the default or user provided Theme Palette.

Setting a Fill Copy

Series Copy

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

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'
        },
    },
]

Customisation Copy

Gradients Copy

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

Predefined Copy

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

SVG Path Data can be used to create custom patterns.

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

• In the snippet above, the value of the d attribute on the SVG <path> element is M4,6 Q8,1 12,6 T20,6.
• It defines the shape of the path and can be used as a string in the fill.path property:

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

For detailed SVG Path Data syntax, refer to the SVG Path Specification.

A path consists of multiple segments defined by various commands. Each command (except moveto and closepath) creates a new path segment. All coordinates and lengths in the path data are interpreted in user units relative to the current coordinate system.

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

Line Drawing Commands:

• L, l — Lineto (absolute and relative)
• H, h — Horizontal lineto
• V, v — Vertical lineto
• Z, z — Close path

Cubic Bézier Curve Drawing Commands:

• C, c — Specify two control points and an endpoint
• S, s — Smooth cubic Bézier, uses the reflection of the previous control point

Quadratic Bézier Curve Drawing Commands:

• Q, q — Specify one control point and an endpoint
• T, t — Smooth quadratic Bézier, uses the reflection of the previous control point

Elliptical Arc Drawing Commands:

• A, a — Draws an elliptical arc segment

Images Copy

Any image url or data:url can be provided in the fill.image.url property.

{
    series: {
        fill: {
            type: 'image',
            url: 'url'
        },
    },
}

See the Image API reference all the available options.

API Reference Copy