HighCharts area graph - show tooltip only on hover of marker

charts, highcharts, javascript, tooltip

Solution

That behavior isn't possible to change - instead you disable marker and tooltip (return false in formatter) for area series and use scatter series. Scatter series exactly the way you need. See example: http://jsfiddle.net/mZt3r/

        tooltip :{ 
            shared: true,
            formatter: function() {
                if(this.points && this.points.length == 1) {
                    return false;   
                } else {
                    var p = this;
                    return 'x: ' + p.x + '<br/>y: ' + p.y;
                }
            }
        },

Problem

I've searched for the answer but didn't find anything helpful. So maybe you can help me how to make a tooltip to appear only on hover when I'm hovering the dot (marker). Area type makes tooltip show anywhere on the chart. All I want is just to show the tooltip when my mouse is on the marker. Seems that chart "thinks" that my mouse is already on the marking cause when I move pointer markers under the pointer become highlighted. Tried to bind on events of series object but didn't work out. ``` var chartOptions = { chart: { height: $('.sidebar').height()-100, zoomType: 'xy', spacingRight: 20, animation: true, renderTo: 'chart-container', }, xAxis: { gridLineWidth: 1, type: 'linear', maxZoom: 1, // fourteen days title: { text: 'Frequency (HZ)' } }, yAxis: { min: 0, title: { text: 'Acceleration (g)' } }, tooltip: { enabled: true, formatter: function(){ if(this.series.name != 'Acceleration (g): '){ return false ; }else { return 'Frequency: <b>'+ parseFloat(this.x).toFixed(2) + '</b> Hz<br/>'+ 'Acceleration: <b>' + parseFloat(this.y).toFixed(4) + '</b> g'; } }, }, legend: { enabled: false }, plotOptions: { area: { trackByArea: false, fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1}, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, lineWidth: 1, marker: { enabled: false, }, shadow: false, states: { hover: { lineWidth: 1 } }, threshold: null, }, }, series: [{ type: 'area', name: 'Acceleration (g): ', pointInterval: 1.953125, pointStart: 0, data: dataFFT.y, }] }; ```

Original source