Search

React ChartsSeries Fills

AG Charts supports fill gradients and fill patterns, providing additional customisation for series and markers.

Fill Types Copy

Supported Fill Types include:

  • Solid Fill: A single CSS colour (#rgb, #rrggbb, rgb(r, g, b), rgba(r, g, b, a), CSS colour name such as 'white', 'orange', 'cyan', etc.)

  • Gradient Fill: A transition between multiple colours.

  • Pattern Fill: Predefined patterns including lines and shapes.

Customisation Copy

Configuring Series Fill Copy

The fill attribute is set at the series level. Solid fills use a CSS colour string. Gradients and patterns require an object with type gradient or pattern.

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

Configuring Marker Fills Copy

Markers in series such as line and area support the same fill options as series.

The fill attribute is contained in the marker property of the series options.

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

The legend item marker can be modified within the Legend Options.

Gradients Copy

Gradient colorStops define an array of colours that transition from one colour to another.

The array should contain a minimum of two objects, each object can define:

  • color: Any valid CSS colour value e.g., red, #ff0000, or rgb(255,0,0).
  • stop: A ratio between 0 and 1 indicating the position of the colour along the gradient. 0 is the start of the gradient, and 1 is the end of the gradient.
{
    series: {
        fill: {
            type: 'gradient',
            colorStops: [
                { color: '#A9D4E6', stop: 0 },
                { color: '#5D7FAF', stop: 0.5 },
                { color: '#6A8FD8' }
            ]
        },
    },
}

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.

Please see the Gradient API reference for the list of all available options.

Patterns Copy

The following predefined patterns are available:

  • vertical-lines
  • horizontal-lines
  • forward-slanted-lines
  • backward-slanted-lines
  • squares
  • circles
  • triangles
  • diamonds
  • stars
  • hearts
  • crosses

These can be applied using the fill.pattern property.

{
    series: {
        fill: {
            type: 'pattern',
            pattern: 'stars'
        },
    },
}

Styling properties such as stroke, strokeWidth, backgroundFill and fillOpacity can be used to further customise the patterns.

Please see the Pattern API reference for the list of all available options.

API Reference Copy