Pie Charts

Pie charts are percentage-based. A pie chart models percentage-based data as individual slices of pie. Each data set must be defined as a new instance of the SingleValueColumn object. Follow these steps to configure your portlet to use pie charts.

1. Import the chart taglib along with the PieChartConfig and SingleValueColumn classes into your bundle’s init.jsp file:

   <%@ taglib prefix="chart" uri="http://liferay.com/tld/chart" %>
   <%@ page import="com.liferay.frontend.taglib.chart.model.percentage.pie.PieChartConfig" %>
   <%@ page import="com.liferay.frontend.taglib.chart.model.SingleValueColumn" %>
   

2. Add the following Java scriptlet to the top of your view.jsp:

   <%
   PieChartConfig _pieChartConfig = new PieChartConfig();
   
   _pieChartConfig.addColumn(
     new SingleValueColumn("data1", 85.4)
   );
   
   %>
   

3. Add the <chart> taglib to the view.jsp, passing the _pieChartConfig as the config attribute’s value:

   <chart:pie
     config="<%= _pieChartConfig %>"
   />
   

Awesome! Now you know how to create pie charts for your apps.

Related Topics

• Donut Charts
• Pie Charts
• Using Clay Taglibs in Your Portlet

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center