plotly.js: [BUG] The Heatmap colorscale is black on Mac Mojave Safari browser

Plotly version 1.45.1

On Windows 10 with these browsers:

  • Chrome
  • Firefox
  • Microsoft Edge

My plot renders very well

12

But on Mac Mojave & Siera on Safari browser I have a black color scale

11

I dont get any error in the console, so I can’t have a clue what is happening!!!

My code

const data = [

    z: [
        [4, 6, 1, 7, 11, 16, 0]
        [6, 9, 7, 12, 22, 27, 0]
        [7, 14, 8, 15, 28, 38, 0]
        [7, 12, 6, 13, 25, 35, 0]
        [4, 8, 2, 9, 14, 21, 0]
        [3, 4, 4, 5, 10, 13, 0]
        [2, 1, 1, 1, 4, 5, 0]
        [3, 6, 3, 9, 12, 15, 0]
        [3, 6, 3, 8, 12, 17, 0]
        [0, 0, 0, 0, 0, 0, 0]
      ]
      x: ["<b>mon</b>", "<b>tue</b>", "<b>wed</b>", "<b>thu</b>", "<b>fri</b>", "<b>sat</b>", "<b>sun</b>"]
      y: ["10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00"]
      type: 'heatmap',
      xgap: 2, ygap: 2,
      colorscale: 'YlGnBu'
]


const layout = {
  font: {
    family: "arial", 
    size: 12, 
   color: "#8e8e8e"
  },
  paper_bgcolor: "#fff",
  plot_bgcolor: "#fff",
  xaxis: {
    type: "category", 
    range: [-0.5, 6.5],
    autorange: true
  },
  yaxis: {
   type: "category", 
   range: [-0.5, 9.5],
   autorange: true
  }
}

Plotly.newPlot(this.plotContainer.nativeElement, data, layout, {staticPlot: false });

What should I do? Does anybody have the same issue?

Thanks.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 15 (5 by maintainers)

Most upvoted comments

@etpinard works πŸ‘πŸ‘πŸ‘

Ok, give me 2 min

I’m guessing this is about a <base> element, and we need to incorporate context._baseUrl into Drawing.gradient, like we do in Drawing.setClipUrl