Animating bar chart Columns with series.addPoint() - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

Animating bar chart Columns with series.addPoint()

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  chart: {//w  w w  .j a v a  2s. c o m
    type: 'column',
    margin: [70, 50, 60, 80],
    events: {
      click: function(e) {
        // find the clicked values and the series
        var x = Math.round(e.xAxis[0].value),
          y = Math.round(e.yAxis[0].value),
          series = this.series[0],
          i = 0,
          points,
          pointsLength,
          thisIndex;
        // Add it
        series.addPoint([x, 0]);
        points = series.points;
        pointsLength = points.length;
        thisIndex = pointsLength - 1;
        for (; i < pointsLength; i++) {
          if (points[i].x > x) {
            thisIndex = i - 1;
            break;
          }
        }
        series.points[thisIndex].update(y);
      }
    }
  },
  title: {
    text: 'User supplied data'
  },
  subtitle: {
    text: 'Click the plot area to add a point. Click a point to remove it.'
  },
  xAxis: {
    gridLineWidth: 1,
    minPadding: 0.2,
    maxPadding: 0.2,
    maxZoom: 60
  },
  yAxis: {
    title: {
      text: 'Value'
    },
    minPadding: 0.2,
    maxPadding: 0.2,
    maxZoom: 60,
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  legend: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  plotOptions: {
    series: {
      lineWidth: 1,
      point: {
        events: {
          'click': function() {
            if (this.series.data.length > 1) {
              this.remove();
            }
          }
        }
      }
    }
  },
  series: [{
    data: [
      [20, 20],
      [80, 80]
    ]
  }]
});

      </script>  
   </body>
</html>

Related Tutorials