Show Nav

Area Charts

Overview

An area chart or area graph is based on a line chart, but with the area between the line and axis filled in. There are three different area chart types: the standard 2-D, 3-D, and vertical. You can modify them to create segmented, spline, stepped, and stacked. They can contain single or multiple data sets, as well as arrays with null values and array of arrays. Once you have your basic chart, you can customize your scales (category scale, time-series scale); style your lines, markers, and backgrounds; and more. See our ZingChart Gallery for inspiration on all the different area chart possibilities.

Area Chart Types

Use the "type" attribute to specify your chart type. You can choose between a standard two-dimensional area chart ("area"), three-dimensional area chart ("area3d"), or vertical area chart ("varea").

Note: All three area chart types can be modified to display segmented, spline, and/or stepped lines. You can also stack data sets to create standard stacked or 100% stacked charts. See our Chart-Specific Properties section below.

Area Chart

Our standard area chart is horizontally-oriented, and specified by the "area" value. Data points are connected by segmented lines (default). They can display single or multiple data sets.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "area", 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]} 
  ] 
}

3-D Area Chart

A 3-D area chart is a variation on the standard area chart, specified by the "area3d" value. You have the option to display your chart in a true 3-D (default) or isometric view, and can adjust the aspect's angle, depth, and zoom from within a "3d-aspect" object. See our 3-D Charts page for more information.

Note: Use the "alpha-area" attribute to adjust the transparency levels to ensure all of the series are visible.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "area3d", 
  "plot":{
    "alpha-area":0.7
  },
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}
  ] 
}

Vertical Area Chart

With vertical area charts, the axes are switched so that the x-axis runs vertically and the y-axis runs horizontally. This chart type is specified by the "varea" value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "varea", 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}
  ] 
}

Trellis Area Chart

Sometimes it's helpful to view similar data sets in separate charts. To do this, create a graphset array and place each data set in its own chart object. (Our Adding Additional Charts page explains in greater detail how to create a graphset array, as well as how to insert multiple charts throughout your webpage.) From our vertical area chart example above, the three data sets were separated to create a trellis chart of three smaller vertical charts.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "graphset":[ 
    { 
      "type": "varea", 
      "height":"100%", 
      "width":"33.33%", 
      "x":"0%", 
      "y":"0%", 
      "series":[
        {"values":[20,40,25,50,15,45,33,34]}
      ] 
    }, 
    { 
      "type": "varea", 
      "height":"100%", 
      "width":"33.33%", 
      "x":"33.33%", 
      "y":"0%", 
      "series":[
        {"values":[5,30,21,18,59,50,28,33]}
      ] 
    }, 
    { 
      "type": 
      "varea", 
      "height":"100%", 
      "width":"33.33%", 
      "x":"66.66%", 
      "y":"0%", 
      "series":[
        {"values":[30,5,18,21,33,41,29,15]}
      ] 
    } 
  ]
}

Series Data

Area charts support series arrays containing single or multiple data sets, as well as arrays with null values and array of arrays.

Array

Arrays allow you to present consistent, linear data. Values are represented on the y-axis. (The corresponding x-axis values are automatically provided, with the default value starting at zero and increasing sequentially by one.)

"series":[
  {"values":[y0, y1, y2, y3, ..., yN]},   /* Add a single data set */
  {"values":[y0, y1, y2, y3, ..., yN]},   /* or multiple data sets*/
  {"values":[y0, y1, y2, y3, ..., yN]},
]

If you have missing data, you can use an array with null values (to show breaks) or an array of arrays (to continue over breaks).

Array with Null Values

Null values are useful for showing breaks or blanks in your plot. Sometimes you'll have data that is unavailable, and want to convey this in your area chart. In the example below, plot indices 2 and 5 have been replaced with null values.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "area",
  "series":[
  /* Plot indices 2 and 5 are unavailable */
    {"values":[20,40,null,50,15,null,33,34]}
  ]
}

Array of Arrays

Sometimes you'll have missing data, but still want to display a continuous line. An array of arrays is useful because it allows you to specify your corresponding x-axis values. In the example below, the data points for plot indices 2 and 5 are unavailable. Unlike an array with null values, the line bridges over those missing points to convey a seamless line.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "area",
  "series":[
  /* Plot indices 2 and 5 are unavailable */
    {"values":[[0,20],[1,40],[3,50],[4,15],[6,33],[7,34]]} 
  ]
}

Chart-Specific Properties

Our area charts can be further modified with the "aspect" and "stacked" attributes to create spline, stepped, and stacked.

Aspect

The "aspect" value options for area charts are: "segmented" (default), "spline", and "stepped". They can be applied globally to affect all plots or locally to affect specific plots.

To apply aspects globally, create a plot object. Insert your aspect attribute.

Note: The example below lists this chart's default properties, which are segmented lines and unstacked data sets. How to create stacked area charts is discussed further below.

"plot":{ /* Plot object */
  "aspect":"segmented", /* "spline" | "stepped" */ 
  "stacked":false /* or true */
}

