Stacked Area

Our Serial chart supports stacked or <a href="/demos/100-stacked-area-chart/">100% stacked</a> areas. Technically, area graph is just a regular line graph with fill opacity set to some bigger than 0 value. This means you can easily switch from area to line only by modifying this property. And even more - you can simply change this area to smoothed-area or step-area chart by changing a single <strong>type</strong> property of <a href="http://docs.amcharts.com/3/javascriptcharts/AmGraph">AmGraph</a>. <h2>Hidden graphs</h2> Legend of our charts allows showing/hiding graphs by clicking on the legend item you want to hide or show. You can also define which of the graphs are hidden by default - notice, the "cars" graph is hidden at the moment the chart is loaded and you can show it if you click it's legend marker. <h2>Vertical lines and fills</h2> You can fill the area between two categories with some color, add annotation to it using Guides. The same guides are used to create a single-lines to mark some event. Guides can be added to both category and value axes.

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
    width : 100%;
    height : 500px;
    font-size : 11px;
}

JavaScript

var chartData = [{
    "date": "2012-01-01",
        "distance": -100,
        "duration": 408
}, {
    "date": "2012-01-02",
        "distance": 371,
        "duration": 482
}, {
    "date": "2012-01-03",
        "distance": -433,
        "duration": 562
}, {
    "date": "2012-01-04",
        "distance": 345,
        "duration": 379
}, {
    "date": "2012-01-05",
        "distance": -480,
        "duration": 501
}, {
    "date": "2012-01-06",
        "distance": 386,
        "duration": 443
}, {
    "date": "2012-01-07",
        "distance": -348,
        "duration": 405
}, {
    "date": "2012-01-08",
        "distance": -238,
        "duration": 309
}, {
    "date": "2012-01-09",
        "distance": 218,
        "duration": 287
}, {
    "date": "2012-01-10",
        "distance": 349,
        "duration": 485
}, {
    "date": "2012-01-11",
        "distance": 603,
        "duration": 890
}, {
    "date": "2012-01-12",
        "distance": 534,
        "duration": 810
}];
var chart;

AmCharts.ready(function () {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "date";
    chart.dataDateFormat = "YYYY-MM-DD";
    chart.marginTop = 0;

    // AXES
    // category axis
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true;
    categoryAxis.minPeriod = "DD";
    categoryAxis.gridAlpha = 0;


    // value                
    var valueAxis = new AmCharts.ValueAxis();

    var guide = new AmCharts.Guide();
    guide.value = 0;
    guide.lineColor = "#cc0000";
    guide.dashlength = 1;
    //guide.label="there";
    valueAxis.addGuide(guide);

    valueAxis.dashLength = 0;
    valueAxis.axisColor = "#dddddd";
    valueAxis.gridAlpha = 0;
    valueAxis.basevalue = 0;
    valueAxis.minimum = -500;


    chart.addValueAxis(valueAxis);

    // GRAPHS
    // distance graph
    var distanceGraph = new AmCharts.AmGraph();
    distanceGraph.valueField = "distance";
   ...