Series and Markers can have solid, gradient and pattern fills, allowing for unique visual styles and improved contrasts between series.
Fill Types Copy Link
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgBarSeriesOptions,
AgCartesianChartOptions,
BarSeriesModule,
CategoryAxisModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";
ModuleRegistry.registerModules([
BarSeriesModule,
CategoryAxisModule,
LegendModule,
NumberAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
data: getData(),
series: [
{
type: "bar",
xKey: "station",
yKey: "early",
yName: "Early",
},
{
type: "bar",
xKey: "station",
yKey: "morningPeak",
yName: "Morning peak",
},
{
type: "bar",
xKey: "station",
yKey: "interPeak",
yName: "Between peak",
},
{
type: "bar",
xKey: "station",
yKey: "afternoonPeak",
yName: "Afternoon peak",
},
{
type: "bar",
xKey: "station",
yKey: "evening",
yName: "Evening",
},
],
});
const fillChange = (event: Event) => {
const nextOptions = clone(options);
const value = (event.target as HTMLInputElement).value;
(nextOptions.series as AgBarSeriesOptions[])?.forEach((series) => {
switch (value) {
case "gradient":
series.fill = { type: "gradient" };
break;
case "pattern":
series.fill = { type: "pattern" };
break;
case "image":
series.fill = {
type: "image",
url:
"https://www.ag-grid.com/charts/example-assets/docs-images/" +
`${series.yKey}.png`,
backgroundFillOpacity: 0.4,
width: 30,
height: 30,
};
break;
default:
series.fill = undefined;
}
});
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
Fill Type:
<div className="button-group" role="group" aria-label="Fill Type">
<input
type="radio"
id="fill-default"
name="fill-type"
defaultValue="default"
defaultChecked
onChange={(event) => fillChange(event)}
/>
<label htmlFor="fill-default">Default</label>
<input
type="radio"
id="fill-gradient"
name="fill-type"
defaultValue="gradient"
onChange={(event) => fillChange(event)}
/>
<label htmlFor="fill-gradient">Gradient</label>
<input
type="radio"
id="fill-pattern"
name="fill-type"
defaultValue="pattern"
onChange={(event) => fillChange(event)}
/>
<label htmlFor="fill-pattern">Pattern</label>
<input
type="radio"
id="fill-image"
name="fill-type"
defaultValue="image"
onChange={(event) => fillChange(event)}
/>
<label htmlFor="fill-image">Image</label>
</div>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{
station: "Finsbury Park",
early: 2454,
morningPeak: 16644,
interPeak: 9338,
afternoonPeak: 6346,
evening: 3547,
},
{
station: "Seven Sisters",
early: 3927,
morningPeak: 7581,
interPeak: 5421,
afternoonPeak: 3245,
evening: 2036,
},
];
}
Supported Fill Types are:
Solid Fill: A single colour. See Colours for the accepted colour formats, CSS variables, and theme references.
Gradient Fill: A transition between multiple colours.
Pattern Fill: Predefined patterns including lines and shapes, or a user provided path.
Image Fill: A 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
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgBarSeriesOptions,
AgCartesianChartOptions,
BarSeriesModule,
CategoryAxisModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";
ModuleRegistry.registerModules([
BarSeriesModule,
CategoryAxisModule,
LegendModule,
NumberAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
data: getData(),
series: [
{
type: "bar",
xKey: "animal",
xName: "Animal",
yKey: "lifespan",
yName: "Lifespan",
fill: {
type: "gradient",
},
},
],
});
const gradientChange = (event: Event) => {
const nextOptions = clone(options);
const value = (event.target as HTMLInputElement).value;
(nextOptions.series![0] as AgBarSeriesOptions).fill =
value === "colorStops"
? {
type: "gradient",
colorStops: [
{ color: "#70C1FF", stop: 0.1 },
{ color: "#FFD86F", stop: 0.3 },
{ color: "#FF9A60", stop: 0.5 },
{ color: "#D16BA5" },
],
}
: {
type: "gradient",
};
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<div className="button-group" role="group" aria-label="Gradient Fill">
<input
type="radio"
id="gradient-default"
name="gradient-fill"
defaultValue="default"
defaultChecked
onChange={(event) => gradientChange(event)}
/>
<label htmlFor="gradient-default">Default</label>
<input
type="radio"
id="gradient-color-stops"
name="gradient-fill"
defaultValue="colorStops"
onChange={(event) => gradientChange(event)}
/>
<label htmlFor="gradient-color-stops">Gradient Color Stops</label>
</div>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{ weight: 90, lifespan: 20, population: 8.0, animal: "Penguin" },
{ weight: 500, lifespan: 40, population: 3.5, animal: "Polar\nBear" },
{ weight: 150, lifespan: 10, population: 1.0, animal: "Red\nPanda" },
{ weight: 50, lifespan: 12, population: 12.5, animal: "Rabbit" },
{ weight: 4000, lifespan: 40, population: 0.1, animal: "Hippopotamus" },
{
weight: 8000,
lifespan: 70,
population: 0.02,
animal: "White\nRhinoceros",
},
{ weight: 18000, lifespan: 50, population: 0.03, animal: "Bison" },
{ weight: 13000, lifespan: 45, population: 0.05, animal: "Gaur" },
{
weight: 12000,
lifespan: 40,
population: 0.01,
animal: "Asian\nElephant",
},
{ weight: 30000, lifespan: 70, population: 0.005, animal: "Fin\nWhale" },
{
weight: 25000,
lifespan: 70,
population: 0.004,
animal: "Sperm\nWhale",
},
{ weight: 10000, lifespan: 50, population: 0.2, animal: "Walrus" },
{ weight: 5000, lifespan: 30, population: 0.8, animal: "Giraffe" },
{ weight: 7000, lifespan: 35, population: 1.0, animal: "Killer\nWhale" },
{ weight: 4000, lifespan: 20, population: 0.4, animal: "Crocodile" },
{ weight: 9000, lifespan: 30, population: 0.6, animal: "Camel" },
{ weight: 7000, lifespan: 40, population: 0.3, animal: "Zebra" },
];
}
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 between0and1indicating 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
stopvalue, and the next colour begins at that point. - If no
stopis 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
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgPolarChartOptions,
LegendModule,
ModuleRegistry,
PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";
ModuleRegistry.registerModules([LegendModule, PieSeriesModule]);
const ChartExample = () => {
const [options, setOptions] = useState<AgPolarChartOptions>({
data: getData(),
series: [
{
type: "pie",
angleKey: "value",
radiusKey: "radius",
legendItemKey: "name",
strokeWidth: 1,
fills: [
{
type: "pattern",
pattern: "diamonds",
},
{
type: "pattern",
pattern: "hearts",
},
{
type: "pattern",
pattern: "squares",
},
{
type: "pattern",
pattern: "triangles",
},
{
type: "pattern",
pattern: "stars",
},
],
},
],
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{ value: 26, name: "Diamonds", radius: 0.35 },
{ value: 25, name: "Hearts", radius: 0.3 },
{ value: 15, name: "Squares", radius: 0.25 },
{ value: 10, name: "Triangles", radius: 0.2 },
{ value: 5, name: "Stars", radius: 0.15 },
];
}
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.
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
BubbleSeriesModule,
CategoryAxisModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
ModuleRegistry.registerModules([
BubbleSeriesModule,
CategoryAxisModule,
LegendModule,
NumberAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
data: getData(),
seriesArea: {
padding: {
right: 30,
top: 30,
},
},
series: [
{
type: "bubble",
xKey: "weight",
xName: "Weight",
yKey: "lifespan",
yName: "lifespan",
sizeKey: "weight",
sizeName: "Weight",
labelKey: "animal",
fill: {
type: "pattern",
pattern: "stars",
fill: "#6A4C93",
backgroundFill: "#B8A0D2",
backgroundFillOpacity: 0.5,
stroke: "white",
strokeWidth: 1,
},
maxSize: 70,
},
],
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{ weight: 6000, lifespan: 60, population: 0.5, animal: "Elephant" },
{ weight: 190, lifespan: 15, population: 0.2, animal: "Lion" },
{ weight: 200, lifespan: 40, population: 1.5, animal: "Dolphin" },
{ weight: 180, lifespan: 35, population: 0.1, animal: "Gorilla" },
{ weight: 80, lifespan: 12, population: 50, animal: "Kangaroo" },
{ weight: 70, lifespan: 12, population: 0.03, animal: "Cheetah" },
{ weight: 1200, lifespan: 30, population: 0.4, animal: "Rhino" },
{ weight: 60, lifespan: 15, population: 25, animal: "Koala" },
{ weight: 600, lifespan: 50, population: 0.3, animal: "Tiger" },
{ weight: 5500, lifespan: 70, population: 0.03, animal: "Blue Whale" },
{ weight: 90, lifespan: 20, population: 8.0, animal: "Penguin" },
{ weight: 500, lifespan: 40, population: 3.5, animal: "Polar Bear" },
{ weight: 150, lifespan: 10, population: 1.0, animal: "Red Panda" },
{ weight: 50, lifespan: 12, population: 12.5, animal: "Rabbit" },
{ weight: 4000, lifespan: 40, population: 0.1, animal: "Hippopotamus" },
{
weight: 8000,
lifespan: 70,
population: 0.02,
animal: "White Rhinoceros",
},
{ weight: 18000, lifespan: 50, population: 0.03, animal: "Bison" },
{ weight: 13000, lifespan: 45, population: 0.05, animal: "Gaur" },
{
weight: 12000,
lifespan: 40,
population: 0.01,
animal: "Asian Elephant",
},
{ weight: 30000, lifespan: 70, population: 0.005, animal: "Fin Whale" },
{
weight: 25000,
lifespan: 70,
population: 0.004,
animal: "Sperm Whale",
},
{ weight: 10000, lifespan: 50, population: 0.2, animal: "Walrus" },
{ weight: 5000, lifespan: 30, population: 0.8, animal: "Giraffe" },
{ weight: 7000, lifespan: 35, population: 1.0, animal: "Killer Whale" },
{ weight: 4000, lifespan: 20, population: 0.4, animal: "Crocodile" },
{ weight: 9000, lifespan: 30, population: 0.6, animal: "Camel" },
{ weight: 7000, lifespan: 40, population: 0.3, animal: "Zebra" },
];
}
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.
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgAreaSeriesOptions,
AgCartesianChartOptions,
AreaSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
UnitTimeAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";
ModuleRegistry.registerModules([
AreaSeriesModule,
LegendModule,
NumberAxisModule,
UnitTimeAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
data: getData(),
title: {
text: "Streaming Music Sales",
},
subtitle: {
text: "IN BILLIONS USD",
},
series: [
{
type: "area",
xKey: "date",
yKey: "sales",
yName: "Sales",
strokeWidth: 1,
fill: {
type: "pattern",
path: "M0,6 Q4,1 8,6 T16,6",
width: 16,
height: 10,
strokeWidth: 1,
fill: "none",
},
},
],
axes: {
x: {
type: "unit-time",
},
},
});
const patternChange = (event: Event) => {
const nextOptions = clone(options);
const value = (event.target as HTMLInputElement).value;
(nextOptions.series![0] as AgAreaSeriesOptions).fill =
value === "shape"
? {
type: "pattern",
path: "M7.83985 3.88382V16.6592C7.09646 15.9961 6.11687 15.5923 5.04461 15.5923C2.72664 15.5923 0.84082 17.4782 0.84082 19.7962C0.84082 22.1142 2.72664 24 5.04461 24C7.35971 24 9.24357 22.1189 9.24835 19.8049H9.24845V9.53787L21.7527 6.36814V13.2679C21.0093 12.6048 20.0297 12.201 18.9575 12.201C16.6394 12.201 14.7536 14.0868 14.7536 16.4048C14.7536 18.7228 16.6394 20.6086 18.9575 20.6086C21.2754 20.6086 23.1612 18.7228 23.1612 16.4048V0L7.83985 3.88382Z",
width: 24,
height: 24,
strokeWidth: 0,
}
: {
type: "pattern",
path: "M0,6 Q4,1 8,6 T16,6",
width: 16,
height: 10,
strokeWidth: 1,
fill: "none",
};
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<div className="button-group" role="group" aria-label="Pattern">
<input
type="radio"
id="pattern-line"
name="pattern"
defaultValue="line"
defaultChecked
onChange={(event) => patternChange(event)}
/>
<label htmlFor="pattern-line">Line</label>
<input
type="radio"
id="pattern-shape"
name="pattern"
defaultValue="shape"
onChange={(event) => patternChange(event)}
/>
<label htmlFor="pattern-shape">Shape</label>
</div>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{
date: new Date("2007-01-01T00:00:00.000Z"),
sales: 0.15813911278157827,
},
{
date: new Date("2007-03-01T00:00:00.000Z"),
sales: 0.4286832344867063,
},
{
date: new Date("2007-04-28T23:00:00.000Z"),
sales: 0.7397676872473231,
},
{
date: new Date("2007-06-26T23:00:00.000Z"),
sales: 1.7683112370867489,
},
{
date: new Date("2007-08-24T23:00:00.000Z"),
sales: 1.8935487995394502,
},
{
date: new Date("2007-10-22T23:00:00.000Z"),
sales: 3.0942472896738638,
},
{
date: new Date("2007-12-21T00:00:00.000Z"),
sales: 3.31803796510897,
},
{
date: new Date("2008-02-18T00:00:00.000Z"),
sales: 3.3228583291354625,
},
{
date: new Date("2008-04-16T23:00:00.000Z"),
sales: 3.5059324609362843,
},
{
date: new Date("2008-06-14T23:00:00.000Z"),
sales: 4.643774627365127,
},
{
date: new Date("2008-08-12T23:00:00.000Z"),
sales: 5.142110516472242,
},
{
date: new Date("2008-10-10T23:00:00.000Z"),
sales: 5.083743103641963,
},
{
date: new Date("2008-12-09T00:00:00.000Z"),
sales: 5.158898804829884,
},
{
date: new Date("2009-02-06T00:00:00.000Z"),
sales: 5.691084329372853,
},
{
date: new Date("2009-04-05T23:00:00.000Z"),
sales: 6.48537164305071,
},
{
date: new Date("2009-06-03T23:00:00.000Z"),
sales: 6.769114445541295,
},
{
date: new Date("2009-08-01T23:00:00.000Z"),
sales: 7.523344866341573,
},
{
date: new Date("2009-09-30T23:00:00.000Z"),
sales: 7.983279465031021,
},
{
date: new Date("2009-11-29T00:00:00.000Z"),
sales: 8.766865198699206,
},
{
date: new Date("2010-01-27T00:00:00.000Z"),
sales: 8.088251385416132,
},
{
date: new Date("2010-03-27T00:00:00.000Z"),
sales: 8.222957890758734,
},
{
date: new Date("2010-05-24T23:00:00.000Z"),
sales: 8.421999330604137,
},
{
date: new Date("2010-07-22T23:00:00.000Z"),
sales: 7.984467244271659,
},
{
date: new Date("2010-09-19T23:00:00.000Z"),
sales: 7.479261014726789,
},
{
date: new Date("2010-11-18T00:00:00.000Z"),
sales: 7.6141278548116595,
},
{
date: new Date("2011-01-16T00:00:00.000Z"),
sales: 8.734107428203437,
},
{
date: new Date("2011-03-16T00:00:00.000Z"),
sales: 8.703451338866227,
},
{
date: new Date("2011-05-13T23:00:00.000Z"),
sales: 9.291753784415306,
},
{
date: new Date("2011-07-11T23:00:00.000Z"),
sales: 9.503447959018775,
},
{
date: new Date("2011-09-08T23:00:00.000Z"),
sales: 10.615621615790102,
},
{
date: new Date("2011-11-07T00:00:00.000Z"),
sales: 10.733375165379927,
},
{
date: new Date("2012-01-05T00:00:00.000Z"),
sales: 10.4627040183427,
},
{
date: new Date("2012-03-04T00:00:00.000Z"),
sales: 11.674662633533625,
},
{
date: new Date("2012-05-01T23:00:00.000Z"),
sales: 12.947863251701268,
},
{
date: new Date("2012-06-29T23:00:00.000Z"),
sales: 13.126681160486475,
},
{
date: new Date("2012-08-27T23:00:00.000Z"),
sales: 14.182786684176104,
},
{
date: new Date("2012-10-25T23:00:00.000Z"),
sales: 13.61143532361007,
},
{
date: new Date("2012-12-24T00:00:00.000Z"),
sales: 13.408494384919457,
},
{
date: new Date("2013-02-21T00:00:00.000Z"),
sales: 14.021593180615627,
},
{
date: new Date("2013-04-20T23:00:00.000Z"),
sales: 13.9725170929019,
},
{
date: new Date("2013-06-18T23:00:00.000Z"),
sales: 14.892522033791916,
},
{
date: new Date("2013-08-16T23:00:00.000Z"),
sales: 14.406278482676694,
},
{
date: new Date("2013-10-14T23:00:00.000Z"),
sales: 14.42048984175519,
},
{
date: new Date("2013-12-13T00:00:00.000Z"),
sales: 15.309625618378186,
},
{
date: new Date("2014-02-10T00:00:00.000Z"),
sales: 15.703429050224242,
},
{
date: new Date("2014-04-09T23:00:00.000Z"),
sales: 16.452970141108654,
},
{
date: new Date("2014-06-07T23:00:00.000Z"),
sales: 16.252067498064203,
},
{
date: new Date("2014-08-05T23:00:00.000Z"),
sales: 16.10560313895468,
},
{
date: new Date("2014-10-03T23:00:00.000Z"),
sales: 17.09797155847397,
},
{
date: new Date("2014-12-02T00:00:00.000Z"),
sales: 17.119849075783396,
},
{
date: new Date("2015-01-31T00:00:00.000Z"),
sales: 18.357310797519727,
},
{
date: new Date("2015-03-30T23:00:00.000Z"),
sales: 18.65633634024714,
},
{
date: new Date("2015-05-28T23:00:00.000Z"),
sales: 18.54307486987982,
},
{
date: new Date("2015-07-26T23:00:00.000Z"),
sales: 18.289919698922528,
},
{
date: new Date("2015-09-23T23:00:00.000Z"),
sales: 19.408164776968274,
},
{
date: new Date("2015-11-22T00:00:00.000Z"),
sales: 20.053732597291173,
},
{
date: new Date("2016-01-20T00:00:00.000Z"),
sales: 19.38477166343421,
},
{
date: new Date("2016-03-19T00:00:00.000Z"),
sales: 19.790102639835954,
},
{
date: new Date("2016-05-16T23:00:00.000Z"),
sales: 20.796893643048996,
},
{
date: new Date("2016-07-14T23:00:00.000Z"),
sales: 21.94604590602078,
},
{
date: new Date("2016-09-11T23:00:00.000Z"),
sales: 22.39579581637147,
},
{
date: new Date("2016-11-10T00:00:00.000Z"),
sales: 23.418311313616606,
},
{
date: new Date("2017-01-08T00:00:00.000Z"),
sales: 23.669595057759818,
},
{
date: new Date("2017-03-08T00:00:00.000Z"),
sales: 23.675554854565178,
},
{
date: new Date("2017-05-05T23:00:00.000Z"),
sales: 23.256984287391568,
},
{
date: new Date("2017-07-03T23:00:00.000Z"),
sales: 23.517376910345593,
},
{
date: new Date("2017-08-31T23:00:00.000Z"),
sales: 23.166436121690737,
},
{
date: new Date("2017-10-30T00:00:00.000Z"),
sales: 23.99489867127268,
},
{
date: new Date("2017-12-28T00:00:00.000Z"),
sales: 23.377658742300923,
},
{
date: new Date("2018-02-25T00:00:00.000Z"),
sales: 23.959392118496762,
},
{
date: new Date("2018-04-24T23:00:00.000Z"),
sales: 25.252944640957192,
},
{
date: new Date("2018-06-22T23:00:00.000Z"),
sales: 26.166561962114343,
},
{
date: new Date("2018-08-20T23:00:00.000Z"),
sales: 26.808511807206052,
},
{
date: new Date("2018-10-18T23:00:00.000Z"),
sales: 26.115075803728004,
},
{
date: new Date("2018-12-17T00:00:00.000Z"),
sales: 25.684079799876876,
},
{
date: new Date("2019-02-14T00:00:00.000Z"),
sales: 26.687741711678203,
},
{
date: new Date("2019-04-13T23:00:00.000Z"),
sales: 27.353831851646586,
},
{
date: new Date("2019-06-11T23:00:00.000Z"),
sales: 28.445925502720957,
},
{
date: new Date("2019-08-09T23:00:00.000Z"),
sales: 28.563968290483707,
},
{
date: new Date("2019-10-07T23:00:00.000Z"),
sales: 29.443727478375404,
},
{
date: new Date("2019-12-06T00:00:00.000Z"),
sales: 29.25380683595285,
},
{
date: new Date("2020-02-03T00:00:00.000Z"),
sales: 30.175861476974916,
},
{
date: new Date("2020-04-01T23:00:00.000Z"),
sales: 30.76684257218505,
},
{
date: new Date("2020-05-31T23:00:00.000Z"),
sales: 31.513244842074027,
},
{
date: new Date("2020-07-29T23:00:00.000Z"),
sales: 31.90308563362059,
},
{
date: new Date("2020-09-26T23:00:00.000Z"),
sales: 31.91010815912164,
},
{
date: new Date("2020-11-25T00:00:00.000Z"),
sales: 32.944244037365166,
},
{
date: new Date("2021-01-23T00:00:00.000Z"),
sales: 32.353755779281094,
},
{
date: new Date("2021-03-23T00:00:00.000Z"),
sales: 32.37105584430393,
},
{
date: new Date("2021-05-20T23:00:00.000Z"),
sales: 33.485111940810825,
},
{
date: new Date("2021-07-18T23:00:00.000Z"),
sales: 33.997429683974445,
},
{
date: new Date("2021-09-15T23:00:00.000Z"),
sales: 34.812720349338164,
},
{
date: new Date("2021-11-14T00:00:00.000Z"),
sales: 35.77184485646375,
},
{
date: new Date("2022-01-12T00:00:00.000Z"),
sales: 35.16063673253,
},
{
date: new Date("2022-03-12T00:00:00.000Z"),
sales: 35.70159143136577,
},
{
date: new Date("2022-05-09T23:00:00.000Z"),
sales: 36.585500554773475,
},
{
date: new Date("2022-07-07T23:00:00.000Z"),
sales: 37.739904461475895,
},
{
date: new Date("2022-09-04T23:00:00.000Z"),
sales: 38.32742785329642,
},
{
date: new Date("2022-11-03T00:00:00.000Z"),
sales: 38.86177372565774,
},
{
date: new Date("2023-01-01T00:00:00.000Z"),
sales: 39.18295572212046,
},
];
}
- To remove the stroke, set
strokeWidthto0 - To remove the fill, set
filltonone.
{
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.pathproperty is an SVG path. - It is the value of the
dattribute 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
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgBarSeriesOptions,
AgCartesianChartOptions,
AgImageFill,
BarSeriesModule,
CategoryAxisModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";
const data = getData();
ModuleRegistry.registerModules([
BarSeriesModule,
CategoryAxisModule,
LegendModule,
NumberAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
data,
title: {
text: "Journey Time by Transport Mode",
},
series: [
{
type: "bar",
xKey: "mode",
yKey: "timeToDestination",
fill: {
type: "image",
url: "https://www.ag-grid.com/charts/example-assets/docs-images/map.png",
fit: "stretch",
},
},
],
});
const fitChange = (event: Event) => {
const nextOptions = clone(options);
const fit = (event.target as HTMLInputElement).value as AgImageFill["fit"];
const series = nextOptions.series![0] as AgBarSeriesOptions;
series.fill = {
...(series.fill as AgImageFill),
fit,
};
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<div className="button-group" role="group" aria-label="Fit">
<input
type="radio"
id="fit-contain"
name="fit"
defaultValue="contain"
onChange={(event) => fitChange(event)}
/>
<label htmlFor="fit-contain">Contain</label>
<input
type="radio"
id="fit-cover"
name="fit"
defaultValue="cover"
onChange={(event) => fitChange(event)}
/>
<label htmlFor="fit-cover">Cover</label>
<input
type="radio"
id="fit-stretch"
name="fit"
defaultValue="stretch"
defaultChecked
onChange={(event) => fitChange(event)}
/>
<label htmlFor="fit-stretch">Stretch</label>
<input
type="radio"
id="fit-none"
name="fit"
defaultValue="none"
onChange={(event) => fitChange(event)}
/>
<label htmlFor="fit-none">None</label>
</div>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{ mode: "Walk", timeToDestination: 30 },
{ mode: "Bike", timeToDestination: 15 },
{ mode: "Bus", timeToDestination: 25 },
{ mode: "Car", timeToDestination: 18 },
{ mode: "Train", timeToDestination: 20 },
];
}
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',
},
},
],
}import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgColorRepeat,
AgDonutSeriesOptions,
AgImageFill,
AgPolarChartOptions,
DonutSeriesModule,
LegendModule,
ModuleRegistry,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";
const data = getData();
ModuleRegistry.registerModules([DonutSeriesModule, LegendModule]);
const ChartExample = () => {
const [options, setOptions] = useState<AgPolarChartOptions>({
data,
title: {
text: "A City in Motion: How Londoners Commute",
},
series: [
{
type: "donut",
angleKey: "percent",
innerRadiusRatio: 0.2,
legendItemKey: "mode",
fills: data.map(({ mode }) => {
return {
type: "image",
url:
"https://www.ag-grid.com/charts/example-assets/docs-images/" +
`${mode.toLowerCase()}.png`,
width: 20,
height: 20,
repeat: "no-repeat", // Default
};
}),
},
],
});
const repeatChange = (event: Event) => {
const nextOptions = clone(options);
const type = (event.target as HTMLInputElement).value as AgColorRepeat;
const series = nextOptions.series![0] as AgDonutSeriesOptions;
series.fills = series.fills?.map((fill) => ({
...(fill as AgImageFill),
repeat: type,
}));
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<div className="button-group" role="group" aria-label="Repeat">
<input
type="radio"
id="repeat-repeat"
name="repeat"
defaultValue="repeat"
onChange={(event) => repeatChange(event)}
/>
<label htmlFor="repeat-repeat">Repeat</label>
<input
type="radio"
id="repeat-no-repeat"
name="repeat"
defaultValue="no-repeat"
defaultChecked
onChange={(event) => repeatChange(event)}
/>
<label htmlFor="repeat-no-repeat">No Repeat</label>
</div>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{ mode: "Bus", percent: 31, environmentalImpact: 6 },
{ mode: "Train", percent: 10, environmentalImpact: 4 },
{ mode: "Car", percent: 28, environmentalImpact: 9 },
{ mode: "Bike", percent: 9, environmentalImpact: 2 },
{ mode: "Walk", percent: 22, environmentalImpact: 2 },
];
}
See the Image API reference all the available options.
API Reference Copy Link
Properties available on the AgGradientColor interface.
- type required
'gradient' - colorStops
AgGradientColorStop[] - Represents the position and color of stops in the gradient.
- rotation
number - The rotation angle of the line along which the gradient is rendered.
Properties available on the AgGradientColor interface.
- type required
'gradient' - colorStops
AgGradientColorStop[] - Represents the position and color of stops in the gradient.
- rotation
number - The rotation angle of the line along which the gradient is rendered.
Properties available on the AgPatternColor interface.
- type required
'pattern' - pattern
AgPatternName - The stock pattern to apply.
- path
string - The svg path for a custom pattern
- width
number - Width of the pattern unit.
- height
number - Height of the pattern unit.
- rotation
number - The rotation angle of the pattern.
- scale
number - The scaling of the pattern.
- fill
CssColor - The colour for filling closed shapes in the pattern.
- fillOpacity
Opacity - The opacity of the shapes fill colour.
- backgroundFill
CssColor - The colour for filling the background in the pattern.
- backgroundFillOpacity
Opacity - The opacity of the background fill colour.
- stroke
CssColor - The colour for the strokes of shapes in the pattern.
- strokeOpacity
Opacity - The opacity of the shapes stroke colour.
- strokeWidth
PixelSize - The width of the stroke of shapes in pixels.
Properties available on the AgPatternColor interface.
- type required
'pattern' - pattern
AgPatternName - The stock pattern to apply.
- path
string - The svg path for a custom pattern
- width
number - Width of the pattern unit.
- height
number - Height of the pattern unit.
- rotation
number - The rotation angle of the pattern.
- scale
number - The scaling of the pattern.
- fill
CssColor - The colour for filling closed shapes in the pattern.
- fillOpacity
Opacity - The opacity of the shapes fill colour.
- backgroundFill
CssColor - The colour for filling the background in the pattern.
- backgroundFillOpacity
Opacity - The opacity of the background fill colour.
- stroke
CssColor - The colour for the strokes of shapes in the pattern.
- strokeOpacity
Opacity - The opacity of the shapes stroke colour.
- strokeWidth
PixelSize - The width of the stroke of shapes in pixels.
Properties available on the AgImageFill interface.
- type required
'image' - url required
string - URL of the image.
- backgroundFill
CssColor - The colour for filling the background in the pattern.
- backgroundFillOpacity
Opacity - The colour for filling the background in the pattern.
- width
number - Height of the image.
- height
number - Width of the image.
- repeat
AgColorRepeat - A string indicating how to repeat the pattern's unit.
- fit
AgImageFillFit - The fit mode of the image.
- rotation
number - The rotation angle of the image.
Properties available on the AgImageFill interface.
- type required
'image' - url required
string - URL of the image.
- backgroundFill
CssColor - The colour for filling the background in the pattern.
- backgroundFillOpacity
Opacity - The colour for filling the background in the pattern.
- width
number - Height of the image.
- height
number - Width of the image.
- repeat
AgColorRepeat - A string indicating how to repeat the pattern's unit.
- fit
AgImageFillFit - The fit mode of the image.
- rotation
number - The rotation angle of the image.