Showing multiple charts makes the area coloring go wrong

[easymind76]

When I show one chart, everything is fine, but showing multiple, and the threshold coloring doesn't seem to work.

I made a codepen: https://codepen.io/anon/pen/eVJywN

You can easily see that it can work by removing the .chart-XRP div, so you only draw one chart. You will see red and green area. But drawing more then one chart and everything stays green.

I have tried to instantiate both chart instances in their own context, tried to make sure I use unique names for everything. But perhaps the issue isn't about variable references, maybe it has to do with targeting dom elements wrongly. I don't know.

[easymind76]

I have looked into it some more. Problem seems to be using the same maskNames in all charts. They are put on the masks as IDs. So you end up having multiple same IDs on the page. I can pass unique mask names to the plugin, so your code can run fine. But maybe appending a unique string to the maskNames would be a general better solution. In your code you could do perhaps:

line 88 insert: var rand = Math.random().toString(36).substr(2, 16); options.maskNames.aboveThreshold += rand; options.maskNames.belowThreshold += rand;