Allow fill patterns for areas, columns, plot bands etc
Using background image tiles
Since Highcharts version 6.1.0 the feature is available.
More info: https://www.highcharts.com/blog/a11y/pattern-fills/
Also mentioned at the bottom of this documentation page:
https://www.highcharts.com/docs/chart-design-and-style/colors
-
Anatoly commented
property "fillColor" isn't supported in 2.x version.
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! -
Nitz commented
Thnx for the concern and reply. This is helpful.
-
@Nitz What you show is more like an item chart, and it would be better to have a specific series type of it. I wrote a proof of concept on how this can be done, and it is something we want to add in the future: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/item-series/
-
Nitz commented
Thanks for the reply.
Is there any possible way to set the pattern as in screenshot below:
http://screencast.com/t/YaTr1ThuUf -
@Nitz I'm afraid not. The current pattern plugin doesn't respond to data.
-
Nitz commented
hello,is there any way to set the pattern of columns and also count the patterns in a particular column as in dot plot chart.
see the link below:
http://screencast.com/t/YaTr1ThuUf -
Janusz K commented
It seems like this doesn't work with wkhtmltopdf. Did anyone had such issue?
-
Thanks for your bug reports, I've fixed those and updated the fiddle.
We're working on setting up a plugin repository, when that is finished we will move this plugin over there.
-
JD Smith commented
Can you officially document this plugin in the API docs until it's included in the library?
One improvement for this plugin would be to use color.width and color.height instead of hardcoding those values inside the plugin, i.e.:
image = this.image(
color.pattern, 0, 0, color.width, color.height
)Also, you had specified to use color.width for both width and height in the pattern - leave height as color.height and then any rectangular pattern will tile properly.
P.S. jsFiddle removes fiddles after a certain amount of time. You might consider hosting examples somewhere more permanent.
-
I haven't tried that, but you may be able to make it work by adding a background color in the plugin above.
-
Max commented
Is there way to have transparent pattern image that will be placed over desired background-color?
-
Piotr commented
I would love to see this as part of Highcharts too!
-
Drew Miller commented
thanks - this is helpful