Black Lives Matter. Please consider donating to Black Girls Code today.

Swapping from Bubble to Scatterpolar

I have chart data that can, in theory, be applicable to a bubble chart or a radar (scatterpolar) chart. I have a function that transforms the data x/y/marker.size values (for a bubble chart) to r & theta values (for scatterpolar)

However when I update the chart (using Plotly.react), I get an error that reads:

set_convert.js:174 Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
    at Object.ax.setGeometry (set_convert.js:174)
    at Polar.webpackJsonp../node_modules/plotly.js/src/plots/polar/polar.js.proto.updateAngularAxis (polar.js:504)
    at Polar.webpackJsonp../node_modules/plotly.js/src/plots/polar/polar.js.proto.updateLayout (polar.js:273)
    at Polar.webpackJsonp../node_modules/plotly.js/src/plots/polar/polar.js.proto.plot (polar.js:91)
    at Object.plot (index.js:45)
    at webpackJsonp../node_modules/plotly.js/src/plot_api/subroutines.js.exports.drawData (subroutines.js:560)
    at Object.webpackJsonp../node_modules/plotly.js/src/lib/index.js.lib.syncOrAsync (index.js:390)
    at webpackJsonp../node_modules/plotly.js/src/plot_api/plot_api.js.exports.plot (plot_api.js:385)
    at Object.webpackJsonp../node_modules/plotly.js/src/registry.js.exports.call (registry.js:221)
    at Object.webpackJsonp../node_modules/plotly.js/src/plots/plots.js.plots.doAutoMargin (plots.js:1809)

The code that it errors out on is:

ax.setGeometry = function() {
       /* ...snip... */

        switch(axType) {
            case 'linear':
                /* ...snip... */
            case 'category':
                var catLen = ax._categories.length;  // ERRORS OUT HERE
                var _period = ax.period ? Math.max(ax.period, catLen) : catLen;

                c2rad = t2rad = function(v) { return v * 2 * Math.PI / _period; };
                rad2c = rad2t = function(v) { return v * _period / Math.PI / 2; };

                ax.range = [0, _period];
                break;
        }

        /* ...snip... */
    };

I’m not sure what I’m doing wrong…

I have narrowed it down to only failing when using Plotly.react. Using Plotly.newPlot works fine.

Yikes. That appears like a pretty bad bug in Plotly.react. Could you share the before and after “data” / “layout” you used that led to this bug?

Absolutely. I’m hoping it’s something I’m doing and not Plotly (because it’s been a dream to use so far!)

Here’s the bubble chart data:

[
  {
    "entities": [
      {
        "region": "us",
        "brandId": 41017,
        "sectorId": 41
      }
    ],
    "id": "brand-41017",
    "metric": [
      "index",
      "buzz",
      "impression"
    ],
    "name": "Nike",
    "marker": {
      "color": "#1f77b4",
      "size": [
        35.7
      ]
    },
    "type": "bubble",
    "mode": "markers",
    "x": [
      17.77
    ],
    "y": [
      42.58
    ],
    "hovertext": [
      "<b>Nike</b><br>Index: 17.77<br>Buzz: 42.58<br>Impression: 35.7"
    ],
    "text": [
      42.58
    ],
    "textposition": "middle center",
    "hoverinfo": "text",
    "textfont": {
      "size": 12
    }
  },
  {
    "entities": [
      {
        "region": "us",
        "brandId": 41001,
        "sectorId": 41
      }
    ],
    "id": "brand-41001",
    "metric": [
      "index",
      "buzz",
      "impression"
    ],
    "name": "Adidas",
    "marker": {
      "color": "#ff7f0e",
      "size": [
        33.56
      ]
    },
    "type": "bubble",
    "mode": "markers",
    "x": [
      13.8
    ],
    "y": [
      41.87
    ],
    "hovertext": [
      "<b>Adidas</b><br>Index: 13.8<br>Buzz: 41.87<br>Impression: 33.56"
    ],
    "text": [
      41.87
    ],
    "textposition": "middle center",
    "hoverinfo": "text",
    "textfont": {
      "size": 12
    }
  }
]

Here’s the scatterpolar chart data:

