Masking the BarChart in Firefox doesn't work

[basschoen]

LineChart works well, but in Firefox the chart disappears because of the mask. Any thoughts?

[valerievdv]

Hi, I am experiencing the same problem on firefox and Edge. I appreciate very much that plugin...could you give me any idea to solve that issue ? Thanks

[gionkunz]

That's very weird. I couldn't really figure it out yet but I've found that it might be related to the missing bounding box of straight lines. If you offset the bar lines a bit, they will get a bounding box, and the masking seems to work. This might be a SVG bug in Firefox, or it works as specified in the SVG spec, but Chrome implemented it more gracefully.

var chart = new Chartist.Bar('.ct-chart', {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [5, -4, 3, 7, 20, 10, 3, 4, 8, -10, 6, -8]
  ]
}, {
  showArea: true,
  axisY: {
    onlyInteger: true
  },
  plugins: [
    Chartist.plugins.ctThreshold({
      threshold: 4
    })
  ]
});

chart.on('draw', function(context) {
  if (context.type === 'bar') {
    context.element.attr({
      x1: context.x1 - 5,
      x2: context.x2 + 5
    });
  }
});

[ogenthe]

I am having the same issue with bar graphs in Chrome. The suggested resolution causes bar's to go a bit haywire: I ammended to the below and it seems to be working better accross Chrome, Edge, IE (not tested on Firefox):

chart.on('draw', function(context) { if (context.type === 'bar') { context.element.attr({ x1: context.x1 - 0.1 }); } });