# Charts overflow other cells in Firefox

**URL:** <https://talk.observablehq.com/t/charts-overflow-other-cells-in-firefox/671>\
**Category:** Feedback\
**Created:** [April 23, 2018, 1:32pm UTC](https://talk.observablehq.com/t/charts-overflow-other-cells-in-firefox/671 "2018-04-23T13:32:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Evan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/evan/32/276_2.png) [@Evan](https://talk.observablehq.com/u/Evan)\
**Post date:** [April 23, 2018, 1:32pm UTC](https://talk.observablehq.com/t/charts-overflow-other-cells-in-firefox/671/1 "2018-04-23T13:32:36Z")

</div>

Not sure how to describe this, so here is a picture:

 ![Screenshot-2018-4-23%20Hello%20dc%20js](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/2e6201bf77b6a3355d7c100fc3f442641bab390d.png)  
Works fine in Chrome and Safari.  
This is the notebook:  
[https://beta.observablehq.com/@fil/hello-dc-js](https://beta.observablehq.com/@fil/hello-dc-js)

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [April 23, 2018, 7:54pm UTC](https://talk.observablehq.com/t/charts-overflow-other-cells-in-firefox/671/2 "2018-04-23T19:54:19Z")

</div>

There are two problems here.

First, Firefox doesn’t (yet) support [ResizeObserver](https://wicg.github.io/ResizeObserver/), so there’s no easy way for Observable to tell when a cell resizes. So instead, Observable listens for _load_ events to tell when a cell has resized.

Second, this notebook uses side effects and global DOM: the `DC` cell selects DOM elements created by other cells (`view` creates `#dc-magnitude-chart` _etc._), and modifies their contents. (And doesn’t dispatch a _load_ event to tell Observable that it mutated the DOM.)

Combined, Observable isn’t smart enough to detect (in Firefox) that the `view` cell has changed in height because it was mutated by the `DC` cell.

To be more idiomatic, this notebook could be rewritten to avoid side effects. Instead of creating the chart container in one cell and modifying it in another cell, create and initialize the chart in the same cell, and then return it. For example:

```auto
DC = {
  // Create a skeletal DOM for the charts.
  const view = md`<div class=container>…</div>`;

  // Create and initialize the DC charts.
  const magnitudeChart = dc.barChart(view.querySelector("#dc-magnitude-chart"));
  const depthChart = dc.barChart(view.querySelector("#dc-depth-chart"));
  const timeChart = dc.lineChart(view.querySelector("#dc-time-chart"));
  const dataTable = dc.dataTable(view.querySelector("#dc-table-graph"));
  …
  dc.renderAll();

  // Return the DOM container element.
  return view;
}

```

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [April 23, 2018, 8:09pm UTC](https://talk.observablehq.com/t/charts-overflow-other-cells-in-firefox/671/3 "2018-04-23T20:09:03Z")

</div>

Thank you @Evan and @mbostock

I’ve included the fix at [https://beta.observablehq.com/@fil/hello-dc-js-v2](https://beta.observablehq.com/@fil/hello-dc-js-v2) — keeping the older version so that it might help people who stumble on this conversation.

The notebook is still a bit buggy in terms of the width of bars, but ~~that’s a DC.js setting I haven’t had time to look up yet~~. (Feel free to fork and update, I’ll happily hand you the baton :))

---

<div class="post-metadata">

**Author:** ![lucasborges](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/lucasborges/32/6051_2.png) [@lucasborges](https://talk.observablehq.com/u/lucasborges)\
**Post date:** [January 28, 2022, 1:35pm UTC](https://talk.observablehq.com/t/charts-overflow-other-cells-in-firefox/671/4 "2022-01-28T13:35:01Z")

</div>

Do Firefox support [ResizeObserver](https://wicg.github.io/ResizeObserver/) already ?

I’m having trouble in the chart resize, specially when the wrapper container shrinks. I’m using the Runtime JS to embed. Everything seems fine on Chrome though.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 28, 2022, 5:08pm UTC](https://talk.observablehq.com/t/charts-overflow-other-cells-in-firefox/671/5 "2022-01-28T17:08:46Z")

</div>

@lucasborges Yes, see [ResizeObserver - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#browser_compatibility). Please create a new topic if you still need help, and include a link to your notebook (or a simplified example).