search

highcharts / pattern-fill

MIT License
20 stars 23 forks source link

Bug with many hc in same page with same pattern defs #21

Open th3nu11 opened 8 years ago

th3nu11 commented 8 years ago

There's a bug when I create a page with many hc (one visible each time) all with same pattern definition.

here you can see an example: https://jsfiddle.net/th3nu11/z5Lo1tsd/

hon2a commented 8 years ago

This issue points out a fundamental flaw in this whole concept. Patterns are identified by IDs, which are supposed to be unique for the whole document. Since they're attached to each chart, they're actually not unique. The browser resolves this by using the first element with the specified ID. In effect all of your charts are using the patterns defined in the first one. When you remove or hide that first chart, it makes the pattern fills in the rest of the charts disappear.

I resolved this in my app by rendering a global chart containing just the pattern definitions (no data) as the first element in <body> (and visible, but positioned outside of viewport). That chart never gets removed and all the other charts use the patterns defined in it.

TorsteinHonsi commented 8 years ago

A potential fix is to add the chart.index to the id internally, but then we lose the feature to style the patterns by CSS as the DOM id changes. They could be styled by class names though.

hon2a commented 8 years ago

Creating chart-specific dynamic IDs for the patterns means that you can't use patterns the same way you use colors, just by specifying the name of the pattern. You'd have to be aware that the IDs are chart-specific and prefix their uses the same way, which could be quite a hassle.

In my case, I have a global color scheme for the whole app, including patterns. I need to be able to tell my chart adapter to color a series using pattern X from the global set. If this requires me to supply a unique clone of the pattern set to each chart and use IDs unique to that clone, it's not really optimal.

danatcofo commented 7 years ago

what about adding the definitions to a highcharts theme instead?

hon2a commented 7 years ago

@danatcofo I'm not sure what you mean by that. Based on the Highcharts page on themes, these are just sets of options. The issue here is that the pattern definitions need to be rendered somewhere, but just once, so ideally there should be a separate global <svg> element hosting them.

danatcofo commented 7 years ago

@hon2a ah... I was referring to adding, or using a highcharts theme as a centralized location to define the patterns. I was not aware of the internal plumbing used to render the patterns and reference them.