Add background image to charts

Follow

Takashi Binns

September 04, 2015 18:53

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

1

• 

  Nick Burleigh October 18, 2016 21:01

  Hey,

  This is great! However, the default stretches the image and causes distortion. Is there a way to avoid stretching (like just place the image once, in its original size), or tile the image? Thanks!

   

  Nick

  1

  Comment actions Permalink
• 

  VIKRAM DUMALA January 31, 2017 13:34

  Hi I am Not getting pls can any one explain 

   

  0

  Comment actions Permalink
• 

  Glenys Salas May 02, 2017 14:54

  Agree with Nick.  Is there a way to avoid stretching?

  0

  Comment actions Permalink
• 

  Jonathan Pires May 04, 2017 20:36

  While there is no standard setting that lets you choose between stretched or centered you can use the below renderer 

  to add an html element on the chart, and within that you would specify the size and location of your image.

  http://api.highcharts.com/highcharts/Renderer

  0

  Comment actions Permalink
• 

  Jordy Finkers June 21, 2018 11:42

  Hi,

  does anyone know a way to force a resolution to the image?

  0

  Comment actions Permalink
• 

  Sisense S July 13, 2018 12:22

  Hello Great,

  Please guide me on changing the dashboard background image ..

  0

  Comment actions Permalink
• 

  Tyler Shaw July 16, 2018 17:16

  I'm able to get the script to run and it works on my dashboard, but if I go to export the widget as an image file I just get a blank widget (No data even appears), any reason for this?

  1

  Comment actions Permalink
• 

  Jordy Finkers January 28, 2019 08:55

  Hi,

   

  I'm using this and love it! - Now I want the image to depend on the filter that I'm using.

  I do have all image URL's stored in the EC - but I haven't found a way yet to use the URL from the EC (based on a widget filter) instead of the fixed script URL.

  Does anyone have an idea how I can achieve this?

  0

  Comment actions Permalink
• 

  Cleberson Amaral March 10, 2019 14:54

  Hi Jordy,

  Have a look on this, maybe it could help you:

  
  https://support.sisense.com/hc/en-us/community/posts/221227428-Change-Displayed-Images-in-Dashboard-Based-on-Filter

  0

  Comment actions Permalink
• 

  Jordy Finkers July 12, 2019 06:11

  Thanks again for your tip Cleberson - we found a way!

  We now however struggle with the same as what Tyler Shaw struggledwith:

  - Image export returns an empty image - not even data

  - PDF export shows the image in the preview but not in the actual PDF.

   

  Does anyone have a solution for this?

   

  0

  Comment actions Permalink

Please sign in to leave a comment.