[
  {
    "entities": [
      {
        "region": "us",
        "brandId": 41017,
        "sectorId": 41
      }
    ],
    "id": "brand-41017",
    "metric": [
      "index",
      "buzz",
      "impression"
    ],
    "name": "Nike",
    "marker": {
      "color": "#1f77b4"
    },
    "type": "scatterpolar",
    "mode": "lines",
    "r": [
      17.77,
      42.58,
      35.7,
      17.77
    ],
    "line": {
      "color": "#1f77b4"
    },
    "hovertext": [
      "<b>Nike</b><br>Index: 17.77",
      "<b>Nike</b><br>Buzz: 42.58",
      "<b>Nike</b><br>Impression: 35.7",
      "<b>Nike</b><br>Index: 17.77"
    ],
    "text": [
      17.77,
      42.58,
      35.7,
      17.77
    ],
    "theta": [
      "Index",
      "Buzz",
      "Impression",
      "Index"
    ],
    "hoverinfo": "text",
    "textfont": {
      "size": 12
    },
    "textposition": "middle center"
  },
  {
    "entities": [
      {
        "region": "us",
        "brandId": 41001,
        "sectorId": 41
      }
    ],
    "id": "brand-41001",
    "metric": [
      "index",
      "buzz",
      "impression"
    ],
    "name": "Adidas",
    "marker": {
      "color": "#ff7f0e"
    },
    "type": "scatterpolar",
    "mode": "lines",
    "r": [
      13.8,
      41.87,
      33.56,
      13.8
    ],
    "line": {
      "color": "#ff7f0e"
    },
    "hovertext": [
      "<b>Adidas</b><br>Index: 13.8",
      "<b>Adidas</b><br>Buzz: 41.87",
      "<b>Adidas</b><br>Impression: 33.56",
      "<b>Adidas</b><br>Index: 13.8"
    ],
    "text": [
      13.8,
      41.87,
      33.56,
      13.8
    ],
    "theta": [
      "Index",
      "Buzz",
      "Impression",
      "Index"
    ],
    "hoverinfo": "text",
    "textfont": {
      "size": 12
    },
    "textposition": "middle center"
  }
]

As you can see, I have a couple of non-Plotly attributes in there, but they don’t seem to affect it in any other chart I’ve made so far, so I didn’t think it would affect this.

If there’s anything else I can help with, let me know!

Hmm. I can’t replicate the TypeErrors you’re seeing in https://codepen.io/etpinard/pen/jQmdrX using plotly.js@1.42.5

Maybe you could try to upgrade your plotly.js version?

I’ll give that a try, I am on 1.41.3 (I should’ve mentioned that before)! Thanks for looking into it

When I updated your Pen to use 1.41.3 it doesn’t happen either…I must be doing something wrong

@etienne, I figured out how to trigger it. When switch from a bubble chart to a radar chart, if I apply a layout the error happens. However, if I use Plotly.newPlot with the same layout, I get no problems…

I forked your earlier codepen to reproduce: https://codepen.io/gonzofish/pen/ZmyPML

Here’s the radar layout

{
  "autosize": true,
  "margin": {
    "r": 80,
    "t": 50
  },
  "xaxis": {
    "showticklabels": true
  },
  "polar": {
    "angularaxis": {
      "visible": true,
      "type": "category"
    },
    "radialaxis": {
      "visible": true,
      "type": "linear",
      "autorange": true,
      "range": [
        0,
        42.58
      ]
    }
  },
  "showlegend": false
}

And here’s the bubble layout:

{
  "autosize": true,
  "margin": {
    "r": 80,
    "t": 20
  },
  "xaxis": {
    "showticklabels": true,
    "automargin": true,
    "showgrid": false,
    "showline": true,
    "tickangle": 0,
    "title": "Buzz",
    "zeroline": false,
    "dtick": 0,
    "type": "linear",
    "range": [
      3.288728968027524,
      18.81552523836697
    ],
    "autorange": true
  },
  "legend": {
    "orientation": "h",
    "x": 0.5,
    "y": -0.1,
    "xanchor": "center"
  },
  "showlegend": false,
  "yaxis": {
    "automargin": true,
    "showgrid": false,
    "showline": true,
    "showticklabels": true,
    "title": "Index",
    "zeroline": false,
    "range": [
      10,
      50
    ],
    "type": "linear"
  },
  "polar": {}
}

I just realized that specifying any layout causes it to error out.

It looks like specifying margin causes the error? Use anything else and it works…

Here’s an Pen: https://codepen.io/gonzofish/pen/xQrBoj

Thanks very much for the codepen! We should be able to fix this before our next release.

Awesome! Glad I could help

1 Like