JavaScript Area ChartMulti-Series

VIEW MORE AREA CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
An area chart is a line chart with the areas below the lines filled with colors. To create an area chart using KoolChart's JavaScript charting library, the <Area2DChart> and <Area2DSeries> elements must be set in Layout.
<Area2DChart showDataTips="true" dataTipDisplayMode="axis">
...
<series>
<Area2DSeries yField="goods" form="curve" displayName="goods">
...
</Area2DSeries>
</series>
...
</Area2DChart>
In this JavaScript chart example, three <Area2DSeries> elements are set to display three series-data on the chart
<Area2DChart showDataTips="true" dataTipDisplayMode="axis">
...
<series>
<Area2DSeries yField="goods" form="curve" displayName="goods">
...
</Area2DSeries>
<Area2DSeries yField="income" form="curve" displayName="income">
...
</Area2DSeries>
<Area2DSeries yField="service" form="curve" displayName="service">
...
</Area2DSeries>
</series>
...
</Area2DChart>