containerSize() not working in Firefox

Example: https://codepen.io/andrewbanchich/pen/NzwxBB

I have it set to update the width and height using the containerSize expression, but in the latest version of Firefox it just expands continuously.

I feel like the best way to solve this is to allow us to set the width and height of the SVG element itself separately from the viewBox value. In my opinion, the two have very different uses, and in many cases (including mine) it makes more sense to set the width and height attributes of the SVG to 100% and have a set value for viewBox.

Allowing us to set width and height to a string (so we can set a percentage value) fixes issues with resizing, would be more performant than resizing the DOM using JavaScript, and would reduce cross browser compatibility issues since any browser that supports SVG should also support percentages set for the width and height attributes of the SVG element itself.

[jheer]

You can fix your example directly, without new Vega features. If you were to switch to D3, you will still need to right custom JS code to change chart size upon resize. Instead, you can update your current example in one of two ways to get proper resizing. (Both assume you are using "autosize": {"type": "fit", "contains": "padding"} in your Vega spec.)

1. Instead of containerSize[0] for your width, use containerSize[0] - 20 (and similarly for height). This adjusts the size to account for the 10px padding (which adds 20px total to the component width and height, respectively) you’re adding in your CSS. Of course, it is a bit hacky to hardwire your CSS info into your Vega spec, which leads to option 2…

2. Don’t perform resizing in your Vega spec at all. Write a small bit of JavaScript to track window resize events and perform the resizing yourself. Expand the link below for a complete working example, which uses the window.getComputedStyle method to get the component width/height without padding.

Click to expand resizing example

const spec = {
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "padding": 5,
  "autosize": {"type": "fit", "contains": "padding"},

  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43},
        {"category": "D", "amount": 91},
        {"category": "E", "amount": 81},
        {"category": "F", "amount": 53},
        {"category": "G", "amount": 19},
        {"category": "H", "amount": 87}
      ]
    }
  ],

  "signals": [
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout",  "update": "{}"}
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "height"
    }
  ],

  "axes": [
    { "orient": "bottom", "scale": "xscale" },
    { "orient": "left", "scale": "yscale" }
  ],

  "marks": [
    {
      "type": "rect",
      "from": {"data":"table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value": 0}
        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {
          "fill": {"value": "red"}
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#333"}
        },
        "update": {
          "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
          "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
          "text": {"signal": "tooltip.amount"},
          "fillOpacity": [
            {"test": "datum === tooltip", "value": 0},
            {"value": 1}
          ]
        }
      }
    }
  ]
}

const view = new vega.View(vega.parse(spec))
  .renderer('svg')    // set renderer (canvas or svg)
  .initialize('#one') // initialize view within parent DOM container
  .hover();           // enable hover encode set processing

function setViewSize() {
  var style = window.getComputedStyle(document.getElementById('one'), null),
      w = ~~style.getPropertyValue('width').slice(0, -2),
      h = ~~style.getPropertyValue('height').slice(0, -2);
  view.width(w).height(h).run();
}

setViewSize();
window.addEventListener('resize', setViewSize);

[andrewbanchich]

@mattijn Agreed. It worked for me because I am not changing the height of my container and I have it explicitly set.

I think the only / best real solution to this is allow us to set width, height, and viewBox. This is the whole point of viewBox and browsers have optimized for that, not for manipulating complex DOM objects with JavaScript.