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()
orrgba()
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: An 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 between0
and1
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
to0
- To remove the fill, set
fill
tonone
.
{
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.