General information

AnyStock Charts can process table-formatted data. The most appropriate way of doing this is using table() method. You can find more about table data model in AnyChart Table Data Model article.

First of all, we need to create a table for our data. It looks like this:

// create a data table
table =;

Here you should set which table column contain the x-axis value. If it is not defined in the first table column, then you should set the index of the column with x-axis values to the table() method, because it is set to 0 by default.


Data as array of arrays

Now, we should add some data to our newly created table. We use addData() method for this.

table =;

    ['2015-12-24T12:00:00', 511.53, 514.98, 505.79, 506.40],
    ['2015-12-25T12:00:00', 512.53, 514.88, 505.69, 510.34],
    ['2015-12-26T12:00:00', 511.83, 514.98, 505.59, 507.23],
    ['2015-12-27T12:00:00', 511.22, 515.30, 505.49, 506.47],
    ['2015-12-28T12:00:00', 511.53, 514.98, 505.79, 506.40],
    ['2015-12-29T12:00:00', 512.53, 513.88, 505.69, 510.34],
    ['2015-12-30T12:00:00', 511.83, 512.98, 502.59, 503.23],
    ['2015-12-31T12:00:00', 511.22, 515.30, 505.49, 506.47],
    ['2016-01-01T12:00:00', 510.35, 515.72, 505.23, 508.80]

JsFiddle Playground

Note! Each data table has to have a key column with unique values (x axis values). If there are rows with the same value in this field, AnyStock will use only the last row with the given x axis value.

Note that the X value has to contain date in any format. It means that you can set data as a timestamp, Date Time String or UTC - but it has to be a date.

Data as array of objects

Now it's posiible to set the Data not only as array of arrays, but as array of objects. It's being done completely the same way as setting the Data though objects in Basic Charts. Look at the following piece of code:

// create data table on loaded data
var table ="x");

    {"x":"2015-12-24T12:00:00", "open":511.53, "high":514.98, "low":505.79, "close":506.40},
    {"x":"2015-12-25T12:00:00", "open":512.53, "high":514.88, "low":505.69, "close":510.34},
    {"x":"2015-12-26T12:00:00", "open":511.83, "high":514.98, "low":505.59, "close":507.23},
    {"x":"2015-12-27T12:00:00", "open":511.22, "high":515.30, "low":505.49, "close":506.47},
    {"x":"2015-12-28T12:00:00", "open":511.53, "high":514.98, "low":505.79, "close":506.40},
    {"x":"2015-12-29T12:00:00", "open":512.53, "high":513.88, "low":505.69, "close":510.34},
    {"x":"2015-12-30T12:00:00", "open":511.83, "high":512.98, "low":502.59, "close":503.23},
    {"x":"2015-12-31T12:00:00", "open":511.22, "high":515.30, "low":505.49, "close":506.47},
    {"x":"2016-01-01T12:00:00", "open":510.35, "high":515.72, "low":505.23, "close":508.80}

JsFiddle Playground


After we have set the data, we need to map it properly. For that we should create a new mapping object using mapAs() function.

// create a mapping
var mapping = table.mapAs();

This object now will be responsible for the data mapping. Here we should add fields using addField() method. Each field has to get at least two parameters: the name of the field to add and the index of the column where the field should get values from. These will map the data correctly.

The third parameter is an grouping/approximation mode: when you've got too many data points and they are grouped to be shown on a small plot, the grouping type is chosen according to the field name (so, "first" will be for "open", "last" for close, "average" for "value", etc.). If you want to change it, add the aggregation type you want to use as the third parameter to the addField() method.

That's how it should look like:

// mapping the data
mapping.addField('open', 1, 'first');
mapping.addField('high', 2, 'max');

You can also map the data in a line as usual:

// create a mapping
var mapping = table.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4});

In case of defining the data as array of objects, we need to set the field names instead of numbers:

// create a mapping
var mapping = table.mapAs({'open':"open", 'high': "high", 'low': "low", 'close': "close"});

That's how we map the data for AnyStock. For more information see the Using Table Data Model article.


We can remove data points using two methods: remove() or removeFirst(). Which one to choose depends on what exactly do we need.

removeFirst() method removes the given number of data points from the beginning of a table. This removes the first ten rows from the table:

// remove first ten rows

remove() method can remove any point or a range of them. Look at the following code sample, it will remove a range of data points:

// remove a range of rows
table.remove('2015-12-24T12:00:00', '2015-12-27T12:00:00');

In case you need to remove only one point, provide the same date as start and end:

// remove one row

Using this method with no arguments removes all points, so be careful.

You are looking at an outdated 7.11.0 version of this document. Switch to the 8.0.1 version to see the up to date information.