87 lines
3.9 KiB
HTML
87 lines
3.9 KiB
HTML
<section class="chartist">
|
|
<div class="row">
|
|
<div class="col-md-6 ">
|
|
<ba-card title="Lines" baCardClass="with-scroll">
|
|
<h5>Simple line chart</h5>
|
|
<ba-chartist-chart baChartistChartClass="ct-chart"
|
|
baChartistChartType="Line"
|
|
[baChartistChartData]="data['simpleLineData']"
|
|
[baChartistChartOptions]="data['simpleLineOptions']">
|
|
</ba-chartist-chart>
|
|
|
|
<h5>Line chart with area</h5>
|
|
<ba-chartist-chart baChartistChartClass="ct-chart"
|
|
baChartistChartType="Line"
|
|
[baChartistChartData]="data['areaLineData']"
|
|
[baChartistChartOptions]="data['areaLineOptions']">
|
|
</ba-chartist-chart>
|
|
|
|
<h5>Bi-polar line chart with area only</h5>
|
|
<ba-chartist-chart baChartistChartClass="ct-chart"
|
|
baChartistChartType="Line"
|
|
[baChartistChartData]="data['biLineData']"
|
|
[baChartistChartOptions]="data['biLineOptions']">
|
|
</ba-chartist-chart>
|
|
</ba-card>
|
|
</div>
|
|
|
|
<div class="col-md-6 ">
|
|
<ba-card title="Bars" baCardClass="with-scroll">
|
|
<h5>Simple bar chart</h5>
|
|
<ba-chartist-chart baChartistChartClass="ct-chart"
|
|
baChartistChartType="Bar"
|
|
[baChartistChartData]="data['simpleBarData']"
|
|
[baChartistChartOptions]="data['simpleBarOptions']">
|
|
</ba-chartist-chart>
|
|
|
|
<h5>Multi-line labels bar chart</h5>
|
|
<ba-chartist-chart baChartistChartClass="ct-chart"
|
|
baChartistChartType="Bar"
|
|
[baChartistChartData]="data['multiBarData']"
|
|
[baChartistChartOptions]="data['multiBarOptions']"
|
|
[baChartistChartResponsive]="data['multiBarResponsive']">
|
|
</ba-chartist-chart>
|
|
|
|
<h5>Stacked bar chart</h5>
|
|
<ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
|
|
baChartistChartType="Bar"
|
|
[baChartistChartData]="data['stackedBarData']"
|
|
[baChartistChartOptions]="data['stackedBarOptions']">
|
|
</ba-chartist-chart>
|
|
</ba-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<ba-card title="Pies & Donuts" baCardClass="with-scroll">
|
|
<div class="row">
|
|
<div class="col-md-12 col-lg-4"><h5>Simple Pie</h5>
|
|
<ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
|
|
baChartistChartType="Pie"
|
|
[baChartistChartData]="data['simplePieData']"
|
|
[baChartistChartOptions]="data['simplePieOptions']"
|
|
[baChartistChartResponsive]="getResponsive(20, 80)">
|
|
</ba-chartist-chart>
|
|
</div>
|
|
<div class="col-md-12 col-lg-4"><h5>Pie with labels</h5>
|
|
<ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
|
|
baChartistChartType="Pie"
|
|
[baChartistChartData]="data['labelsPieData']"
|
|
[baChartistChartOptions]="data['labelsPieOptions']">
|
|
</ba-chartist-chart>
|
|
</div>
|
|
<div class="col-md-12 col-lg-4"><h5>Donut</h5>
|
|
<ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
|
|
baChartistChartType="Pie"
|
|
[baChartistChartData]="data['simpleDonutData']"
|
|
[baChartistChartOptions]="data['simpleDonutOptions']"
|
|
[baChartistChartResponsive]="getResponsive(5, 40)">
|
|
</ba-chartist-chart>
|
|
</div>
|
|
</div>
|
|
</ba-card>
|
|
</div>
|
|
</div>
|
|
</section>
|