Angular Charts

The Angular charts refer to a graphical representation of data.
Keep reading these simple yet flexible Javascript charting for designers & developers.

Usage

In order to use this charts on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

After that, simply copy one of the code examples demonstrated below and include it in your page.

Examples

Line chart

<div class="card">
  <div class="card-body">
    <div class=" chart">
      <canvas class=" chart-canvas" id="chart-sales"> </canvas>
    </div>
  </div>
</div>

<!-- Typescript -->

// chart sales
// Variables
  var chartSales = document.getElementById('chart-sales');

  // Init chart
  var salesChart = new Chart(chartSales, {
    type: 'line',
    data: chartSalesData.data,
    options: chartSalesData.options
  });

Bars Table Example

Bars chart

<div class="card">
  <div class="card-body">
    <div class="chart">
      <!-- Chart wrapper -->
      <canvas id="chart-orders" class="chart-canvas"></canvas>
    </div>
  </div>
</div>

<!-- Typescript -->

import { Component, OnInit, } from '@angular/core';
  import Chart from 'chart.js';

  // core components
  import {
    chartOptions,
    parseOptions,
    chartExample1,
    chartExample2
  } from "../../variables/charts";

  @Component({
    selector: 'app-charts',
    templateUrl: './charts.component.html',
    styleUrls: ['./charts.component.scss']
  })
  export class ChartsComponent implements OnInit {
    public data: any;
    public salesChart;
    public clicked: boolean = true;
    public clicked1: boolean = false;

    constructor() { }

    ngOnInit() {

      var chartOrders = document.getElementById('chart-orders');

      parseOptions(Chart, chartOptions());

      var ordersChart = new Chart(chartOrders, {
        type: 'bar',
        options: chartExample2.options,
        data: chartExample2.data
      });
    }

  }

Points Table Example PRO

Points chart

<div class=" card-body">
  <div class=" chart">
    <canvas class=" chart-canvas" id="chart-points"> </canvas>
  </div>
</div>

<!-- Typescript -->

// chart points
// Variables
var chartPoints = document.getElementById('chart-points');

// Init chart
var pointsChart = new Chart(chartPoints, {
  type: 'line',
  data: chartPointsData.data,
  options: chartPointsData.options
});

Doughnut Table Example PRO

Doughnut chart

<div class="card">
  <div class=" card-body">
    <div class=" chart">
      <canvas class=" chart-canvas" id="chart-doughnut"> </canvas>
    </div>
  </div>
</div>

<!-- Typescript -->

// chart doughnut
// Variables
var chartDoughnut = document.getElementById('chart-doughnut');

// Init chart
var doughnutChart = new Chart(chartDoughnut, {
 type: 'doughnut',
 data: chartDoughnutData.data,
 options: chartDoughnutData.options
});

Pie Table Example PRO

Pie chart

<div class=" card-body">
  <div class=" chart">
    <canvas class=" chart-canvas" id="chart-pie"> </canvas>
  </div>
</div>

<!-- Typescript -->

// chart pie
// Variables
var chartPie = document.getElementById('chart-pie');

// Init chart
var pieChart = new Chart(chartPie, {
 type: 'pie',
 data: chartPieData.data,
 options: chartPieData.options
});

Bar stacked Table Example PRO

Bar stacked chart

Dark card with chart Example

<div class="card bg-default">
  <div class="card-body">
    <div class=" chart">
      <canvas class=" chart-canvas" id="chart-sales-dark"> </canvas>
    </div>
  </div>
</div>

<!-- Typescript -->

// chart sales
// Variables
var chartSales = document.getElementById('chart-sales-dark');

// Init chart
var salesChart = new Chart(chartSales, {
  type: 'line',
  data: chartSalesData.data,
  options: chartSalesData.options
});