Transparent plot area of heatmap using highcharts -


how make heatmap's plot area transparent. remove white blocks in chart , make transparent, background colors visible.

refer fiddle

$(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'                 }             }         }]      }); }); 

here fiddle solution

$(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

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -