DISABLE ADBLOCK

ADBlock is blocking some content on the site

ADBlock errore

Highcharts - Incorrect tooltip position when zoomed in

StackOverflow https://stackoverflow.com/questions/14276300

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.

Solution 3

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

OTHER TIPS

You could write your own tooltip positioning function:

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

Upgrading highcharts to version 3 solved the problem for me.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow