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.
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
LegendModule,
ModuleRegistry,
PieSeriesModule,
} from "ag-charts-community";
ModuleRegistry.registerModules([PieSeriesModule, LegendModule]);
const ChartExample = defineComponent({
template: `
<ag-charts
:options="options"
/>
`,
components: {
"ag-charts": AgCharts,
},
setup(props) {
const options = ref<AgChartOptions>({
title: {
text: "Colour Formats",
},
data: [
{ format: "#4878d0", value: 30 },
{ format: "rgb(238, 133, 75)", value: 25 },
{ format: "hsl(145, 63%, 42%)", value: 25 },
{ format: "oklch(70% 0.15 200)", value: 20 },
{ format: "mediumpurple", value: 20 },
],
series: [
{
type: "pie",
angleKey: "value",
legendItemKey: "format",
// Each slice is filled with the colour named by its legend label.
fills: [
"#4878d0", // hex
"rgb(238, 133, 75)", // rgb
"hsl(145, 63%, 42%)", // hsl
"oklch(70% 0.15 200)", // oklch
"mediumpurple", // named colour
],
strokeWidth: 0,
},
],
legend: {
position: "right",
},
});
return {
options,
};
},
});
createApp(ChartExample).mount("#app");
| 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).
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
BarSeriesModule,
CategoryAxisModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";
const dawn = {
"--demo-bg": "#fffdf7",
"--demo-fg": "#3a2e2e",
"--demo-online": "#e07a5f",
"--demo-retail": "#3d405b",
};
const dusk = {
"--demo-bg": "#161b22",
"--demo-fg": "#e6edf3",
"--demo-online": "#58a6ff",
"--demo-retail": "#ff7b72",
};
function applyPalette(palette) {
for (const [name, value] of Object.entries(palette)) {
document.documentElement.style.setProperty(name, value);
}
}
let dark = false;
ModuleRegistry.registerModules([
BarSeriesModule,
CategoryAxisModule,
NumberAxisModule,
LegendModule,
]);
const ChartExample = defineComponent({
template: `
<div class="example-controls">
<div class="controls-row">
<button v-on:click="togglePalette()">Toggle palette</button>
</div>
</div>
<ag-charts
:options="options"
/>
`,
components: {
"ag-charts": AgCharts,
},
setup(props) {
const options = ref<AgCartesianChartOptions>({
theme: {
params: {
backgroundColor: "var(--demo-bg)",
foregroundColor: "var(--demo-fg)",
},
},
title: {
text: "Monthly Revenue",
},
data: [
{ month: "Jan", online: 120, retail: 90 },
{ month: "Feb", online: 150, retail: 100 },
{ month: "Mar", online: 180, retail: 130 },
{ month: "Apr", online: 140, retail: 120 },
{ month: "May", online: 210, retail: 160 },
{ month: "Jun", online: 190, retail: 150 },
],
series: [
{
type: "bar",
xKey: "month",
yKey: "online",
yName: "Online",
fill: "var(--demo-online)",
},
{
type: "bar",
xKey: "month",
yKey: "retail",
yName: "Retail",
fill: "var(--demo-retail)",
},
],
axes: {
x: { type: "category", position: "bottom" },
y: { type: "number", position: "left" },
},
});
const togglePalette = () => {
dark = !dark;
applyPalette(dark ? dusk : dawn);
};
return {
options,
togglePalette,
};
},
});
createApp(ChartExample).mount("#app");
:root {
--demo-bg: #fffdf7;
--demo-fg: #3a2e2e;
--demo-online: #e07a5f;
--demo-retail: #3d405b;
}
{
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.
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
BarSeriesModule,
CategoryAxisModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";
let accentColor = "#2f6df0";
let backgroundColor = "#ffffff";
let mix = 0.85;
ModuleRegistry.registerModules([
BarSeriesModule,
CategoryAxisModule,
NumberAxisModule,
LegendModule,
]);
const ChartExample = defineComponent({
template: `
<div class="example-controls">
<div class="controls-row">
<div class="gap-right">
<label for="accent-select">accentColor:</label>
<select id="accent-select" v-on:change="changeAccent($event)">
<option value="#2f6df0">Blue</option>
<option value="#d1495b">Red</option>
<option value="#21b372">Green</option>
<option value="#8a4fff">Purple</option>
</select>
</div>
<div class="gap-right">
<label for="bg-select">backgroundColor:</label>
<select id="bg-select" v-on:change="changeBackground($event)">
<option value="#ffffff">White</option>
<option value="#10131a">Midnight</option>
<option value="#fff1e5">Paper</option>
</select>
</div>
<div>
<label for="mix-range">mix: <span id="mix-value">0.85</span></label>
<input id="mix-range" type="range" min="0" max="1" step="0.05" value="0.85" v-on:input="changeMix($event)">
</div>
</div>
</div>
<ag-charts
:options="options"
/>
`,
components: {
"ag-charts": AgCharts,
},
setup(props) {
const options = ref<AgCartesianChartOptions>({
theme: {
params: {
accentColor,
backgroundColor,
// Text and axes are derived from the accent and background colours.
foregroundColor: { ref: "accentColor", mix, onto: "backgroundColor" },
axisLineColor: { ref: "accentColor", mix: 0.5 },
},
},
title: {
text: "Monthly Revenue",
},
data: [
{ month: "Jan", revenue: 120 },
{ month: "Feb", revenue: 150 },
{ month: "Mar", revenue: 180 },
{ month: "Apr", revenue: 140 },
{ month: "May", revenue: 210 },
{ month: "Jun", revenue: 190 },
],
series: [
{
type: "bar",
xKey: "month",
yKey: "revenue",
yName: "Revenue",
// A reference resolves on a series fill as well as on theme parameters.
fill: { ref: "accentColor" },
},
],
axes: {
x: { type: "category", position: "bottom" },
y: { type: "number", position: "left" },
},
});
const updateTheme = () => {
const optionsCopy = clone(options.value);
optionsCopy.theme = {
params: {
accentColor,
backgroundColor,
foregroundColor: { ref: "accentColor", mix, onto: "backgroundColor" },
axisLineColor: { ref: "accentColor", mix: 0.5 },
},
};
options.value = optionsCopy;
};
const changeAccent = (event) => {
accentColor = event.target.value;
updateTheme();
};
const changeBackground = (event) => {
backgroundColor = event.target.value;
updateTheme();
};
const changeMix = (event) => {
mix = Number(event.target.value);
document.getElementById("mix-value").textContent = mix.toFixed(2);
updateTheme();
};
return {
options,
changeAccent,
changeBackground,
changeMix,
};
},
});
createApp(ChartExample).mount("#app");
{
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.{ ref: 'accentColor', mix: 0.85, ontoColor: '#ff5733' }- blend a parameter onto a literal colour.{ ref: 'accentColor', mix: 0.85, ontoColor: 'var(--brand)' }- blend a parameter onto a CSS variable.
A reference can be used anywhere a colour is accepted. ref and onto point to theme parameters; ontoColor instead takes a literal colour or a CSS variable, and is mutually exclusive with onto.
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.