Creating an Area chart

We can create an Area chart using the Line chart component by setting fill="true" to fill under the lines from the X-axis, which visually looks like an Area chart. Also, we can set stacked="true" to display the series stacked on top of the other series by adding data sets.

Let us see how we can create Area charts using the <p:lineChart> component by using fill and stacked attributes.

<p:lineChart title="Area Chart" value="#{chartController.chartModel}" 
  legendPosition="nw" style="width: 450px; height: 300px;"
  xaxisLabel="Year" yaxisLabel="No. of Posts" xaxisAngle="45" yaxisAngle="45"
  minY="0" maxY="1000"
  fill="true" stacked="true"/>

Here we have created a Stacked Area chart using the <p:lineChart> component by setting fill="true" and stacked="true".