ngx-admin/src/app/pages/charts/components/chartistJs/chartistJs.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>