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

Series Manipulation

Overview

Series is a single set of data, that is visualized on a chart's plot. Series has a type and series data can be changed any time you want, when data changes in the data set or you update series properties you see updated visualization instantly.

Note: This article contains information about managing charts series. Information about manipulating series data can be found in Data Manipulation article.

Adding Series

In most cases you can create a new series using a method that is named after the series type (such as .column(), .bar(), .area(), etc.) and use data array or data set as a parameter for the method. There is one more way of creating multi-series charts: the .addSeries() method can add any number of series to a chart. Data for the method can be passed in different formats: it can be a simple array of data objects, a data set or a data view. You can pass any number of parameters to create any number of series. But before adding series, you have to define the type of the series to be added. The type of series added by .addSeries() is set by the .defaultSeriesType() method.

// set chart type
var chart = anychart.cartesian();

// set default series type
chart.defaultSeriesType("column");

// create series
chart.addSeries(data1, data2, data3);

All the series in the sample below are added using .addSeries() method. Open the sample in the playground to examine the code.

JsFiddle Playground

Identifying Series

When you add multiple series in such way you may need to obtain a link to some or all of of them for further adjustments. You can use either series id or series index to do this.

Index

Each series has an index and this index can be used to obtain a link to a series object. The .getSeriesAt() method can be used to obtain a link to a series and it uses series index as a parameter. Index is a sequence number of the series which is set by AnyChart Engine automatically and it can not be changed.

// get forth series
var series = chart.getSeriesAt(3);

// set series inner color
series.fill("red");

If you try to pass number which exceeds the number of series on the chart, null will be returned. This makes it quite convenient to adjust every series in a chart using while loop. Here is how it is done:

// create chart
var chart = anychart.column();

// define default series type
chart.defaultSeriesType("column");

// set data for multiple series
chart.addSeries(data1, data2, data3);

var i=0;
// create a loop
while (chart.getSeriesAt(i)){
  // rename each series
  chart.getSeriesAt(i).name("Series #" + (i+1));
  i++;
}

Also, you can get the exact number of series in a chart using .getSeriesCount() method and use for loop to cycle through all series. Note that indexes are always continuous, this cycle can be executed at any time and you will always go through every series, just as you will with while loop. Here is how it is done:

var seriesIndexes = [];
for (var i=0; i<chart.getSeriesCount();i++){
  seriesIndexes.push(chart.getSeriesAt(i).index());
}

Sample below demonstrates the code shown above. Each series is renamed and legend is enabled to show modified series names.

JsFiddle Playground

ID

Another way to obtain a link to a series object is to use series id. The .id() method sets a unique identifier for a series. When custom id is set, the link to a series object can be obtained using .getSeries() method with the series id as a parameter.

// create chart
var chart = anychart.column();

// create variable for series
var series;
// create first series
series = chart.column(data1);
// set id for the first series
series.id("First Series");
// create second series
series = chart.column(data2);
// set id for second series
series.id("Second Series");

// get first series
series = chart.getSeries("First Series");
// rename first series
series.name("First Series");

Removing Series

As far as any chart can be adjusted or added at any time, you can also remove any series. If you know the id of the series that should be removed, invoke .removeSeries() method and use series id as a parameter for this method. In the situation, when the series has no id it can be removed using .removeSeriesAt() method. .removeSeriesAt() method uses series index as a parameter and removes the series with the given index.

// create chart
var chart = anychart.bar();

// create 3 series
chart.addSeries(data0, data1, data2);

// remove third series
chart.removeSeriesAt(2);

Along with removing series one by one you can remove all series from the chart using one single method. Call .removeAllSeries() method to remove all series from the current chart. Note, that if you use data sets and data mapping - the original data will not be lost while managing series and series data, you can create new series use mappings again.

Click the labels in the sample below to add or remove series.

JsFiddle Playground