javascript - How to fill custom png or svg pattern to a Pie Chart Highcharts -
i trying build pie chart using highcharts , trying add custom pattern pie chart. able other charts uptill using code below:-
var gfxpath = 'https://sampleproject-shivkumarganesh.c9users.io/img/'; highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'stacked bar chart' }, xaxis: { categories: ['apples', 'oranges', 'pears', 'grapes', 'bananas'] }, yaxis: { min: 0, title: { text: 'total fruit consumption' } }, legend: { reversed: true }, plotoptions: { series: { stacking: 'normal' } }, series: [{ name: 'john', data: [5, 3, 4, 7, 2], color: { pattern: gfxpath + 'dots_large.png', width: 10, height: 10 } }, { name: 'jane', data: [2, 2, 3, 2, 1], color: { pattern: gfxpath + 'grid.png', width: 10, height: 10 } }, { name: 'joe', data: [3, 4, 4, 2, 5], color: { pattern: gfxpath + 'bricks.png', width: 15, height: 15 } }] });
the problem when same pie chart, not work @ all. custom build svg provided in sample working. how should fill custom png pattern or svg pattern?
http://jsfiddle.net/highcharts/gqg618eb/
but when try fill png or else svg breaks.
note: using latest highcharts , pattern-fill plugin.
Comments
Post a Comment