CODEWITHSUNDEEP
jqueryhighcharts
GautamD31
GautamD31

Reputation: 28763

Can we display a tooltip by default not by mouseover

I'm using highcharts and working fine ,and the tooltips are coming on mouseover of individual bars but I need to display them when the chart loads. I have tried like

tooltip:{enabled:true;}

but not working.can anyone suggest me a solution

Upvotes: 2

Views: 1532

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

Use inner function tooltip.refresh(point); see example: http://jsfiddle.net/3bQne/238/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function() {
                this.tooltip.refresh(this.series[0].data[0]);
            }
        }

    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]        
    }]
});

Of course, then you need to copy that tooltip, and then show for another point, and another.. I don't advice to use that solution (I'd prefer to use dataLabels from Mark's answer).

Upvotes: 3

Mark
Mark

Reputation: 108512

As said in the comments, highcharts has a single tooltip that is reused.

You could code something up that places it and then clones it at each point but instead I think this is a good use case for Highstock's flags capabilities.

    data = [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8];

    flagData = [];
    for (var i=0; i < data.length; i++){
        flagData.push({x: i, title: data[i]+""});    
    }

    $('#container').highcharts({ 
        series: [{
            data: data,
            id : 'dataseries',
            type: 'line'
        },{
            type : 'flags',
            data : flagData,
            onSeries : 'dataseries',
            width : 16,
            linkedTo: 'dataseries'
        }]            
    });

Produces:

enter image description here

Example fiddle here.

Upvotes: 1

Related Questions