Showing results for 
Search instead for 
Did you mean: 
Community Team Member
Community Team Member
Use case: I have an image that I want to show markers on. To do this I'm using a scatter graph widget, where I use plotBackgroundImage to set an image to the background.
In my dataset I have a set of items with x and y coordinates. However I don't have the dimensions of the image itself in the dataset.
Solution: I read the current axis limits, create a scaling multiplier, and then change the x and y coordinates of the dataset to scale correctly within the given limits.
To tackle the reading of the image dimensions, instead of trying to wait for the image to load, I let the widget load as normal, then do a widget.redraw() as soon as the dimensions are available.
Code snippet is below:
let refresh = true;

const setDimensions = (url) => {
  return new Promise((resolve, reject) => {
    var img = new Image();
    img.src = url;
    img.onload = () => {
      const scale = {
        x: ( - / img.naturalWidth,
        y: ( - / img.naturalHeight
      widget.rawQueryResult.values.forEach((item) => {
        item[0].data = item[0].data * scale.x +;
        item[0].text = item[0].data.toString();
        item[1].data = item[1].data * scale.y +;
        item[1].text = item[1].data.toString();

widget.on("queryend", (scope, result) => {
  refresh = result.reason != "widgetredraw";

widget.on("beforeviewloaded", (scope, args) => {
  args.options.chart.plotBackgroundImage = URL_TO_IMAGE;
  if (refresh) {
Version history
Last update:
‎03-02-2023 09:26 AM
Updated by:
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email [email protected]

Share this page: