Open basschoen opened 8 years ago
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
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
});
}
});
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 }); } });
LineChart works well, but in Firefox the chart disappears because of the mask. Any thoughts?