need pattern in venn diagram

[Surekaraja]

Expected behaviour

need pattern in venn diagram as like as pie chart pattern

Actual behaviour

color fill of pattern in venn diagram is not like as pie chart

Live demo with steps to reproduce

https://jsfiddle.net/m5s28hn9/34/

Product version

highcharts v7

Affected browser(s)

[sebastianbochan]

Hi @Surekaraja,
Thank you for contacting us. Could you post a mockup how it should be draw?

[Surekaraja]

Hi https://jsfiddle.net/m5s28hn9/41/ In this example the pattern is drawn with color of the parent set but I need the pattern to be drawn with the specific color that I will provide which is totally different from the color of the parent circles. Have attached the venn image where the intersected portion is applied with pattern of the specific color that is different from the parent circle. For this I need solution in JS fiddle. Highcharts Demo - JSFiddle<https://jsfiddle.net/m5s28hn9/41/> jsfiddle.net Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. Venn diagram should be drawn as like you have given pattern feature in Pie chart. I need Venn diagram pattern color and fill color as like Pie chart (i.e) Venn diagram intersected portion color should be different from the color of parent set . Kindly reply as soon as possible. Kind Regards, Sureka R BI Developer - Trainee [cid:278315ad-b3b4-49b3-9657-47561bfac785] Look Forward. Think Ahead. Main: +91-9710062203 Mobile: +91-8610845038 Innovation & Services Hub<http://visualbi.com/about-us/locations/>

…

