Area Charts are similar to Line Charts but it shades the area that it covers with color. It is used to visualize cumulative value over a period of time or range. Given example shows simple jQuery Area Chart along with HTML source code that you can edit in-browser or save to run locally.
window.onload = function () { var options = { animationEnabled: true, title:{ text: "Company Revenue by Year" }, axisY: { title: "Revenue in USD", valueFormatString: "#0,,.", suffix: "mn", prefix: "$" }, data: [{ type: "area", markerSize: 5, xValueFormatString: "YYYY", yValueFormatString: "$#,##0.##", dataPoints: [ { x: new Date(2000, 0), y: 2289000 }, { x: new Date(2001, 0), y: 2830000 }, { x: new Date(2002, 0), y: 1009000 }, { x: new Date(2003, 0), y: 1840000 }, { x: new Date(2004, 0), y: 1396000 }, { x: new Date(2005, 0), y: 2613000 }, { x: new Date(2006, 0), y: 1821000 }, { x: new Date(2007, 0), y: 1000000 }, { x: new Date(2008, 0), y: 1397000 }, { x: new Date(2009, 0), y: 1506000 }, { x: new Date(2010, 0), y: 1798000 }, { x: new Date(2011, 0), y: 2386000 }, { x: new Date(2012, 0), y: 4704000}, { x: new Date(2013, 0), y: 4926000 }, { x: new Date(2014, 0), y: 1394000 }, { x: new Date(2015, 0), y: 972000 }, { x: new Date(2016, 0), y: 1140000 } ] }] }; $("#chartContainer").CanvasJSChart(options); }
The opacity of filled area in area charts can be customized using fillOpacity property. Other related customizations include markerType, lineThickness, color, lineColor, etc.