highcharts / pattern-fill Goto Github PK

Hey there,

We manage our client side dependencies through bower (including Highcharts). Would be great to have this available on bower as well.

Thanks!

https://www.highcharts.com/blog/extension/pattern-fill/

I would like to know if by not actively maintained you mean minimised development or no development at all? And why is this plugin not actively maintained?
You started this plugin, which is used by many Highcharts users, but you stopped its development? Why?

Thanks for your response.

Steps to reproduce:

1. http://jsfiddle.net/2tsdnr8o/
2. Export to png
3. resize chart
4. bars disappears

The issue is only in the Chrome (current version 48.0.2564.103)

When the chart is created for the first time, everything works fine.

Since 7.1.3, when we create the chart again, pattern fill is not applied.
jsFiddle: https://jsfiddle.net/BlackLabel/8ogbkcw1

Works fine in 7.1.2

The recent changes is breaking all of out production software. This is very bad for our reputation. You should not update your master link to a new version when it is not backward compatible, or at least create a versioned URL.. Is there any way for making this compatible with the previous version of highcharts quick? It would make it very hard for us to update all of our applications in time. We are getting a lot of complains about this. They see black background where it supposed to be the pattern.

As of the current version, the patterns are plotted with a somewhat messy z-index, that covers up the tooltip crosshair.

I have altered the demo fiddle to show this: http://jsfiddle.net/z3jLqu2p/

Changing the tooltip crosshair zIndex makes it cover the markers, so it's not an acceptable work-arround

Example: http://jsfiddle.net/7b8gz/1/

We need to hover over the bars to get them displayed as black ones.

Reproduction steps
Hover on any point. The problem occurs only when tooltip is shared.

Live examples
5.0.12 - works fine: https://jsfiddle.net/kkulig/k2egeua3/
5.0.13 - throws an error: https://jsfiddle.net/kkulig/nwcnufup/

The connecting line between the pie slice and the data label disappears when using pattern fill:

http://jsfiddle.net/kVwGn/15/

It's possible to set a chart-wide connector color but not (as far as I can see) different colors for different slices:

http://jsfiddle.net/kVwGn/17/

I use this plugin to insert 'hatched' patterns into bar chart series.
To do this, I used the defs property (with patterns), then use the SVG fragment identifier when setting the serie color, in order to select the pattern I want (exactly as described in your README).

But the fact is, it works perfectly on Chrome (v62.0.3202.94 / 64-bit) but not in Firefox on the given version.
By inspecting I see that the serie is present, but it is transparent (no pattern appears) so it seems that a serie is missing.

Do you already had this type of bug? How can I resolve it?

Thanks in advance.

If I have different patterns in different data series, only the first one is used. That pattern is rendered in both series. This bug is evident on the demo: http://www.highcharts.com/plugin-registry/single/9/Pattern-Fill

Even on your own demo : http://jsfiddle.net/highcharts/jzy1unsv/
it only works with area chart type.

What am I missing here?

The highcharts-pattern-fill on npm has a peerDependency on highcharts ^4. The peerDependency has been changed to >= 4 in this repo some time ago, but the change has not been published to npm.

It would be great if this fix can be published back to npm, to remove any npm warnings.

In this fiddle,
http://jsfiddle.net/cnrudd/zkqLyzm6/

i am setting marker symbols on area series, but the symbol does not appear next to the area series name in the legend.

For other types of series the symbol is the same in the marker and in the legend.

How, for area series, do I get the same marker symbol to appear in the legend as well?

Thanks!

Hi,

Using the opacity parameter will generate an error on IE11 (tested under windows 7)

http://jsfiddle.net/slorenc/jzy1unsv/184/
=> remove " 'opacity': 0.2" and it will work

Hi,
I am using Highstock JS v5.0.10 and the pattern plugin to render custom color patterns.
I have a logic to create an array of patterns in the below format with a variable color and latter map it's id to the color of the series(as shown in the examples)

          var pattern = {
                    'id': "#CCCCCC1",
                    'path': {
                        d: 'M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9',
                        stroke: "white",
                        strokeWidth: 2,
                        fill: "#CCCCCC",
                        fillOpacity: 0.7
                    }
                }

I am facing a weird behavior wherein the bars are filled with pattern at times and sometimes the code goes missing. I was unable to track a pattern for this problem. What I doubt is the server that I have deployed on is unable to load the url's of the patterns sometimes. Can you please help if you have face similar issues or is there something wrong I would be doing in the code.

In the previous version 1.x it was possible to fill series established color and use pattern over the fill[property "fillColor"].

How to do it in the new version?
Thanks!

Hey

First of all thanks for this plugin. Saved me a great deal of time.

I'm working on a project where we have very specific requirements on the print layout. Once entering the print dialogue - the pattern fill gets rendered really bad (see attached screenshot). Is there something I could do about this?

Thanks in advance
M

Sorry if this is not an actual issue. I am trying to get the plugin to use an object to define by pattern as I need to be able to set the color for each series individually.
If I look at the version 1 example it seems that the old version can take an object color overrides does not seem to work.
My guess would be to set it up something like this.
http://jsfiddle.net/jzy1unsv/212/

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/

I'm using pattern-fill successfully in x-axis zones to change the color of columns past a specific date time, however as far as I can tell, the color used in the definition for the stroke is static. In this scenario is it possible to have the stroke color be grabbed from the series its being applied from dynamically?

To see the problem compare in different browsers: http://jsfiddle.net/ErU8H/482/

(In Chorme - only plotBand pattern fill is working,
in IE11 and Firefox - all is OK)

Edit/update: Chrome's versions 38 and 39 are good, but 40 is making troubles.

Hi 😄

I tweaked your plugin to add support for a background color as well as pattern opacity
to be able to keep columns color and add a pattern on top of it basically.

I can make it into a PR if you are interested

Hello :)

I'm trying to use a pattern as a columnrange to allow the bar chart to work.
The pattern shows up but doesn't use the predefined pattern.

Fiddle: https://jsfiddle.net/bormeth/doj56fbw/

Hope that someone can point me in the right direction?

Problem:

Unable to style fill color.

Solution

If we set fill: inherit, we would still be able to override fill color of path by styling svg outside of shadow dom like referenced in this article https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/.

Hi, there is a little bug in this plugin, if I want to use image pattern with opacity it is not possible. I can prepare a fix for this, it's straightforward.

// Image pattern
 } else if (options.image) {
	if (animate) {
		this.image(
		       options.image, 0, 0, width, height, function () {
		              // Onload
                              // Here in the onload handler check for options.opacity is needed 
		              this.animate({ opacity: 1 }, animate);
		              H.removeEvent(this.element, 'load');
		          }
		      ).attr({ opacity: 0 }).add(pattern);
	} else {
	      this.image(options.image, 0, 0, width, height).add(pattern);
	}
}

Patterns of highchart plugins are not getting exported

Works in Chart Type Column :
http://jsfiddle.net/yujte4zu/2/

But doesnt work when changed to Chart Type Bar:
http://jsfiddle.net/yujte4zu/3/

Or am i missing something ?

Site: http://www.highcharts.com/components/com_demo/views/demo/tmpl/demo/gfx/pattern1.png
Returns: Not Found

The requested URL /joomla/components/com_demo/views/demo/tmpl/demo/gfx/pattern1.png was not found on this server.

Same with both other pattern files.