I have been working on Highcharts just got into one trouble the problem is when there is not any value exist for some data on the chart then it displays 0 on it which looks bad kindly checkout the following jsfiddle the labels on the chart gets populated by the following function but i am not able to put check on it that it should display only those bars whose values are above zero on the chart
http://jsfiddle.net/CzHyC/3/ [KINDLY CHECK THE APPLE section on the chart]
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'blue'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'gray',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [0, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
});
Re: Reducing the space between the bars (column range) As you can read in the API about pointWidth: When null, the width is calculated from the pointPadding and groupPadding. So, disable pointWidth property and then you can use pointPadding or groupPadding.
Just don't create the highchart and insert text saying "No Data Available". Without any code, this is the most help you're likely to get.
use chart. setSize(width, height, doAnimation = true); in your actual resize function to set the height and width dynamically.
style: Highcharts. Defaults to {"fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif","fontSize":"12px"} .
This is the way I have dealt with this situation.
When you are creating your data points, instead of putting a 0, put a null.
So for example your data array will look like:
[null,3,4,7,2]
instead of [0,3,4,7,2]
Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With