Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

BUG : scatterbar url not updated after newPlot/react on other url.

See original GitHub issue

When I have a Graph with a scatterbar in page /test_1 and after I go in page /test_2 without reloading the whole page (Angular app) but I use newPlot or react for updating the graph, then the scatterbar isn’t display correctly because the <rect> inside has a reference for fill to the url /test_1.

graphs

Step :

I’m in my url : http://localhost:4200/modelling/e6e0cbe7-1719-47d3-af8e-e2061f247ccb, The graph 1 is displayed correctly. The url in the fill is set correctly.

work_url

I change the url to http://localhost:4200/modelling/803e7203-dbdb-4c3e-bed3-8c00738ec3e4, And I update the plotly graph with react method (when I use newPlotmethod, it doesn’t work either) the graph 2 is displayed with a wrong colorbar. The url uses the last url and not the new one.

no-work_url

To help the contributors, cbfill is referenced here and here

EDIT : It’s was done with : "plotly.js-basic-dist": "^1.48.3"

Issue Analytics

State:
Created 4 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

etpinardcommented, Jul 11, 2019

0reactions

George35mkcommented, Sep 26, 2020

A quick workaround that fixed this issue on my angular 10 app.

public applyMacOsColorScaleFix() {
    if (this.data.length) {
      const gradientsId = document.querySelector('.gradients linearGradient');
      const colorScaleRect: HTMLElement = document.querySelector('.cbfill');
      if (colorScaleRect) {
        colorScaleRect.setAttribute('style', `fill: url('${window.location.href}#${gradientsId.id}')`);
      }
    }
  }

public initPlot(data: Data[], layout: Layout) {
    if (this.data && Array.isArray(this.data) && this.layout) {

      this.plotly.newPlot(this.plotContainer.nativeElement, data, layout, {
        staticPlot: this.static
      });

      // Mac OS heatmap plot fix.
      this.applyMacOsColorScaleFix();

    } else {
      console.warn('Plot data or layout is invalid');
    }
  }

working example https://angular-p5cfqd.stackblitz.io