chartjs.component.html

<app-page-header
  title="Charts"
  title1="Charts"
  activeitem="Chart Js"
></app-page-header>
<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-6">
  <div class="col-span-12 xl:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Chartjs Line Chart</h5>
      </div>
      <div class="box-body">
        <canvas
          id="chartjs-line"
          class="chartjs-chart"
          baseChart
          [data]="lineChartData"
          [options]="lineChartOptions"
          [legend]="lineChartLegend"
          [type]="lineChartType"
        >
        </canvas>
      </div>
    </div>
  </div>
  <div class="col-span-12 xl:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Chartjs Bar Chart</h5>
      </div>
      <div class="box-body">
        <canvas
          id="chartjs-bar"
          class="chartjs-chart"
          baseChart
          [data]="barChart2Data"
          [options]="barChart2Options"
          [legend]="barChart2Legend"
          [type]="barChart2Type"
        >
        </canvas>
      </div>
    </div>
  </div>
  <div class="col-span-12 xl:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Chartjs Bubble Chart</h5>
      </div>
      <div class="box-body">
        <canvas
          id="chartjs-bubble"
          class="chartjs-chart"
          baseChart
          [data]="bubbleChartData"
          [options]="bubbleChartOptions"
          [legend]="true"
          [type]="bubbleChartType"
        >
        </canvas>
      </div>
    </div>
  </div>
  <div class="col-span-12 xl:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Chartjs Scatter Chart</h5>
      </div>
      <div class="box-body">
        <canvas
          id="chartjs-scatter"
          class="chartjs-chart chart"
          baseChart
          [data]="scatterChartData"
          [options]="scatterChartOptions"
          [type]="scatterChartType"
        >
        </canvas>
      </div>
    </div>
  </div>
  <div class="col-span-12 xl:col-span-4 md:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Chartjs Pie Chart</h5>
      </div>
      <div class="box-body mx-auto pie-charts">
        <canvas
          baseChart
          class="pie-chart"
          [type]="'pie'"
          [datasets]="pieChartDatasets"
          [labels]="pieChartLabels"
          [options]="pieChartOptions"
          [plugins]="pieChartPlugins"
          [legend]="pieChartLegend"
        >
        </canvas>
      </div>
    </div>
  </div>
  <div class="col-span-12 xl:col-span-4 md:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Chartjs Doughnut Chart</h5>
      </div>
      <div class="box-body mx-auto pie-charts">
        <canvas
          class="pie-chart"
          baseChart
          [labels]="doughnutChartLabels"
          [datasets]="doughnutChartDatasets"
          [options]="doughnutChartOptions"
          [legend]="true"
          [type]="'doughnut'"
        >
        </canvas>
      </div>
    </div>
  </div>
  <div class="col-span-12 xl:col-span-4 md:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Chartjs Polar Chart</h5>
      </div>
      <div class="box-body pie-charts mx-auto">
        <canvas
          class="pie-chart"
          id="chartjs-polar"
          baseChart
          [data]="polarAreaChartData"
          [legend]="polarAreaLegend"
          [options]="polarChartOptions"
          [type]="polarAreaChartType"
        >
        </canvas>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->