AG Charts accepts standard CSS colour strings, CSS variables, and theme parameter references anywhere a colour is set. Richer gradient, pattern and image fills are available on fill properties.
Colour Formats Copy Link
Any colour string accepted by CSS can be used wherever a colour is set, including series fills, strokes, text colours, and theme parameters.
| Format | Example |
|---|---|
| Hex | '#4878d0', '#48d', '#4878d0cc' (with alpha) |
| rgb / rgba | 'rgb(72, 120, 208)', 'rgba(72, 120, 208, 0.8)' |
| hsl / hsla | 'hsl(145, 63%, 42%)', 'hsl(145 63% 42% / 0.8)' |
| Named colour | 'mediumpurple' (any CSS named colour) |
CSS Variables Copy Link
CSS variables can be used anywhere a colour is accepted. These are referenced as var(--brand-primary).
{
theme: {
params: {
backgroundColor: 'var(--demo-bg)',
foregroundColor: 'var(--demo-fg)',
},
},
series: [
{ type: 'bar', xKey: 'month', yKey: 'online', fill: 'var(--demo-online)' },
{ type: 'bar', xKey: 'month', yKey: 'retail', fill: 'var(--demo-retail)' },
],
}In the above example:
- Click the button to change the CSS variables only and the series, background, axes and text all update.
- The chart re-renders automatically whenever a variable changes. There is no need to call
chart.update().
The --ag-charts-* namespace is reserved for internal use.
Theme Parameter References Copy Link
A colour can reference a theme parameter instead of a literal value, keeping related colours in sync.
{
theme: {
params: {
accentColor: '#2f6df0',
backgroundColor: '#ffffff',
foregroundColor: { ref: 'accentColor', mix: 0.85, onto: 'backgroundColor' },
axisLineColor: { ref: 'accentColor', mix: 0.5 },
},
},
series: [{ type: 'bar', xKey: 'month', yKey: 'revenue', fill: { ref: 'accentColor' } }],
}The reference forms are:
{ ref: 'accentColor' }- resolve to another theme parameter.{ ref: 'accentColor', mix: 0.5 }- the referenced parameter atmixopacity (0fully transparent,1fully opaque).{ ref: 'accentColor', mix: 0.85, onto: 'backgroundColor' }- blend one parameter onto another.
A reference can be used anywhere a colour is accepted, but can only point to a theme parameter.
See Themes for more details.
Gradient, Pattern & Image Fills Copy Link
Most fill properties also accept gradient, pattern, and image fills. See Series Fills for the full reference.