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: {
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
The image is positioned in the center 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.