HTML5 & JS Area Charts

An Area chart is plotted by coloring the area between line joining all dataPoints and axisX. Each dataPoint has x variable determining the position on the horizontal axis and y variable determining the position of the vertical axis. An area chart is plotted to see the total value across a trend.

Cannot be combined with: Doughnut, Pie, Bar, Stacked Bar charts.




Area Chart Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries/ dataPoint markerType String “circle” “none”, “circle”, “square”, “cross”, “triangle”
dataSeries/ dataPoint markerColor String dataSeries Color “red”,”#1E90FF”..
dataSeries/ dataPoint markerBorderColor String dataSeries Color “red”,”#1E90FF”..
dataSeries/ dataPoint markerSize Number 0 5,10..
dataSeries/ dataPoint markerBorderThickness Number 1 4,7..
dataSeries lineThickness Number 2 4,7..
dataSeries fillOpacity Number .7 .2,.4,1 etc


Basic Area Chart

Try it Yourself by Editing the Code below.


Area Chart With Additional Customization

Try it Yourself by Editing the Code below.



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 18

  1. Hi ! my chart is having only negative value on Y axis (from -100 to 0). is it possible to make AreaChart fill the area from -100 to the Y value (the fill area will be under the line) instead of from 0 to the value (the area is filled over the line) ? thanks !

  2. Hi, I was just wondering, say I have an area chart, with like, 2 pieces of data on it, like this:

    data: [
    {
    type: “area”,
    dataPoints: [
    { x: new Date(2012, 08, 1), y: 5300 },
    { x: new Date(2012, 09, 1), y: 6000}
    ]
    }
    ]

    It basically leaves a huge gap between the graph and the Y axis, so it basically has the X axis pinned near the middle of the x axis, and leaves a huge margin to the left and right. I don’t really want this, I want the graph to look as normal as possible, without the waste of space.

  3. Is there a way to separately change the color of the line and the fill?

    Lets say I want to make the line red and the fill green.

    • We have considered this feature for future release. As of now you have to use two different dataSeries (one line and another of type area) with the same set of dataPoints to achieve this.

  4. Is there a way to color a part of the chart like area chart above a threshold? I’m guessing it’s a combination of both line and area chart…

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.