javascript - Hide Heatmap DataLabels based on Condition -
how hide datalabels of heatmap based on condition i.e. want hide datalabels (==0 or <50). there bug in highcharts api, when ever restore browser zero's show in unusual order. bug link
as of found workaround replacing 0 '0' dont want show on heatmap. here fiddle jsfiddle , in fiddle working when implemented on application it's replicating bug.
$(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],[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' } } }] }); });
i'm using jasper studio workaround snippet is
series.datalabels.formatter:{function(){ if(this.point.value == 0) { return '0';} else { return this.point.value;}}}
the simples way using datalabels formatter allows add condition.
plotoptions:{ series:{ datalabels:{ formatter:function(){ if(this.point.value >=50) return this.point.value; } } } },
example: http://jsfiddle.net/4aqhb/246/