Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove Zero From the HIGHCHART

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

});
like image 622
soft genic Avatar asked Jul 09 '12 19:07

soft genic


People also ask

How do you remove spaces between bars in Highcharts?

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.

How do I show no data available in Highcharts?

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.

How do I change the width and height of a Highchart?

use chart. setSize(width, height, doAnimation = true); in your actual resize function to set the height and width dynamically.

What is the default chart type in Highchart?

style: Highcharts. Defaults to {"fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif","fontSize":"12px"} .


1 Answers

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

like image 96
c0deNinja Avatar answered Oct 30 '22 14:10

c0deNinja