Highcharts draggable glitchy tooltip

Question

I have two sets of data in a line chart using Highcharts. I need to be able to customize the tooltip formatter, however whenever I drag a point the tooltip is incredibly glitchy (similar to flickering on and off a bunch of times).

Here is the JSFiddle: http://jsfiddle.net/utnz2b9e/39/

The behavior I am talking about can be seen when dragging a blue point on the right side of the chart. When dragging, the crosshair flickers back and forth between that point and the x-value of the last non-null data point of the other series. In addition, the tooltip flickers and makes it hard to look at.

Javascript -

var planChart;
var startDates = ["Fri, 11/6/15", "Sat, 11/7/15", "Sun, 11/8/15", "Mon, 11/9/15", "Tue, 11/10/15", "Wed, 11/11/15", "Thu, 11/12/15", "Fri, 11/13/15", "Sat, 11/14/15", "Sun, 11/15/15", "Mon, 11/16/15", "Tue, 11/17/15", "Wed, 11/18/15", "Thu, 11/19/15", "Fri, 11/20/15"];

 $(function () {
    planChart = {
        chart: {
            renderTo: 'container',
            animation: false
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: startDates,
            crosshair: true,
        },
        yAxis: [{ // Primary yAxis
            labels: {
                style: {
                    color: '#20709e'
                },
                formatter:function() {
                    return Highcharts.numberFormat(this.value, 0, '', ',');
                }
            },
            title: {
                text: 'Data',
                margin: 30,
                style: {
                    color: '#20709e'
                }
            }
        }, { // Secondary yAxis
            gridLineWidth: 0,
            labels: {
                style: {
                    color: '#B9B9B9'
                },
                formatter:function() {
                    return Highcharts.numberFormat(this.value, 0, '', ',');
                }
            },
            title: {
                text: '',
            },
            opposite: true
        }],

        plotOptions: {
            series: {
                connectNulls: true,
                stickyTracking: false,
                marker: {
                    enabled: true,
                    symbol: 'circle'
                }
            },
            line: {
                cursor: 'ns-resize'
            }
        },

        tooltip: {
            shared: true,
            formatter: function () {
                var tooltipString = this.x + '<br/>';
                this.points.forEach(function(point) {
                    if (point.series.index == 0) {
                        var y = Math.round(point.y);
                        var roundingFactor = Math.min(100, Math.pow(10, y.toString().length - 2)); 
                        tooltipString += '<span style="color:' + point.color + '">\u25CF</span> ' + '<b> ' + Math.ceil(point.y / roundingFactor) * roundingFactor + '</b><br/>';
                    } else if (point.series.index == 1) {
                        var y = Math.round(point.y);
                        var roundingFactor = Math.min(100, Math.pow(10, y.toString().length - 2)); 
                        tooltipString += '<span style="color:' + point.color + '">\u25CF</span> ' + '<b> ' + Math.ceil(point.y / roundingFactor) * roundingFactor + '</b><br/>';
                    }
                })
                return tooltipString;
            }
        },

        credits: {
            enabled: false
        },

        series: [{
            name: '1',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, null, 18.3, 13.9, 9.6, 7.0, 7.0, 7.0],
            draggableY: true,
            yAxis: 0,
           dragMinY: 0,
            style: {
                color: '#20709e'
            }
        }, {
            name: '2',
            data: [null, null, 20, 30, 40, 40, 30, 34, 43, null, null, null, null, null, null],
            draggableY: true,
            yAxis: 0,
           dragMinY: 0,
            style: {
                color: '#20709e'
            }
        }]
    }
    $('.actualPlansPlot').highcharts(planChart);
     });
}

Mark Mark · Accepted Answer · 2016-10-25T17:43:42

My suggestion is to add animation: false to your tooltip { } properties.

See API: http://api.highcharts.com/highcharts/tooltip.animation

This will prevent the animation that it attempts to do each time the location is moved, and will result in a nice smooth transition when adjusting the points.

As a side note: if you have no number formatting, and end up with large amounts of decimals on some points, and none on other points, you will still notice some flickering. This would be solved by applying some consistent number formatting.

Highcharts draggable glitchy tooltip

1 Answers