Jump to content

I have a fairly basic line graph chart and I would like to s...

Casey Green

Recommended Posts

I have a fairly basic line graph chart and I would like to set the background of just this chart to that of an image file at about a 70% transparency. Seems like it should be fairly straightforward, but when using WebFocus Designer I can see the options to change the color of the chart background but no option to point to an image file. Is there a way to set the background of my chart to an image file and modify the alpha channel Thanks!
Link to comment
Share on other sites

Im using WebFocus version 8207.21.

I would assume it can be done with CSS but Im admittedly not super familiar with how CSS syntax interacts with Information Builders reports. Surely it wouldnt just be something like background: -imagefilepath- thrown into the report text file, right

Link to comment
Share on other sites

Unfortunately no.

Which designer function did you use Visualise Data or Assemble

You will need the css somewhere, possibly in a theme or create a css file to be added.

The basic css for background image is:

.classname {

opacity: 0.6;

background: url({path to image})


The path can be within a WebFOCUS call or static url

background: url(https://static.influitive.com/influitiveimages/ibi/white_label/logo.png)

background: url("/ibi_apps/run.bipBIP_REQUEST_TYPE=BIP_RUN&BIP_folder=IBFS%253A%252FWFC%252FRepository&BIP_item=mylogo.png")

Its just a case of getting the css applied to the chart.

Link to comment
Share on other sites

Hi Casey,

You can do this using a CSS in the theme. You can apply an image to the Container in the CSS and then apply the Style in Designer to that container that has the visualization. I can send you a sample CSS if you need one.

Hopefully this helps.


container.jpg1072459 46.8 KB


cssimage.jpg1005196 36.5 KB

Link to comment
Share on other sites

The following works, one line of hand coding required, but it seems compatible with Designer. I created a chart_background.css in the public workspace:

body {

background: url("/ibi_apps/WFServlet.ibfsIBFS1_action=RUNFEX&IBFS_path=/WFC/Repository/public/chart_background.png");

background-size: 100% 100%;



and then put a chart_background.png in the public workspace also.

I created a chart in Designer and saved it. Then right-click the chart and Edit with text editor

and add this code in the SET GRAPH section, for example after the line ON GRPHA SET VZERO OFF.

ON GRAPH SET CSSURL '/ibi_apps/WFServlet.ibfsIBFS1_action=RUNFEX&|IBFS_path=/WFC/Repository/public/chart_background.css'


(Note the vertical bar after the & to ensure it is not treated as a fex variable and trigger Autoprompt.) Then save the chart.

Run the chart and see the background:


image.png14541055 181 KB


The chart can subsequently be opened in Designer and further modified and the CSSURL line of code is retained.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...