Knowledge Base Article

Add Background Image To Charts

SET THE BACKGROUND OF CHARTS TO AN IMAGE

Open the script editor for a widget, and copy in the following code:
widget.on('render', function(sender,event){
 
 // URL to the background Image
 var imageLink = 'http://siliconangle.com/files/2014/12/BlackWhite-Logo.jpg'
 
 // Set the chart background as the image
 sender.queryResult.chart.plotBackgroundImage = imageLink;
  
})
Change the imageLink variable to the path of your image, and hit save.  Reload the web page and you should see an image as the background of your widget.
This functionality works only with the following chart types: scatter, pie, column, bar, line, area, & polar
Updated 03-02-2023
Developers: Plugins and scripts

2 Comments

Comments have been turned off for this article
  • Jordy's avatar
    Jordy
    Data Storage
    03-29-2023

    Hi,

    We're using the following script to achieve a similar result:

    widget.on("beforeviewloaded", (scope, args) => {
    console.log(args);
    args.options.chart.plotBackgroundImage = imaglink;

    });

     

    Both ways work for the widget, but the image export function suddenly forgets that it still has to apply filters to the widget, resulting in the background image being loaded, but also way too much data.

     

    Did you find a way to overcome that issue?

     

    - J

  • DRay's avatar
    DRay
    Admin
    01-30-2024

    Hello Jordy,

    First of all, I know this answer has taken a while. These posts from intapiuser were created by an automated migration and are not monitored.

    That's a great question. If you haven't found an answer yet, please post this in the Build Analytics Discussions section. We are happy to help you there.

    Have a great day!

About Widget & Dashboard Scripts

Node avatar for Widget & Dashboard Scripts
198 ArticlesCreated: 3 months agoLatest Activity: 06-06-2025