To apply aspects locally, add them to the chart data object you want the change to apply to.

Note: If you specify an aspect value in the plot object and an aspect value in a chart data object, the latter will overwrite the former.

"series":[
  { /* Chart data object */
    "aspect":"segmented,"
    "values":[y0, y1, y2, y3, ..., yN]
  },
  { /* Chart data object */
    "aspect":"spline", 
    "values":[y0, y1, y2, y3, ..., yN]
  },
  { /* Chart data object */
    "aspect":"stepped", 
    "values":[y0, y1, y2, y3, ..., yN]
  }
]

Segmented Area Chart

With segmented area charts, data points are connected by straight lines. They are the default aspect for area charts, and so specifying their type in the plot object (as shown below) is optional.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "area", 
  "plot":{ 
    "aspect":"segmented" 
  }, 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]} 
  ] 
}

Spline Area Chart

Unlike the default segmented charts, spline area charts connect their data points with gently curving lines. Depending on what you are trying to do, this line type may better represent your data.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "area", 
  "plot":{ 
    "aspect":"spline" 
  }, 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}
  ] 
}

Stepped Area Chart

Stepped area charts are useful for emphasizing differences, comparisons, and sudden changes in data. They are depicted through a series of stepped horizontal and vertical lines.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "area", 
  "plot":{ 
    "aspect":"stepped" 
  }, 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}
  ] 
}

Stacked

Our "stacked" attribute allows you to create stacked area charts. To do this, add the attribute to your plot object. Set the value to true. (By default, the value is set to false.) You can also specify your stack type: "normal" (default) to create a standard stacked area chart or "100%" to create a 100% stacked area chart.

Standard Stacked Area Chart

With this type, data sets are stacked on top of each other so that the top line represents the sum total of all of the data plotted.

Note: Since this is the default stacked chart type, you do not (though you can) have to include the "stack-type" attribute.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "area", 
  "plot":{ 
    "stacked":true, 
    "stack-type":"normal" /* Optional declaration. */ 
  }, 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}, 
  ] 
}

100% Stacked Area Chart

Instead of showing the actual values for each of your data sets, a 100% stacked area chart will represent your data as a percentage of the whole. The top line will rest at 100 on the y-axis, with each data set occupying its relative percentage area below it.

Note: With this chart type, you'll want to specify your minimum and maximum y-axis values. You can do so by creating a "scale-y" object, and setting your "min-value" attribute to 0 and your "max-value" attribute to 100.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "area", 
  "plot":{ 
    "stacked":true, 
    "stack-type":"100%" 
  }, 
  "scale-y":{ 
    "min-value":0, 
    "max-value":100 
  }, 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}
  ] 
}

Additional Chart Stacking Options

You can also separate your data sets into one or more stacks. To do so, add a "stack" attribute to each of your chart data objects. For data sets you want included in the first stack, set the value to 1. For data sets you want included in the second stack, set the value to 2, and so on.

Note: Creating multiple stacks in an area chart may be limited in its usefulness. (See our example below, where the stacks overlap each other, making it difficult to make sense of the data.) For this, a bar chart may better serve your purposes.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "area", 
  "plot":{ 
    "stacked":true
  }, 
  "series": [ 
    { 
      "values":[20,40,25,50,15,45,33,34], 
      "stack":1 
    }, 
    { 
      "values":[5,30,21,18,59,50,28,33], 
      "stack":1 
    }, 
    { 
      "values":[30,5,18,21,33,41,29,15], 
      "stack":2 
    }
  ] 
}

Further Customization and Styling

Once you have your basic chart, you'll want to next customize and style it. This section explains how to add a category or time-series scale to your area chart, as well as how to style your lines, markers, and backgrounds (the shaded regions below your lines).

Scales

The default scales for both the x-axis and the y-axis is a quantitative (or numeric) one, with the value starting at zero. Users often want to modify their horizontal axis to display a category or time-series scale, which we explain how to do below. Note that while scale modification changes are made to the x-axis ("scale-x" object), the same changes can be made to the y-axis ("scale-y" object) as well.

Category Scale

A category (or qualitative) scale can consist of words and/or numbers, such as time periods (months, years, dates), categories, names, places, events, and more. To add one to your chart, create a "scale-x" object, and insert a "labels" array. In the array, you can include scale labels such as:

"labels":["Jan", "Feb", "March", "April", "May", "June"]
"labels":[2000, 2002, 2004, 2006, 2008, 2010]
"labels":["Q1","Q2","Q3","Q4"]

Note: Do not confuse a "labels" array with a "label" object. The latter allows you to specify your scale title.

