2021-12-09 14:24:42 +00:00
|
|
|
<div class="grid p-fluid">
|
|
|
|
|
<div class="col-12 lg:col-6">
|
|
|
|
|
<div class="card">
|
2021-12-22 13:06:49 +00:00
|
|
|
<h5>Linear Chart</h5>
|
2021-12-09 14:24:42 +00:00
|
|
|
<p-chart type="line" [data]="lineData" [options]="lineOptions" [style]="{'width': '50%'}"></p-chart>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card flex flex-column align-items-center">
|
2021-12-22 13:06:49 +00:00
|
|
|
<h5>Pie Chart</h5>
|
|
|
|
|
<p-chart type="pie" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
|
2021-12-09 14:24:42 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card flex flex-column align-items-center">
|
2021-12-22 13:06:49 +00:00
|
|
|
<h5>Polar Area Chart</h5>
|
|
|
|
|
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions" [style]="{'width': '50%'}"></p-chart>
|
2021-12-09 14:24:42 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-12 lg:col-6">
|
|
|
|
|
<div class="card">
|
2021-12-22 13:06:49 +00:00
|
|
|
<h5>Bar Chart</h5>
|
2021-12-09 14:24:42 +00:00
|
|
|
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card flex flex-column align-items-center">
|
2021-12-22 13:06:49 +00:00
|
|
|
<h5>Doughnut Chart</h5>
|
|
|
|
|
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
|
2021-12-09 14:24:42 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card flex flex-column align-items-center">
|
2021-12-22 13:06:49 +00:00
|
|
|
<h5>Radar Chart</h5>
|
|
|
|
|
<p-chart type="radar" [data]="radarData" [options]="radarOptions" [style]="{'width': '50%'}"></p-chart>
|
2021-12-09 14:24:42 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
