Highcharts - Incorrect tooltip position when zoomed in

By : Seer
Source: Stackoverflow.com
Question!

Alright folks, I think I've found either a bug in Highcharts, or my code... either way I'd greatly appreciate any assistance with this! I've prepared the code on JSFiddle here:

http://jsfiddle.net/wC3u7/4/

For completeness I'll post the code here too:

HTML:

<div id="salesReport"></div>

JS:

$(function () {

  var perShapeGradient = {
    x1: 0,
    y1: 0,
    x2: 1,
    y2: 0
  };

  var colors = Highcharts.getOptions().colors;

  colors = [{
    linearGradient: perShapeGradient,
    stops: [
      [0, '#2c95c2'],
      [1, '#0074a6']
    ]
  }, {
    linearGradient: perShapeGradient,
    stops: [
      [0, '#76b978'],
      [1, '#0db381']
    ]
  }];


  var weekDates = {
    "20121": "2012-01-02",
      "20122": "2012-01-09",
      "20123": "2012-01-16",
      "20124": "2012-01-23",
      "20125": "2012-01-30",
      "20126": "2012-02-06",
      "20127": "2012-02-13",
      "20128": "2012-02-20",
      "20129": "2012-02-27",
      "201210": "2012-03-05",
      "201211": "2012-03-12",
      "201212": "2012-03-19",
      "201213": "2012-03-26",
      "201214": "2012-04-02",
      "201215": "2012-04-09",
      "201216": "2012-04-16",
      "201217": "2012-04-23",
      "201218": "2012-04-30",
      "201219": "2012-05-07",
      "201220": "2012-05-14",
      "201221": "2012-05-21",
      "201222": "2012-05-28",
      "201223": "2012-06-04",
      "201224": "2012-06-11",
      "201225": "2012-06-18",
      "201226": "2012-06-25",
      "201227": "2012-07-02",
      "201228": "2012-07-09",
      "201229": "2012-07-16",
      "201230": "2012-07-23",
      "201231": "2012-07-30",
      "201232": "2012-08-06",
      "201233": "2012-08-13",
      "201234": "2012-08-20",
      "201235": "2012-08-27",
      "201236": "2012-09-03",
      "201237": "2012-09-10",
      "201238": "2012-09-17",
      "201239": "2012-09-24",
      "201240": "2012-10-01",
      "201241": "2012-10-08",
      "201242": "2012-10-15",
      "201243": "2012-10-22",
      "201244": "2012-10-29",
      "201245": "2012-11-05",
      "201246": "2012-11-12",
      "201247": "2012-11-19",
      "201248": "2012-11-26",
      "201249": "2012-12-03",
      "201250": "2012-12-10",
      "201251": "2012-12-17",
      "201252": "2012-12-24",
      "201253": "2012-12-31"
  };


  var salesChart = new Highcharts.Chart({
    chart: {
      renderTo: 'salesReport',
      zoomType: 'x',
      type: 'column'
    },
    credits: {
      enabled: false
    },
    colors: colors,
    title: {
      margin: 40,
      style: {
        fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
      },
      text: 'Buyer Revenue Chart'
    },
    subtitle: {
      style: {
        fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
        fontSize: '14px'
      },
      text: '<div class="chart-subtitle">' +
        '<span class="text-danger">Low <strong>23234</strong></span>' +
        '<span class="text-success">High <strong>23234</strong></span>' +
        '<span class="text-info">Average <strong>23234</strong></span>' +
        '</div>',
      useHTML: true
    },
    xAxis: {

      categories: [20121, 20122, 20123, 20124, 20125, 20126, 20127, 20128, 20129, 201210, 201211, 201212, 201213, 201214, 201215, 201216, 201217, 201218, 201219, 201220, 201221, 201222, 201223, 201224, 201225, 201226, 201227, 201228, 201229, 201230, 201231, 201232, 201233, 201234, 201235, 201236, 201237, 201238, 201239, 201240, 201241, 201242, 201243, 201244, 201245, 201246, 201247, 201248, 201249, 201250, 201251, 201252, 201253],

      title: {
        margin: 15,
        style: {
          color: 'black',
          fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
          fontSize: '13px'
        },
        text: 'Week Number'
      },
      labels: {
        step: 2,
        formatter: function () {
          return this.value.toString().substring(4, 6);
        }
      }
    },
    yAxis: {
      gridLineColor: '#eee',
      min: 0,
      title: {
        margin: 15,
        style: {
          color: 'black',
          fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
          fontSize: '13px'
        },
        text: focus
      },
      stackLabels: {
        enabled: false
      }
    },
    legend: {
      align: 'right',
      x: -100,
      verticalAlign: 'top',
      y: 20,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
      borderColor: '#eee',
      borderRadius: '3px',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      formatter: function () {
        var chart = this.series.chart;

        var categories = chart.xAxis[0].categories;
        var date = new Date(weekDates[this.x]);
        var index = 0;
        var text = '<div><b>' + date.getDate() + date.getPrefix() + ' ' + date.getRealMonth() + ', ' + date.getFullYear() + '</b></div><br /><table class="tooltable"><tbody>';

        while (this.x !== categories[index]) {
          index++;
        }

        $.each(chart.series, function (i, series) {
          text += '<tr>' +
            '<td><b>' + series.name + ': </b></td>' +
            '<td>' + series.data[i].y + '</td>' +
            '</tr>';
        });

        text += '<tr>' +
          '<td><b>Total: </b></td>' +
          '<td>' + this.point.stackTotal + '</td>' +
          '</tr></tbody></table>';

        return text;
      },
      useHTML: true
    },
    plotOptions: {
      column: {
        dataLabels: {
          enabled: false
        },
        groupPadding: 0.1,
        pointPadding: 0,
        stacking: 'normal'
      }
    },
    series: [{
      name: 'Customer Order',
      data: [2741600.12, 3240819.76, 2777109.68, 2832506.66, 2844861.41, 2657199.98, 2507996.89, 2581876.56, 2695478.28, 2715245.81, 2733065.46, 2773672.25, 2687606.05, 2110458.68, 2725741.05, 2919983.30, 2900213.99, 2991106.30, 2607697.77, 2850981.10, 2822168.71, 2634608.38, 1949254.79, 2879637.62, 2670026.79, 2658833.86, 2797097.39, 3077176.21, 2917786.83, 2808457.90, 2641205.61, 2783867.42, 2626519.93, 2846650.78, 2616641.59, 2845208.49, 2691537.53, 2786656.16, 2780019.11, 2856012.46, 2771617.11, 2667414.66, 2693243.67, 2827067.84, 2848628.11, 3223905.16, 2979840.25, 3427409.91, 3495786.77, 4378081.79, 3555828.67, 1144316.55, 2331124.51]
    }, {
      name: 'B2b Order',
      data: [655473.07, 865458.44, 797091.52, 986566.36, 897996.55, 914141.73, 811640.52, 829083.96, 907238.36, 851204.55, 867928.10, 884580.53, 861696.87, 555044.39, 610552.84, 852144.94, 1018430.40, 968275.48, 684276.99, 883282.90, 856661.99, 758853.96, 492659.84, 787532.12, 824337.42, 1016273.86, 842751.01, 883214.33, 978982.08, 859595.15, 892508.61, 834111.07, 774825.16, 860221.95, 766293.83, 900244.12, 896646.90, 819320.00, 896513.77, 923858.67, 912036.93, 922822.48, 874728.95, 909200.43, 838450.91, 911709.43, 1018102.85, 1022509.59, 949326.62, 1209897.51, 900874.52, 135964.34, 584075.05]
    }]
  });

  Array.prototype.max = function () {
    return Math.max.apply(Math, this);
  };

  Array.prototype.min = function () {
    return Math.min.apply(Math, this);
  };

  Date.prototype.getRealMonth = function () {
    if (this.getMonth() === 0) {
      return "January";
    }

    if (this.getMonth() == 1) {
      return "February";
    }

    if (this.getMonth() == 2) {
      return "March";
    }

    if (this.getMonth() == 3) {
      return "April";
    }

    if (this.getMonth() == 4) {
      return "May";
    }

    if (this.getMonth() == 5) {
      return "June";
    }

    if (this.getMonth() == 6) {
      return "July";
    }

    if (this.getMonth() == 7) {
      return "August";
    }

    if (this.getMonth() == 8) {
      return "September";
    }

    if (this.getMonth() == 9) {
      return "October";
    }

    if (this.getMonth() == 10) {
      return "November";
    }

    if (this.getMonth() == 11) {
      return "December";
    }
  };

  Date.prototype.getPrefix = function () {
    switch (this.getDate()) {
      case 1:
      case 21:
      case 31:
        return 'st';
      case 2:
      case 22:
        return 'nd';
      case 3:
      case 23:
        return 'rd';
      default:
        return 'th';
    }
  };

});

If you zoom in on the chart (select a region on the chart) then hover over any of the columns you should be able to see the problem I'm facing. The tooltips seem to offset themselves, almost as if they're trying to show where they would be be if you weren't zoomed in.

So, anyone got any clue as to what's going on?

Thanks for any assistance.

By : Seer


Answers

I think there is no problem, it has probably been fixed already in latest version of highcharts.

It looks like this after zooming in : enter image description here



You could write your own tooltip positioning function:

tooltip: {
   positioner: 
      function(boxWidth, boxHeight, point) {         
         return {x:point.plotX   20, y:point.plotY - 20
      };         
   }
}
By : jim31415


Upgrading highcharts to version 3 solved the problem for me.

By : sara


This video can help you solving your question :)
By: admin