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.

by amcharts

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 = generateChartData();

    var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "dataDateFormat": "DD/MM/YYYY",
        "theme": "none",
        "pathToImages": "http://www.amcharts.com/lib/3/images/",
        "legend": {
            "useGraphSettings": true
        },

        "dataProvider": chartData,

        "valueAxes": [{
            "id": "v1",
            "axisColor": "#DADADA",
            "axisThickness": 1,
            "gridAlpha": 0,
            "axisAlpha": 1,
            "position": "left"
        }],

        "graphs": [{            
                valueAxis:"600406",
                "lineColor": "#0079C6",
                "bullet": "round",
                "bulletBorderThickness": 1,
                "hideBulletsCount": 30,
                "title": "Moore Capital Management LLC",
                "valueField": "600406",
                "fillAlphas": 0,
                "lineThickness": 3                
                    }, {
                valueAxis:"342",
                "lineColor": "#73BA00",
                "bullet": "round",
                "bulletBorderThickness": 1,
                "hideBulletsCount": 30,
                "title": "Moore Global Fixed Income ",
                "valueField": "342",
                "fillAlphas": 0,
                "lineThickness": 3                
                    }, {
                valueAxis:"7228",
                "lineColor": "#CCFC80",
                "bullet": "round",
                "bulletBorderThickness": 1,
                "hideBulletsCount": 30,
                "title": "Moore Macro Strategy",
                "valueField": "7228",
                "fillAlphas": 0,
                "lineThickness": 3                
                    }, {
                valueAxis:"7227",
                "lineColor": "#A6BC82",
                "bullet": "round",
                "bulletBorderThickness": 1,
                "hideBulletsCount": 30,
                "title":...