Background color and pattern transparency

[BenjaminVanRyseghem]

Hi :smile:

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

[TorsteinHonsi]

Hi Benjamin,

Yes it would be interesting to see what you did. It looks like the fill isn't picked up here: http://jsfiddle.net/highcharts/jzy1unsv/3/.

But opacity can already be set using rgba colors, right? (same jsFiddle).

[BenjaminVanRyseghem]

In my use case, the pattern is a png file :smile:

let me do a PR so we can discuss it :smile:

[baronnoraz]

I would love to have the ability to set a background color and overlay the pattern. Is #17 still in merge limbo? or is there an alternate method for doing this? Thanks for the great plugin.

[BenjaminVanRyseghem]

in merge limbo pretty much :smile:

I should clean it (or uglify it again, depends on the point of view :smile:)

I'll do it

[baronnoraz]

Just checking - I appreciate those contributing back to projects. I haven't managed to find time to help, so I can only be thankful for everyone's hard work and time. Thanks to both of you.

[BenjaminVanRyseghem]

I made new PR https://github.com/highcharts/pattern-fill/pull/18

[DirkDeWachter]

Hi, I tested the pattern demo (http://jsfiddle.net/highcharts/jzy1unsv/) [windows7 - IE11] and found two problems:

1. If closed paths are used like e.g. for the url(#highcharts-default-pattern-5), the fill color is not set for the pattern, but only for the background (see fig1). The fill color for the pattern is default (black).
2. Opacity is not set, because the member pattern.element.children is unknown. (DOM4)

Proposed solutions:

1. use "color" option of pattern for background and "fill" option for path. The result is in fig2 for no background (no color option) ; and fig3 with a yellow background (and no fill of the pattern, hence transparent). For the latter I added the color-option to the default pattern, but that is of course a choice. I have not included that in the patch. renderer.addPattern('highcharts-default-pattern-' + i, { color: 'yellow', path: { d:pattern, stroke: colors[i], fill: 'none' }
2. use member pattern.element.childNodes instead. To select only element nodes, the nodeType is checked.

A patch file is added. pattern-fill-v2.js.patch.txt

Dirk.

[cwcorbin]

Any advance on this? I could really use the ability to have two colors displayed with a single pattern. My hope is to communicate a range stack that is a combination of the stack below and above. TIA

[BenjaminVanRyseghem]

@DirkDeWachter sorry I missed your patch 😕 I will try to have a look asap

[DirkDeWachter]

Bummer. Zip-file is blocked. I will check later how I can transfer the code.

Dirk

Van: De Wachter, Dirk Verzonden: woensdag 25 januari 2017 9:34 Aan: 'highcharts/pattern-fill' reply@reply.github.com; highcharts/pattern-fill pattern-fill@noreply.github.com CC: Mention mention@noreply.github.com Onderwerp: RE: [highcharts/pattern-fill] Background color and pattern transparency (#16)

Hi,

Maybe, I should re-look at it myself. But in the meantime I wrote a complete new pattern-fill that can use (predefined) SVG-patterns, so image-files as background are no longer necessary. After all, highcharts generates SVG itself. It also has the advantage that only one base pattern can be used to create (clone) new patterns by stretching, scaling, rotating this base pattern.

Code is included in this mail, along with a demo webpage. Hope it will be useful.

Dirk

Van: Benjamin Van Ryseghem [mailto:notifications@github.com] Verzonden: dinsdag 24 januari 2017 22:50 Aan: highcharts/pattern-fill pattern-fill@noreply.github.com<mailto:pattern-fill@noreply.github.com> CC: De Wachter, Dirk dirk.dewachter@zorg-en-gezondheid.be<mailto:dirk.dewachter@zorg-en-gezondheid.be>; Mention mention@noreply.github.com<mailto:mention@noreply.github.com> Onderwerp: Re: [highcharts/pattern-fill] Background color and pattern transparency (#16)

@DirkDeWachterhttps://github.com/DirkDeWachter sorry I missed your patch 😕 I will try to have a look asap

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/highcharts/pattern-fill/issues/16#issuecomment-274949967, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ASY0woqjxO95bzoM3gGH8gosWsi6zRx6ks5rVnH4gaJpZM4Fm4kQ.

[DirkDeWachter]

OK.

Here are the files. highcharts4-patternfill.zip

[BenjaminVanRyseghem]

thanks :smile: I will have a look on friday

[DirkDeWachter]

I’ve put the code on the website (https://github.com/highcharts/pattern-fill/issues/16)

Dirk

Van: Benjamin Van Ryseghem [mailto:notifications@github.com] Verzonden: woensdag 25 januari 2017 14:05 Aan: highcharts/pattern-fill pattern-fill@noreply.github.com CC: De Wachter, Dirk dirk.dewachter@zorg-en-gezondheid.be; Mention mention@noreply.github.com Onderwerp: Re: [highcharts/pattern-fill] Background color and pattern transparency (#16)

thanks 😄 I will have a look on friday

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/highcharts/pattern-fill/issues/16#issuecomment-275102895, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ASY0wsFGccbcKcYmPTxa3U53XowLrGlLks5rV0hzgaJpZM4Fm4kQ.

[BenjaminVanRyseghem]

@DirkDeWachter I think you should try to open your own PR as it looks like this one is never gonna be accepted :smile:

[Ben1902]

+1