Note: You can set your margins to automatically adjust, helping to ensure all your scale labels fit comfortably within your chart. Create a "plotarea" object. Add an "adjust-layout" attribute, and set the value to true.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "area",
  "plotarea": {
    "adjust-layout":true /* For automatic margin adjustment. */
  },
  "scale-x": {
    "label":{ /* Add a scale title with a label object. */
      "text":"Above is an example of a category scale",
    },
    /* Add your scale labels with a labels array. */
    "labels":["Jan","Feb","March","April","May","June","July","Aug"]
  },
  "series": [
    {"values":[20,40,25,50,15,45,33,34]},
    {"values":[5,30,21,18,59,50,28,33]}
  ]
};

Time-Series Scale

A time-series scale is used to represent increments of time, and can be formatted to display anything from years down to milliseconds. Create a "scale-x" object. Inside, add a "min-value" attribute, "step" attribute, and "transform" object.

For the "min-value" and "step", you'll need to specify your minimum and step scale values in Unix time. Unix time (also known as Epoch time) is measured by the number of milliseconds that have elapsed since January 1, 1970, UTC time. To calculate your timestamps, you can use an online conversion tool such as Epoch Converter.

Note: Make sure to provide your Unix time in milliseconds. You can convert seconds to milliseconds by multiplying by 1000.

The "transform" object will convert your Unix timestamps into a more readable date and/or time. In the object, add a "type" attribute, and set the value to "date". Next, add an "all" attribute. You can specify how you want your time-series scale formatted by using our tokens. Choose your tokens here.

Note: To ensure your time-series scale reads in UTC time (ZingChart currently defaults to local time), add a "utc" attribute, and set the value to true.

Note: You can set your margins to automatically adjust, helping to ensure all your scale labels fit comfortably within your chart. Create a "plotarea" object. Add an "adjust-layout" attribute, and set the value to true.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "area",
  "utc":true, /* Force UTC time. */
  "plotarea": {
    "adjust-layout":true /* For automatic margin adjustment. */
  },
  "scale-x":{
    "label":{ /* Add a scale title with a label object. */
      "text":"Above is an example of a time-series scale",
    },
    "min-value":1420070400000, /* Unix timestamp for Jan 1, 2015. */
    "step":"day",
    "transform":{ /* Converts your Unix timestamp to a human readable format. */
      "type":"date", /* Set your transform type to "date". */
      "all":"%m.%d.%y" /* Specify your date/time format, using tokens. */
    }
  },
  "series": [
    {"values":[20,40,25,50,15,45,33,34]},
    {"values":[5,30,21,18,59,50,28,33]},
  ]
};

Styling

You can add all kinds of styles to your area chart. We discuss some of the basics here, specifically on how to style your lines, markers, and backgrounds. For further options, see our JSON Attributes/Syntax page.

Line Color, Style, and Width

Start in the chart data object of the plot you want to style. To specify your line color, add a "line-color" attribute. Provide your color as a hexadecimal or RGB value. To change your line style, add a "line-style" attribute, and then specify your choice of "solid" (default), "dashed", or "dotted" line. You can also change your line's width. Simply insert a "line-width" attribute, and provide a pixel value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "area",
  "series": [
    {
      "values":[20,40,25,50,15,45,33,34],
      "line-color":"#6666FF", /* hexadecimal or RGB value */
      "line-style":"dashed", /* "solid" | "dotted" */
      "line-width":5 /* in pixels */
    }
  ]
};

Marker Color, Size, and Width

Modify the color, size, and width of your markers. Create a "marker" object, and place it in the chart data object of the plot you want your changes to apply to. With markers, you can modify the fill (color and size) and border (color and width). For fill color, use a "background-color" attribute. Specify your fill size with a "size" attribute. For border color, use a "border-color" attribute. Specify your border width with a "border-width" attribute.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "area",
  "series": [
    {
      "values":[20,40,25,50,15,45,33,34],
      "marker":{ /* Marker object */
        "background-color":"#FF0066", /* hexadecimal or RGB value */
        "size":8, /* in pixels */
        "border-color":"#6666FF", /* hexadecimal or RBG value */
        "border-width":5 /* in pixels */
      }
    }
  ]
};

Background Color, Transparency, and Active Area

In addition to markers and lines, there is a shaded region below each plot line that you can adjust the color (single color or gradient), transparency, and tooltip activation area of. To change your background color, add a "background-color" attribute to your chart data object. For a single color, add one hexadecimal or RGB value. For a gradient (two color) background, add two values, separated by a space. You can adjust your color's transparency by adding an "alpha-area" attribute. Transparency ranges from 0 (clear) to 1 (solid). Provide a value between 0-1, making sure to insert a zero before your decimal point. Finally, you can extend your tooltip's activation area to the shaded region below your line. (By default, tooltips activate when you hover over the marker only.) Add an "active-area" attribute, and set the value to true.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "area",
  "plot":{
    "active-area":true /* Extends the tooltip's active area to the shaded region */
  },
  "series": [
    {
      "values":[20,40,25,50,15,45,33,34],
      "background-color":"#6666FF #FF0066", /* Single color or gradient (2 colors) */
      "alpha-area":0.5, /* Shaded region transparency */
    }
  ]
};

Summary

Got a question about how area charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.