Waterfall - Highcharts custom renderer chart and tooltip

http://stackoverflow.com/questions/20002162/highcharts-custom-renderer-chart-and-tooltip

by katalin_2003

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {


  var chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'spline'
      },
      title: {
        text: 'Custom waterfall with unequal width'
      },
      xAxis: {
        min: 0,
        max: 50,
        reversed: true
      },
      yAxis: {
        title: {
          text: 'Share'
        },
        min: 0,
        max: 100
      },
      tooltip: {
        enabled: true,
        followPointer: true
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      series: [{
        name: 'basicData',
        color: '#000000',
        visible: true, //for demonstration purpose
        data: [
          [50, 40],
          [45, 48],
          [39, 52],
          [303, 68],
          [22, 75],
          [15, 89],
          [5, 100]
        ]
      }]
    },
    //add function for custom renderer
    function(chart) {

      var points = this.series[0].data,
        addMarginX = this.plotLeft,
        addMarginY = this.plotTop,
        xZero = Math.round(this.series[0].points[0].plotX),
        yZero = Math.round(this.chartHeight - addMarginY - this.yAxis[0].bottom),
        xAll = [],
        yAll = [],
        widthAll = [],
        heightAll = [];

      //renderer group for all rectangulars
      rectGroup = chart.renderer.g()
        .attr({
          zIndex: 5
        })
        .add();

      //draw for each point a rectangular
      for (var i = 0; i < points.length; i++) {

        var x = Math.round(points[i].plotX) + addMarginX,
          y = Math.round(points[i].plotY) + addMarginY,
          width,
          height;

        if (i === 0) { //for the first rect height is defined by pixel difference of yAxis and yValue
          height = yZero - Math.round(points[i].plotY)
        } else { // else height is pixel difference of yValue and preceeding yValue
          height = Math.round(points[i - 1].plotY) - Math.round(points[i].plotY)
        };
   ...