CODEWITHSUNDEEP
highcharts
user1138464
user1138464

Reputation: 39

Highchart stacked column tooltip issue

I am using Highstock-1.2.4 along with jQuery in my application. In one of the dialog I highstocks stacked column.

My issue is, if there are graph with large y-axis value (eg. 200 unit) along with a graph with small y-axis value (eg. 1 unit), then tooltip for the small graphs are not displayed properly.

For better understanding I have provided example.

In the above example "jan" has very small graph.If u hover over it (i.e jan) u get tooltip for series '3' and '4' which is expected one. Now if you resize the graph (using resize handler present at right corner) to reduce the graph width and then hover over small graph at "jan" youu get tooltip only for series 4 (which is 0).

Please some one guide how to handle this kind of issues.

Sample Code:

<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>

<div id="resizer" style="min-width: 350px; min-height: 200px">
    <div id="inner-resizer">
        <div id="container" style="height: 300px">
        </div>
    </div>
</div>



var container = $('#container')[0];
$('#resizer').resizable({
    resize: function() {
        chart.setSize(
            this.offsetWidth - 20,
            this.offsetHeight - 20,
            false
        );
    }
});

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container',
        type: 'column',
        zoomType:'xy'
},
credits: {
    enabled: false
},

xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
plotOptions: {
        series: {
            stacking: 'normal'
        }
    },

series: [{
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    },
            {
        data: [5, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]

});

Upvotes: 1

Views: 2735

Answers (1)

Hardik Mishra
Hardik Mishra

Reputation: 14877

I think its not tool tip issue, when you re size the graph to very small size, one can not judge mouse over so perfectly than regular size.

Even, in the regular size if you over the graph shows tooltip for other series later.

What I can suggest here is try

tooltip:{
        shared:true
    }

Link: http://jsfiddle.net/mhardik/yPLjR/623/

With this you can get tooltip even with lower size.

EDIT:

Set 

plotOptions: {
            series: {
                stacking: 'percent'
            }
        }

which will set column height relative to percent. So, you will get bar even for very low values.

Upvotes: 1

Related Questions