Dimple js plot not scaling correctly in Firefox

Question

I made a few charts with dimple and they look OK in chromium (v 43), but in Firefox (v 40) they are rendered incorrectly.

I inspected the page in the debugger and I can see that under the <svg> tag there is a <g> tag. The inspector shows the g tag in chrome as 720x556 and in firefox as 730x97, which obviously results in a distorted plot.

The same problem occurs on a number of plots - bubble, line and bar charts.

I'm using dimple 2.1.6 and d3 3.5.6

Here is an example of my code:

link: function(scope, element, attrs) {
  var svg = dimple.newSvg(element[0], 800, 600);
  svg.text("Charttitle");
  var myChart = new dimple.chart(svg, data);

  myChart.addCategoryAxis("x", "column1");
  myChart.addCategoryAxis("y", "column2");
  myChart.addCategoryAxis("z", "column3");
  myChart.addSeries("column1", dimple.plot.bubble);

  myChart.draw();
}

<div ng-view class="ng-scope">
  <div class="col-md-12 ng-scope" ng-controller="MyController">
    <traffic-plot val="p2pTraffic" load-data="loadData(ip)" class="ng-isolate-scope">
      <svg width="800" height="600">
        <g>
           <!-- The rest of the dimple generated code -->
        </g>
      </svg>
   </traffic-plot>
 </div>
</div>

Any suggestions how to fix this?

Edit: After doing some research I found that the <g> is a container element used for grouping graphic elements that allows the group elements, in this case svg, to be handled as one element. In the element inspector, the svg appears to have the correct size, but the top level <g>does not. I suspect that Chrome default renders it with 100% height / width, while Firefox renders it depending on the sizes of the elements in it.

Answer 1

As per this dimple issue, I set the parent element's style to "display:block" and now the plots are scaling correctly in Firefox.

Here is an example using angular:

<my-test-plot style="display:block" val="sourceData" /> 

This gets expanded to:

<my-test-plot class="ng-isolate-scope" ... val="sourceData" style="display:block">
  <svg>
     ...
  </svg>
</my-test-plot>

Answer 2

You did not specify a unit. I would try to add "600px" instead of just 600.

For properties defined in CSS2, a length unit identifier must be provided.