A Background Image can be used for branding or watermarking a chart.
Displaying an Image Copy Link
To display a background image on a chart, simply provide a url for the background.image property. This could be a base64 encoded png or svg, or an external link to these files.
import {
AgCharts,
AgPolarChartOptions,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
PieSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
function getImageURL() {
return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI2NCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDY0IDQ4IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij4KICA8c3R5bGU+CiAgICAuYXF1YSB7CiAgICAgIGZpbGw6ICM1NWI0Yzg7CiAgICB9CgogICAgLm9yYW5nZSB7CiAgICAgIGZpbGw6ICNmZjhjMDA7CiAgICB9CgogICAgLnJlZCB7CiAgICAgIGZpbGw6ICNmMDA7CiAgICB9CgogICAgLmdyZXkgewogICAgICBmaWxsOiAjYjRiZWJlOwogICAgfQogIDwvc3R5bGU+CiAgCiAgPHJlY3QgY2xhc3M9ImFxdWEgcmlnaHQtMSIgeD0iNTEiIHk9IjEwIiB3aWR0aD0iNyIgaGVpZ2h0PSI4Ii8+CiAgPHBhdGggY2xhc3M9ImFxdWEgcmlnaHQtMSIgZD0iTTU4LDEwbC0xNywwbC04LDhsMjUsMGwwLC04WiIvPgogIDxyZWN0IGNsYXNzPSJvcmFuZ2UgcmlnaHQtMiIgeD0iMzYiIHk9IjIyIiB3aWR0aD0iNyIgaGVpZ2h0PSI4Ii8+CiAgPHBhdGggY2xhc3M9Im9yYW5nZSByaWdodC0yIiBkPSJNNDMsMzBsMCwtNy45OTVsLTE0LC0wbC04LjAwOCw3Ljk5NWwyMi4wMDgsMFoiLz4KICA8cmVjdCBjbGFzcz0icmVkIHJpZ2h0LTMiIHg9IjI0IiB5PSIzNCIgd2lkdGg9IjciIGhlaWdodD0iOCIvPgogIDxwYXRoIGNsYXNzPSJyZWQgcmlnaHQtMyIgZD0iTTEzLDM4LjAxbDQsLTQuMDFsMTQsMGwwLDhsLTE4LDBsMCwtMy45OVoiLz4KCiAgPHJlY3QgY2xhc3M9ImdyZXkgbGVmdC0xIiB4PSIxMSIgeT0iNiIgd2lkdGg9IjciIGhlaWdodD0iOCIvPgogIDxwYXRoIGNsYXNzPSJncmV5IGxlZnQtMSIgZD0iTTQxLDEwbC00LDRsLTI2LDBsMCwtOGwzMCwwbDAsNFoiLz4KICA8cmVjdCBjbGFzcz0iZ3JleSBsZWZ0LTIiIHg9IjE2IiB5PSIxOCIgd2lkdGg9IjciIGhlaWdodD0iOCIvPgogIDxwYXRoIGNsYXNzPSJncmV5IGxlZnQtMiIgZD0iTTE2LDI2bDksMGw4LC04bC0xNywtMGwwLDhaIi8+CiAgPHJlY3QgY2xhc3M9ImdyZXkgbGVmdC0zIiB4PSI2IiB5PSIzMCIgd2lkdGg9IjciIGhlaWdodD0iOCIvPgogIDxwYXRoIGNsYXNzPSJncmV5IGxlZnQtMyIgZD0iTTYsMzcuOTg4bDcsMC4wMTJsNy45OTIsLThsLTE0Ljk5MiwtMC4wNDdsLTAsOC4wMzVaIi8+Cgo8L3N2Zz4=";
}
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
PieSeriesModule,
ContextMenuModule,
]);
const options: AgPolarChartOptions = {
data: getData(),
series: [
{
type: "pie",
angleKey: "value",
},
],
background: {
image: {
width: 128,
height: 96,
right: 16,
bottom: 16,
url: getImageURL(),
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ value: 56.9 },
{ value: 22.5 },
{ value: 6.8 },
{ value: 8.5 },
{ value: 2.6 },
{ value: 1.9 },
];
}
{
background: {
image: {
url: 'data:image/png;base64,iVBORw0...',
width: 50,
height: 50,
right: 10,
bottom: 10,
},
},
}When using an SVG image, ensure that the SVG has a valid width, height, and viewBox set on the top-level <svg> element.
Position and size Copy Link
The image is positioned in the centre of the chart container by default.
Use the left, top, right and bottom properties to specify the position of the image by defining the pixel distance between the image and the edge of the chart container. See the API Reference for more details.
The width and height properties override the size of the image.
API Reference Copy Link
Properties available on the AgChartBackground interface.
- visible
boolean - Whether the background should be visible.
- fill
CssColor - Colour of the chart background.
- image
AgChartBackgroundImage - Background image. May be combined with fill colour.
Properties available on the AgChartBackground interface.
- visible
boolean - Whether the background should be visible.
- fill
CssColor - Colour of the chart background.
- image
AgChartBackgroundImage - Background image. May be combined with fill colour.