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 0 4,7..
dataSeries lineThickness Number 2 4,7..
dataSeries fillOpacity Number .7 .2,.4,1 etc

Basic Area Chart

Try Editing The Code

Area Chart With Additional Customization

Try Editing The Code

  Integrations:    

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

18 Comments

  3. lionnel says:

    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 !

  4. sam says:

    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.

  5. RJ says:

    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.

    • Sanjoy says:

      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.

  6. Subhannita says:

    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…

If you have any questions, please feel free to ask in our forums. Ask Question