________________________________ From: Sebastian <notifications@github.com> Sent: Wednesday, June 5, 2019 5:40:29 PM To: highcharts/highcharts Cc: Sureka Raja; Mention Subject: Re: [highcharts/highcharts] need pattern in venn diagram (#10889) Hi @Surekaraja<https://github.com/Surekaraja>, Thank you for contacting us. Could you post a mockup how it should be draw? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#10889?email_source=notifications&email_token=AKMU7TUNEPSQ4ECMF6Q6LRDPY6ULLA5CNFSM4HTT7FKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODW7QAGA#issuecomment-499056664>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AKMU7TVJPX5WU5C2BB764PLPY6ULLANCNFSM4HTT7FKA>.

[sebastianbochan]

Hi @Surekaraja,
Summarising, in common area you would like to declare your own color (i.e red like below) which is not inherited from parents.

Mockup:

Please correct me if Im wrong.

[Surekaraja]

Yes. This is what I need. Kind Regards, Sureka R BI Developer - Trainee [cid:278315ad-b3b4-49b3-9657-47561bfac785] Look Forward. Think Ahead. Main: +91-9710062203 Mobile: +91-8610845038 Innovation & Services Hub<http://visualbi.com/about-us/locations/>

…

________________________________ From: Sebastian <notifications@github.com> Sent: Wednesday, June 5, 2019 6:33:34 PM To: highcharts/highcharts Cc: Sureka Raja; Mention Subject: Re: [highcharts/highcharts] need pattern in venn diagram (#10889) Hi @Surekaraja<https://github.com/Surekaraja>, Summarising, in common area you would like to declare your own color (i.e red like below) which is not inherited from parents. Mockup: [Zrzut ekranu 2019-06-05 o 15 00 35]<https://user-images.githubusercontent.com/2115686/58958294-e2246b00-87a2-11e9-80e9-d63f88425880.png> Please correct me if Im wrong. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#10889?email_source=notifications&email_token=AKMU7TTTGWFJAKRNGLFJOP3PY62SNA5CNFSM4HTT7FKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODW7UFPI#issuecomment-499073725>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AKMU7TWPRQRWBB3LINW6UNDPY62SNANCNFSM4HTT7FKA>.

[sebastianbochan]

Hi @Surekaraja,
You can achive that by setting the path.fill paramenter.

Demo:

• https://jsfiddle.net/BlackLabel/zfywm7xj/

Docs:

• https://api.highcharts.com/class-reference/Highcharts.PatternObject
• https://api.highcharts.com/class-reference/Highcharts.PatternOptionsObject#path

Im closing this ticket because of no bug here.

[Surekaraja]

Hi I have tried using the solution given by you. But I have small issue in the solution. You have used the pattern-fill.js with recent version which is supporting the pattern for Venn diagram but not for Pie chart or other component. Given the example of Pie chart that uses pattern-fill.js which is given by you for Venn diagram "https://code.highcharts.com/modules/pattern-fill.js". Kind Regards, Sureka R BI Developer - Trainee [cid:278315ad-b3b4-49b3-9657-47561bfac785] Look Forward. Think Ahead. Main: +91-9710062203 Mobile: +91-8610845038 Innovation & Services Hub<http://visualbi.com/about-us/locations/>

…

________________________________ From: Sebastian <notifications@github.com> Sent: Thursday, June 6, 2019 1:50:34 PM To: highcharts/highcharts Cc: Sureka Raja; Mention Subject: Re: [highcharts/highcharts] need pattern in venn diagram (#10889) Closed #10889<#10889>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#10889?email_source=notifications&email_token=AKMU7TVQTHPT42DV65TTD2LPZDCFFA5CNFSM4HTT7FKKYY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOR2VGTAI#event-2393532801>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AKMU7TUGWWKFINSSTNX5WODPZDCFFANCNFSM4HTT7FKA>.

[sebastianbochan]

Hi @Surekaraja,
Please ensure that all your files (Highcharts, pattern-fill etc) are up-to-date. When I run the pie chart demo, all works properly.

Demo:

• https://jsfiddle.net/BlackLabel/pL2cgf9n/

Please update my demo with your code which causes errors and broken patterns.

[Surekaraja]

Hi Kindly provide the pattern-fill.js which I can use to display pattern for both the Venn diagram and other components like pie chart. Kind Regards, Sureka R BI Developer - Trainee [cid:278315ad-b3b4-49b3-9657-47561bfac785] Look Forward. Think Ahead. Main: +91-9710062203 Mobile: +91-8610845038 Innovation & Services Hub<http://visualbi.com/about-us/locations/>

…

________________________________ From: Sebastian <notifications@github.com> Sent: Friday, June 7, 2019 1:32:36 PM To: highcharts/highcharts Cc: Sureka Raja; Mention Subject: Re: [highcharts/highcharts] need pattern in venn diagram (#10889) Hi @Surekaraja<https://github.com/Surekaraja>, Please ensure that all your files (Highcharts, pattern-fill etc) are up-to-date. When I run the pie chart demo, all works properly. Demo: * https://jsfiddle.net/BlackLabel/pL2cgf9n/ Please update my demo with your code which causes errors and broken patterns. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#10889?email_source=notifications&email_token=AKMU7TVYR7TQYQFCM56TW7DPZIIZZA5CNFSM4HTT7FKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXFEK4I#issuecomment-499795313>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AKMU7TU4HOU74IXK2C65O6LPZIIZZANCNFSM4HTT7FKA>.

[sebastianbochan]

Hi @Surekaraja,
The file which is used in pie chart is exactly the same as for other series (venn etc).

Demo:

• https://jsfiddle.net/BlackLabel/wm2trzsf/

If it will not work, please recreate your example as live demo.

[HafizHussain31]

Hi,

I was checking the sample fiddle suggested by you, https://jsfiddle.net/BlackLabel/zfywm7xj/

It is supposed to fill with red diagonals, but it is still showing with inherited style on my chrome browser. please refer following screenshot.

Am I missing anything?

[pawelfus]

It's a bug in demo @HafizHussain31 - setting fill or fillColor won't work with this pattern. Pattern is made of straight, white lines, so there's nothing to color. Change pattern for example to this one: https://jsfiddle.net/BlackLabel/wm2trzsf/2/ - and fill will be present there.

If you need red lines, set color to red: https://jsfiddle.net/BlackLabel/wm2trzsf/3/

[HafizHussain31]

Got it thanks,

I have another query. When I create pattern and hover over any series item, pattern wont fade away as the other series fade.

https://jsfiddle.net/BlackLabel/wm2trzsf/3/

In the same link, just hover over any series item and see the pattern still displayed.

[pawelfus]

Thank you @HafizHussain31 for pointing this out! It's a bug, created a separate ticket for that: #14372

[HafizHussain31]

Any quick workaround we have got?

---------------- Edited--------------------- I can see a work around in the link you shared, will test and update you. Thanks