JavaScript ChartsBackground ImageEnterprise

This section describes how to add a background image to a chart.

Background Image parameters

The url is required for the background image.

It is positioned in the center by default. The left, top, right and bottom properties specify the position of the image and the distance to the chart border. The width and height properties override the size of the image.

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

API Reference

interface AgChartBackground {
    /** Whether or not the background should be visible. */
    visible?: boolean;
    /** Colour of the chart background. */
    fill?: CssColor;

    /** Background image. May be combined with fill colour. */
    image?: AgChartBackgroundImage;
}

interface AgChartBackgroundImage {
    /** URL of the image */
    url: string;

    /** 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. */
    left?: 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. */
    top?: 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. */
    right?: 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. */
    bottom?: 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.
     */
    width?: 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.
     */
    height?: PixelSize;

    /** Opacity of the image. */
    opacity?: Opacity;
}