Transparent plot area of heatmap using highcharts -
how make heatmap's plot area transparent. remove white blocks in chart , make transparent, background colors visible.
$(function () { $('#container').highcharts({ chart: { type: 'heatmap', margintop: 40, marginbottom: 40, backgroundcolor: { lineargradient: { x1: 1, y1: 0, x2: 0, y2: 1 }, stops: [ [0.23, 'rgb(240, 59, 9)'], [0.5, 'rgb(255, 224, 80)'], [0.67, 'rgb(54, 64, 207)'], [0.99, 'rgb(13, 163, 35)'], [1, 'rgb(217, 186, 50'] ] }, }, title: { text: 'sales per employee per weekday' }, xaxis: { categories: ['alexander', 'marie', 'maximilian', 'sophia', 'lukas', 'maria', 'leon', 'anna', 'tim', 'laura'] }, yaxis: { categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'], title: null }, coloraxis: { min: 0, mincolor: '#ffffff', maxcolor:'#ffffff' //maxcolor: highcharts.getoptions().colors[0] }, legend: { align: 'right', layout: 'vertical', margin: 0, verticalalign: 'top', y: 25, symbolheight: 320 }, tooltip: { formatter: function () { return '<b>' + this.series.xaxis.categories[this.point.x] + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + this.series.yaxis.categories[this.point.y] + '</b>'; } }, series: [{ name: 'sales per employee', borderwidth: 1, data: [[0,0,0],[0,1,19],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115],[5,0,88],[5,1,32],[5,2,12],[5,3,6],[5,4,120],[6,0,13],[6,1,44],[6,2,88],[6,3,98],[6,4,96],[7,0,31],[7,1,1],[7,2,82],[7,3,32],[7,4,30],[8,0,85],[8,1,97],[8,2,123],[8,3,64],[8,4,84],[9,0,47],[9,1,114],[9,2,31],[9,3,48],[9,4,91]], datalabels: { enabled: true, color: 'black', style: { textshadow: 'none' } } }] }); });
$(function () { $('#container').highcharts({ chart: { type: 'heatmap', margintop: 40, marginbottom: 40, plotbackgroundcolor: { lineargradient: { x1: 1, y1: 0, x2: 0, y2: 1 }, stops: [ [0.03, 'rgb(247, 88, 45)'], [0.5, 'rgb(255, 224, 80)'], [0.67, 'rgb(54, 64, 207)'], [0.99, 'rgb(13, 163, 35)'], [1, 'rgb(217, 186, 50'] ] } }, title: { text: 'sales per employee per weekday' }, xaxis: { categories: ['insignificant', 'minimum', 'significant', 'material', 'critical'] }, yaxis: { categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'], title: null }, coloraxis: { min: 0, mincolor: 'transparent', maxcolor:'transparent' //maxcolor: highcharts.getoptions().colors[0] }, legend: { align: 'right', layout: 'vertical', margin: 0, verticalalign: 'top', y: 25, symbolheight: 320 }, tooltip: { formatter: function () { return '<b>' + this.series.xaxis.categories[this.point.x] + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + this.series.yaxis.categories[this.point.y] + '</b>'; } }, series: [{ name: 'sales per employee', borderwidth: 1, data: [[0,0,0],[0,1],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115]], datalabels: { enabled: true, color: 'black', style: { textshadow: 'none' } } }] }); });
Comments
Post a Comment