Trying to set a minimum height on bars in HighStock
I resolved this like following
events: {
load: function(event) {
// Following code is added to make tiny stack visible
var chart = this;
var totalValue = 82870; // Sum of all stacks
var minimumPercentageValue = 0.8;
this.series.forEach(function(series) {
series.points.forEach(function(point) {
var valueInPercentage = (point.y * 100) / totalValue;
if (valueInPercentage < minimumPercentageValue) {
point.update({
y: ((minimumPercentageValue+valueInPercentage)*totalValue)/100,
realValue: point.y
}, false);
}
});
});
this.redraw();
}
}
var chart = Highcharts.chart('chart-container', {
credits: false,
chart: {
type: 'bar',
animation:false,
height:200,
events: {
load: function(event) {
// Following code is added to make tiny stack visible
var chart = this;
var totalValue = 82870; // Sum of all stacks
var minimumPercentageValue = 0.8;
this.series.forEach(function(series) {
series.points.forEach(function(point) {
var valueInPercentage = (point.y * 100) / totalValue;
if (valueInPercentage < minimumPercentageValue) {
point.update({
y: ((minimumPercentageValue+valueInPercentage)*totalValue)/100,
realValue: point.y
}, false);
}
});
});
this.redraw();
}
}
},
title:{
text:"Shifts"
},
xAxis: {
visible:false,
endOnTick:false,
categories: ['Shifts'],
},
yAxis: {
endOnTick:false,
visible:false,
max: 82870,
},
legend: {
reversed: true,
align: 'left',
padding:0,
itemPaddingBottom:15,
itemMarginBottom:5,
symbolRadius:0,
verticalAlign: 'bottom',
floating: true,
itemMarginBottom:5,
useHTML: true,
labelFormatter: function (params) {
return '<div><div>'+this.name+'</div><div style="font-weight:normal">'+this.userOptions.start_time+'</div><div style="font-weight:normal">'+this.userOptions.end_time+'</div></div>';
}
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 50,
pointPlacement:'on',
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1
},
marker: {
enabled: false
}
}
},
},
series: [{"name":"Shift 1","start_time":"12\/06\/2019 05:46:47 PM","end_time":"13\/06\/2019 02:47:46 PM","data":[75659]},{"name":"Break","start_time":"03\/06\/2019 03:42:11 PM","end_time":"03\/06\/2019 03:42:31 PM","data":[20]},{"name":"Shift 2","start_time":"03\/06\/2019 03:41:39 PM","end_time":"03\/06\/2019 03:42:11 PM","data":[32]},{"name":"Shift 3","start_time":"29\/05\/2019 08:17:32 PM","end_time":"29\/05\/2019 10:14:43 PM","data":[7031]},{"name":"Shift 4","start_time":"29\/05\/2019 08:16:32 PM","end_time":"29\/05\/2019 08:17:32 PM","data":[60]},{"name":"Shift 5","start_time":"29\/05\/2019 08:15:24 PM","end_time":"29\/05\/2019 08:16:32 PM","data":[68]}],
});<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart-container" style="height:400px; width:100%" ></div>One thing you could consider is using a logarithmic scale:
http://www.highcharts.com/demo/line-log-axis
yAxis: {
type: 'logarithmic'
},
That would allow you to visualize the different heights even if one bar was several orders of magnitude greater than the others.
Anything else would be skewing your data if it really is so small that it can't be seen when you plot it initially.
Yes, you can use minPointLength: http://api.highcharts.com/highstock#plotOptions.column.minPointLength
Unless the average viewer of this data is accustomed to working with log-scaled data, it is not a good idea to scale it that way. People will compare the length of the bars, as they should, and will have a completely unrealistic impression of the data.
The difference between 1 pixel and 0 pixels will be enough to show that there is a value there, but will not be enough to skew the data in any meaningful way, in most cases.