Background color and pattern transparency

Question

Background color and pattern transparency

Opened this issue 9 years ago · 15 comments

BenjaminVanRyseghem commented 9 years ago

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

Ben1902 commented 8 years ago

+1

Answer 1 · 2015-09-07T12:41:57.000Z

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).

Answer 2 · 2015-09-07T14:55:59.000Z

In my use case, the pattern is a png file 😄

let me do a PR so we can discuss it 😄

Answer 3 · 2016-01-22T14:49:41.000Z

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.

Answer 4 · 2016-01-22T14:56:31.000Z

in merge limbo pretty much 😄

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

I'll do it

Answer 5 · 2016-01-22T14:59:55.000Z

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.

Answer 6 · 2016-01-22T15:04:09.000Z

I made new PR #18

Answer 7 · 2016-05-10T08:50:39.000Z

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

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).
Opacity is not set, because the member pattern.element.children is unknown. (DOM4)

Proposed solutions:

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' }
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.

Answer 8 · 2017-01-24T18:01:51.000Z

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

Answer 9 · 2017-01-24T21:49:42.000Z

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

Answer 10 · 2017-01-25T08:41:23.000Z

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) @DirkDeWachter<https://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 GitHub<#16 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ASY0woqjxO95bzoM3gGH8gosWsi6zRx6ks5rVnH4gaJpZM4Fm4kQ>.

Answer 11 · 2017-01-25T10:47:16.000Z

OK.

Here are the files.
highcharts4-patternfill.zip

Answer 12 · 2017-01-25T13:04:51.000Z

thanks 😄 I will have a look on friday

Answer 13 · 2017-01-25T13:43:15.000Z

I’ve put the code on the website (#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 GitHub<#16 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ASY0wsFGccbcKcYmPTxa3U53XowLrGlLks5rV0hzgaJpZM4Fm4kQ>.

Answer 14 · 2017-01-30T12:44:29.000Z

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