Highchart: in bar chart, how to increment a bar according to data?

Question

Code in concern: http://jsfiddle.net/h6qrbpwo/10/

$(function() {
  var chart;
  var d = 1;
  var index = 0;

  function getYValue(chartObj, seriesIndex, xValue) {
    var yValue = null;
    var points = chartObj.series[seriesIndex].points;
    for (var i = 0; i < points.length; i++) {
        if(i == points.length - 1 && points[i].x != xValue){    
        return 0;
      }
      yValue = points[i].y;
    }
    return yValue;
  }
  $('#b').click(function() {
    console.log(index);
    var d = getYValue(chart, index, 20.5);
    console.log(d);
    d++;
    console.log(d);
    chart.addSeries({
      grouping: false,
      data: [
        [20.5, d]
      ]
    });
    index ++;
  })
  chart = new Highcharts.Chart({
    chart: {
      type: 'column',
      renderTo: 'container'
    },
    title: {
      text: ''
    },
    xAxis: {
      min: 0,
      max: 100
    },
    credits: {
      enabled: false
    },
    series: [{
      name: '',
      data: [5, 3, 4, 7, 2]
    }]
  });
});

(Note: this JSFiddle is just for demonstration purpose.)

I would like to have a bar chart with bars with animated incrementation (ie only the part increased) instead of redrawing the whole bar.

Thanks in advance.

Answer 1

You can do something like this.

$(function() {
  var chart;
  var d = 1;
  var index = 0;

  function getYValue(chartObj, seriesIndex, xValue) {
    var yValue = null;
    var points = chartObj.series[seriesIndex].points;
    for (var i = 0; i < points.length; i++) {
        if(i == points.length - 1 && points[i].x != xValue){    
        return 0;
      }
      yValue = points[i].y;
    }
    return yValue;
  }
  $('#b').click(function() {
        //var newValue = series[0].data[0];
    //chart.series[0].points[0].update(100);
    chart.series[0].addPoint(0, false, false, false);
    chart.redraw(false);
    chart.series[0].points[chart.series[0].points.length - 1].update(1);
    /*
    console.log(index);
    var d = getYValue(chart, index, 20.5);
    console.log(d);
    d++;
    console.log(d);
    chart.addSeries({
      grouping: false,
      data: [
        [20.5, d]
      ]
    });
    index ++;
    */
  })
  chart = new Highcharts.Chart({
    chart: {
      type: 'column',
      renderTo: 'container'
    },
    title: {
      text: ''
    },
    xAxis: {
      min: 0,
      //max: 10
    },
    credits: {
      enabled: false
    },
    series: [{
      name: '',
      data: [5, 3, 4, 7, 2]
    }]
  });
});

You can see the demo here .