Still have questions?
Contact support
You are looking at an outdated 7.10.0 version of this document. Switch to the 7.12.0 version to see the up to date information.

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 edited fast and flexible.

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:

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

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

JsFiddle Playground

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

function addPoint(e) {
// 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 on hovering a part of a chart, 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.

JsFiddle Playground


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.

JsFiddle Playground


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.

JsFiddle Playground


.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.

JsFiddle Playground

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(e) {

        // 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 

JsFiddle Playground