| (window.webpackJsonp=window.webpackJsonp||[]).push([[46],{340:function(e,t,r){"use strict";r.r(t),t.default='# Stacked Area Chart\nThe stacked area chart is a special kind of area chart. It is used to compare several data series in the same interval. The main difference between the area chart and stacked area chart is that the base of every series is over the previous one. Therefore, every time a line is measured, the area between the lines will be filled with color.\n\nIf there are several series and you want to analyze the part-to-whole relationship for every single one, which reflects the contribution of partial quantity to the total, you can use the stacked area chart. For instance, the contribution of one seller to the total sales.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHySthj74z">\n</iframe>\n\nHere are two different kinds of stacked area chart:\n\n+ <b>Traditional stacked chart</b>: Use the original value to stack, show the change in the whole process.\n+ <b>Percentage stacked chart</b>: The percentage stacked chart shows how did the relationship between series changed with time. The cumulative total is not the focus as this kind of chart. The important is to show the series distribution as the whole.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">\n</iframe>\n\n## Suggestion for Using Stacked Area Chart\n\n1. The area chart can\'t display data in many series that are closed to each others. It will make the chart hard to read: \n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">\n</iframe>\n\nWith the same series, stacked bar chart works better:\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">\n</iframe>\n\n<div class="article-look-outside">\n\t<div class="article-look-inside" style="padding-bottom:50%">\n\t <iframe class="article-look-content"\n\t src="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">\n\t </iframe>\n\t</div>\n</div>\n\n2. Although the stacked bar chart is good dealing with several series, try not to include more than 7 in one chart.\n\n3. Because the stacked bar chart provides the relation between part and whole, you should not include negative value in series.\n\n4. We suggest putting larger values on the top side of the chart, you will get a better display effect.\n'}}]); |