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

Area Chart


Data that is arranged in columns or rows on a worksheet can be plotted in an area chart. Area charts emphasize the magnitude of change over time, and can be used to draw attention to the total value across a trend. For example, data that represents profit over time can be plotted in an area chart to emphasize the total profit.


Depending on the data model and the visualization purpose the AnyChart JavaScript area charts may contain one or several series.

Single Series Area Chart

Let's have a look at the single series area chart created using the following data: sales of ACME Corp. through several months in a year:

February $12000
March $18000
April $11000
May $9000

Now we need to convert this data table into the format that can be used by AnyChart. See more about formats in Supported Data Formats article.

In terms of AnyChart data model we have one series of data (Sales) with categories that hold months names. Each point in series represents monthly sales volume. We will use the easiest method of data setting, which looks like this:[
["January", 10000],
["February", 12000],
["March", 18000],
["April", 11000],
["May", 9000]
  chart = anychart.area();

As you can see, we've created a Data Set. Every object is a point with parameters. The first column is a category and the second one is a value.

Here it is: now AnyChart can visualize your data. Look at the chart sample below and click on "Launch in playground" to see the full source code, alter and play with the sample or download it.

JsFiddle Playground

Single Series Spline Area Chart

For better look of your charts you can use SplineArea chart type:

// data
var data =[
        ['January', 10000],
        ['February', 12000],
        ['March', 18000],
        ['April', 11000],
        ['May', 9000]

// setting chart type
chart = anychart.area();
// set data and define chart type

Here is the same chart as shown above, but in Spline mode:

JsFiddle Playground


To compare two or more data sets you should use multi-series area charts as it is shown in the sample below.

Let's compare 2003 sales to 2004 sales:

Month2003 Sales2004 Sales
February $12000 $15000
March $18000 $16000
April $11000 $15000
May $9000 $14000

As we have done in single series area sample above we need to convert this table in AnyChart format, the only difference between these two samples is the fact that now we have two series of the data: one series for each year, and we give proper names to each series:

// define data set
var data =[
  ["January", 10000],
  ["February", 12000],
  ["March", 18000],
  ["April", 11000],
  ["May", 9000]

var chart = anychart.area3d();


As now we have multi-series chart we don't want to set the chart type for each series individually (there can be more than two series in a multi-series chart), so we set the chart as anychart.area(). Now all series in the chart will be of Area type by default.

JsFiddle Playground

3D Area Chart

Anychart provides an opportunity to use 3d version of area charts. Use .area3d() method to create 3d area chart.

// define data set
var data =[
  ["Department Stores", 637166],
  ["Discount Stores", 721630],
  ["Men's/Women's Specialty Stores", 148662],
  ["All other outlets", 90000]

// create 3D chart's plot
var chart = anychart.area3d();

// create series

As you can see from the snippet above, you need to use .area() method to create 3D area series. Here is a sample of a 3D area chart:

JsFiddle Playground

Note: more information about 3D charts can be found in 3D Charts article.


In AnyChart JavaScript Charting Library, axis is an object that allows you to configure chart grid, axis line along with tick marks and labels, axis scale, settings, etc. In this section we will quickly demonstrate how we can adjust axis orientation, invert axis scale and control minimum and maximum values, you can find all axis features in Axes tutorial.


With AnyChart Charting Framework you can place axes to any side of the chart, all you need to do is to adjust orientation with .orientation() parameter of .yAxis() or .xAxis() method.

Axes position depends on plot type, orientation and inversion of axes.


Here is the demonstration of this feature in the Single-series sample:

JsFiddle Playground


AnyChart allows you to invert any axis (Y, X or any extra). Inversion is controlled by axis .inverted():


And here is the demonstration of Y Axis inversion on the Single-series sample:

JsFiddle Playground

Minimum and Maximum

AnyChart calculates axis minimum and maximum automatically. You can see this on the scale inversion chart sample above: the minimal value on the Y Axis is 8.000, and the maximum is 20.000. You can control these values by setting .maximum() and .minimum(). :


Here is the demonstration of maximum and minimum values in the Single-series sample:

JsFiddle Playground


In this section we will describe main parts of area chart visualization and ways to adjust it. Visual appearances of areas are defined using certain methods. For Area chart the main thing is the .fill() method.

Basic Sample

Now, let's look how to change the look of an Area. Here is a basic sample:

        .stroke('#56561a', 4, 0.4)
        .hatchFill('diagonalbrick', 'gray')
        .hoverHatchFill('diagonalbrick', 'black');

Using such settings we've created a look with area colored in Gold, rather thick border line, hatch filled with DiagonalBrick. Also, we've defined that when the area is hovered it's hatch will be highlighted with black and the chart will be filled with dark red.

Now let's apply this style to the chart:

JsFiddle Playground

Image Fill

Color is not the only way to design a chart. In this sample we will demonstrate how to use a picture as a fill:

        src: '',
        mode: acgraph.vector.ImageFillMode.STRETCH

JsFiddle Playground

Labels and Tooltips

In this section we will explain how to add and configure data labels and tooltips.

If you want to configure data labels and tooltips for all series - you should use .labels() and .tooltip() methods. Adding attributes with values to these methods, you can change visual appearance, position and format of the same-named elements.

When formatting data labels' text we use .textFormatter() method to show month's name.

  var series = chart.area(data);
return point.x;
  series.tooltip().enabled(true).titleFormatter(function(){return 'Your Tooltip Title'});

JsFiddle Playground


Marker is an object with a specified shape, size and color or an image used to mark and to identify chart elements. AnyChart allows to add markers to any data element including areas.

In the sample below we take single-series data described above and mark the highest point in series with a "Star" of the "Gold" color.

To make the marker more visually appealing we set its size to 12px.

{x: 'March', value: 18000, marker:{type:'star5', fill:'gold', size: 12, enabled: true}, hoverMarker: {size: 22}},

It can be clearly seen on the chart that March was the most successful month in sales:

JsFiddle Playground

Hatch Fills

AnyChart technology allows printing charts out. Some printers may render colors differently from the image we see on monitors, so it may be hard to distinguish charts colored differently on monitors and similarly on prints. Also it is impossible to identify colors on prints of monochrome printers. AnyChart has a very useful feature - hatch fillings, ideal for differentiating elements on black and white display or for those who are color blind. Hatch fill is fully-independent structure, it doesn't rely on color fill and has its own settings.

To demonstrate hatch fill feature we've prepared the following sample. As you can see, it is completely monochrome. We have a chart with 3 series, each with 5 data points. For every series we've applied different hatch fills by setting hatch type for the .hatchFill() parameter.


JsFiddle Playground


You can see a lot of other samples in AnyChart Web Area Charts Gallery.