Stacked Area 100% is similar to Stacked Area Chart except that areas are rendered as a percentage of total value at any given point. Given example shows simple jQuery Stacked Area 100% Chart along with HTML5 source code that you can edit in-browser or save to run it locally.
window.onload = function () { var options = { theme: "light2", animationEnabled: true, title:{ text: "Quaterly Sales by Region - 2016" }, axisY: { suffix: "%" }, toolTip: { shared: true }, data: [ { type: "stackedArea100", name: "East", yValueFormatString: "#0.##\"%\"", showInLegend: "true", dataPoints: [ { label: "Q1", y: 21 }, { label: "Q2", y: 26 }, { label: "Q3", y: 23 }, { label: "Q4", y: 30 } ] }, { type: "stackedArea100", name: "West", yValueFormatString: "#0.##\"%\"", showInLegend: "true", dataPoints: [ { label: "Q1", y: 20 }, { label: "Q2", y: 26 }, { label: "Q3", y: 23 }, { label: "Q4", y: 31 } ] }, { type: "stackedArea100", name: "Central", yValueFormatString: "#0.##\"%\"", showInLegend: "true", dataPoints: [ { label: "Q1", y: 20 }, { label: "Q2", y: 26 }, { label: "Q3", y: 25 }, { label: "Q4", y: 30 } ] }, { type: "stackedArea100", name: "South", yValueFormatString: "#0.##\"%\"", showInLegend: "true", dataPoints: [ { label: "Q1", y: 18 }, { label: "Q2", y: 25 }, { label: "Q3", y: 30 }, { label: "Q4", y: 26 } ] }] }; $("#chartContainer").CanvasJSChart(options); }
You can customize the color of legend markers using legendMarkerColor property. Also, the type of the marker can be changed by setting the legendMarkerType. Other related customizations include legendMarkerBorderColor, etc.