score:1

The problem is about the clipPath element. Chrome is quite permissive about element declaration but not Firefox. To get your fiddle working, change:

svg.append('clippath')
  .attr('id', 'chart-area')
  .append('rect')
  .attr({
  x: Chart.margin.left + Chart.sideWidth,
  y: Chart.margin.top,
  width: BarArea.width,
  height: BarArea.height,
});

To:

svg.append('defs').append('clipPath')
  .attr('id', 'chart-area')
  .append('rect')
  .attr({
  x: Chart.margin.left + Chart.sideWidth,
  y: Chart.margin.top,
  width: BarArea.width,
  height: BarArea.height,
});

Here is the working fiddle.


More Query from same tag