---
title: "Background Image"
enterprise: true
framework: react
version: "14.1.0"
---

# Background Image

A Background Image can be used for branding or watermarking a chart.

## Displaying an Image

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.

#### Background Image

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  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 ChartExample = () => {
  const [options, setOptions] = useState<AgPolarChartOptions>({
    data: getData(),
    series: [
      {
        type: "pie",
        angleKey: "value",
      },
    ],
    background: {
      image: {
        width: 128,
        height: 96,
        right: 16,
        bottom: 16,
        url: getImageURL(),
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Background Image](https://www.ag-grid.com/charts/reactFunctionalTs/background-image/examples/background-image)

```js
{
    background: {
        image: {
            url: 'data:image/png;base64,iVBORw0...',
            width: 50,
            height: 50,
            right: 10,
            bottom: 10,
        },
    },
}
```

> **Note**
>
> 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

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](#reference-AgChartBackground-image) for more details.

The `width` and `height` properties override the size of the image.

## API Reference

#### Background

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| 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. |
| image.url (required) | string |  | URL of the image. |
| image.left | PixelSize |  | Distance from the left border of the chart to the left border of the image. If neither left nor right specified, the image is centred horizontally. |
| image.top | PixelSize |  | Distance from the top border of the chart to the top border of the image. If neither top nor bottom specified, the image is centred vertically. |
| image.right | PixelSize |  | Distance from the right border of the chart to the right border of the image. If neither left nor right specified, the image is centred horizontally. |
| image.bottom | PixelSize |  | Distance from the bottom border of the chart to the bottom border of the image. If neither top nor bottom specified, the image is centred vertically. |
| image.width | PixelSize |  | Width of the image. If both left and width are specified, right is ignored. If only height is provided, width will be computed to preserve the original width/height ratio. If neither is provided, the original width is used. |
| image.height | PixelSize |  | Height of the image. If both top and height are specified, bottom is ignored. If only width is provided, height will be computed to preserve the original width/height ratio.  If neither is provided, the original height is used. |
| image.opacity | Opacity |  | Opacity of the image. |