Data Manipulation


AnyChart html5 charting library gives you the ability to create, read, update and delete charts in real-time without full reloading and redrawing - our charts can be changed fast and in a flexible manner.

You can solve the following tasks using some easy-in-use Java Script methods:

  • Data-Stream - you can add some new data to the end of a data set while optional removing some data from its beginning.
  • Add - you can add one or several points to the end of the data set.
  • Meta-add - you can add some metadata to the chart.
  • Update - you can change the values of the existing points.
  • Remove - you can remove any point from a data set.
  • Insert - you can add one or several points between the existing points.

This article shows how to solve each of these tasks.

Note: this article contains information on data mapping and series data managing. Information about managing chart's series and series visual appearance can be found in Series Manipulation article.


AnyChart allows to adjust chart at any moment after it is displayed. To add an element into a data set, use append() method. Here is the example:

data.append({x: 'P6', value: 20});

That's how it looks with the button which adds a point on a click.


Note that in case of adding a point automatically it has to be done as a function:

function addPoint() {
  // first index for new point
  newIndex = (data.mapAs().getRowsCount())+1;
  // append data
    // x value
    x: 'P' + indexSetter,
    // random value from 1 to 100
    value : Math.floor((Math.random() * 100)+ 1)

Note: Append method helps to add information only at the end of the data set. To add information into any position see .insert() method section below.


Adding custom data is nice function, but charts have to be as useful and informative as possible. Any point of a chart may contain meta information. If you want some meta information to be available when a part of a chart is hovered over, that's how your code will look like:

// function, if listener triggers
function(e) {
  var info = view.get(e.pointIndex, 'value');

  // receive all necessary information and summarize it in one variable
  var infoGetter = 'Application Name:<b>' +
  view.get(e.pointIndex, 'x') +
  '</b><br/><a style="color: red;">Average</a> Unique Users: <b>' +
  view.get(e.pointIndex, 'value') +
  '</b> millions<br/>Year Over Year: <b>' +
  view.get(e.pointIndex, 'yoy') + '%</b>' ;
  // set received information into chart title

Note that this method allows you to show this information in the chart title.



Updating the charts' data sets is to be done using set() method. That's how a part of a code should look like:

function(e) {
    e.pointIndex,   // get index of clicked column
    'value',        // get parameter to update
    view.get(e.pointIndex, 'value') + 5 // parameter updating

The sample below demonstrates adding 5 to a column on click.



As far as we can add data, we can remove it too. Use remove() method to delete a row from data set.

dataset.remove(0); // removes first row in dataset

This sample below demonstrates removing data. After clicking on any column the first one will be removed.



insert() method is very similar to the append() method, but it allows you to insert information into any position.

  {x: 'new P', value : 50},   //new data to set
  2                           //row to insert data

The sample illustrates inserting new column into a random position and colorizing it with red.


Data Streaming

Data Streaming adds and/or removes points sequentially, usually by timer. To stream data we can use two methods described above: append() and remove(). In the sample below we set event on button click which appends a new data point with random value and removes first data point.

That's how our function code looks like:

function() {
  // append data

    // x value
    x: 'P' + indexSetter,

    // random value from 1 to 500
    value : Math.floor((Math.random() * 500)+ 1)

  // removes first point
200   // interval