Highcharts pattern fill not working in firefox

[dinosaurLol]

I have a column chart with some columns having a pattern and a different color.

To accomplice this I set the desired pattern and color in the series.data array for each datapoint.

A small example can be seen in the first datapoint in this jsfiddle: http://jsfiddle.net/u6apr95e/13/

However, something weird is happening.
The blue striped column can be seen when using Chrome and Edge, but I cannot see the column with FireFox (I only tested those 3 browsers).

Does anyone know why this happens? And maybe even a fix for this?

[michal.f]

Hello,

This is because you use the hashtag (#) in the pattern ID. In Chromium, this is not a problem, while Firefox appears to be more restrictive about naming.

Demo: http://jsfiddle.net/BlackLabel/h3bqf4o0/

Let me know if you have any further questions!
Best regards!

patternid.jpg (134.7 KiB) Viewed 167 times