Highcharts (scatter) tooltip notworking

Question

                        chart: {
                            renderTo: 'chart-selection',
                            backgroundColor: null,
                            type: 'scatter'
                        },
                        title: {
                            text: txt + ' (' + title + ')'
                        },
                        plotOptions: {
                            tooltip: {
                                crosshairs: true,
                                headerFormat: '<b>{point.x}</b>',
                                pointFormat: '<b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
                            }
                        },
                        xAxis: {
                            type: 'datetime'
                        },
                        yAxis: {
                                title: {
                                    text: title
                                },
                                height: 200,
                                lineWidth: 2
                            },
                        series: [{
                                color: 'rgba(100, 100, 200, .5)',
                                data: datax
                            }]

datax = [{x:1381942800000,y:23.000,price:26.00,change:0.00},{x:1382029200000,y:45.000,price:23.000,change:0.00}];

this code not show the tooltip

tooltip: {
                            crosshairs: true, 
                            headerFormat: '<b>{point.x}</b>',
                            pointFormat: '<b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
                        }

Answer 1

The tooltip property is not meant to be directly under plotOptions, but inside the series(or scatter) sub property of the plotOptions

Any of the following changes should work

plotOptions.series.tooltip

plotOptions: {
    series: {
        tooltip: {
            crosshairs: true,
            headerFormat: '<b>{point.x}</b>',
            pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
        }
    }
}

plotOptions.scatter.tooltip

plotOptions: {
    scatter: {
        tooltip: {
            crosshairs: true,
            headerFormat: '<b>{point.x}</b>',
            pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
        }
    }
}

series[i].tooltip

 series: [{
        data: datax,
        tooltip: {
            crosshairs: true,
            headerFormat: '<b>{point.x}</b>',
            pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
        }
    }]

@jsFiddle

Answer 2

I was in the same situation and what I missed was a config call on my index.js file which is

Highcharts.setOptions({
plotOptions: {
area: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
arearange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areaspline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areasplinerange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
boxplot: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bubble: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
column: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
columnrange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
errorbar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
funnel: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
gauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
heatmap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
//line: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pie: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
polygon: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pyramid: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
scatter: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
//series: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
solidgauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
spline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
treemap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
waterfall: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
},
chart: {
reflow: false,
events: {
redraw: function () {
}
},
animation: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
},
tooltip: {
yDecimals: 2 // If you want to add 2 decimals
}
,
colors: ['rgb(124, 181, 236)']
});

And finally I found this after 2 days :) ... I am really sorry to make here busy about this stupid issue .After I deleted this config call on my index.js all my charts' tooltips are fixed . I hope I can help anybody having the same problem .

Answer 3

You need to use tooltip in general cofnigruation so you can remove plotOptions, and leave tooltip object like this:

xAxis: {

},
tooltip:{
    crosshairs: true,
        headerFormat: '<b>{point.x}</b>',
        pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}