Question

I am using highcharts to draw a column chart as following:

var chart;
var count = 0;
$(function () {
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'graph',
            type: 'column',
            margin: [ 50, 50, 100, 80]
        },
        title: {
            text: 'Random Data'
        },
        xAxis: {
            categories: [
                'T1',
                'T2'
            ],
            startOnTick: true,
            endOnTick: true,
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Y-Axis'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    'Tip is: '+ Highcharts.numberFormat(this.y, 1);
            }
        },
        series: [{
            name: 'Population',
            data: [34.4, 21.8],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
 });

});

I added the following function in order to add new points to the chart

 function addPoints(name,acc)
 {
   var series = chart.series[0];
   series.addPoint(acc, false, true);
   categories = chart.xAxis[0].categories;
   categories.push(name+count);
   count++;
   chart.xAxis[0].setCategories(categories, false);
   chart.redraw();
 }

The problem is that everytime I add a new point, one column shifts out of the chart. I would like to keep all columns in the chart view, so when I add a new point the chart just zooms out.

Check it on JSFiddle

Thanks in Advance ….

Answer 1

addPoint (Object options, [Boolean redraw], [Boolean shift], [Mixed animation])
Add a point to the series after render time.

Parameters

options: Number|Array|Object
The point options. If options isa single number, a point with that y value is appended to the series.If it is an array, it will be interpreted as x and y values respectively, or inthe case of OHLC or candlestick, as [x, open, high, low, close]. If it is an object, advanced options as outlined under series.data are applied.

redraw: Boolean
Defaults to true. Whether to redraw the chart after the point is added. When adding more thanone point, it is highly recommended that the redraw option beset to false, and instead chart.redraw() is explicitly calledafter the adding of points is finished.

shift: Boolean
Defaults to false. When shift is true, one point is shifted off the start of the series as one is appended to the end. Use this option for live charts monitoring a value over time.

animation: Mixed
Defaults to true. When true, the graph will be animated with default animationoptions. The animation can also be a configuration object with properties durationand easing.

series.addPoint(acc, false, true);
                             /\ here's the problem, it should be false

Reference

• http://api.highcharts.com/highstock#Series

Updated demo