How to use chart - 10 common examples

setChart(data: Array): void {
    if (this.chart) {
      this.chart.destroy();
    }
    this.chart = new Chart('chart', {
      type: this.chartTypeForm.value,
      data: {
        datasets: [{
          data: this.itemClasses.map(c => c.quantity),
          backgroundColor: this.colors
        }],
        labels: this.itemClasses.map(c => `${ c.name } x ${c.quantity}`)
      }
      // options: options
    });
  }

initializeChart(nextProps) {
    var Chart = require('chart.js')
    var el = ReactDOM.findDOMNode(this.canvassRef.current)
    var ctx = el.getContext("2d")
    var chart = new Chart(ctx, {type: nextProps.type, data: nextProps.data, options: nextProps.options || {}, plugins: nextProps.plugins || {}})
    this.state.chart = chart;
  }
}

renderChart() {
    this.setData(this.chartConfig)
    if (this.chartInstance) {
      this.chartInstance.update()
    } else {
      const canvas = this.chartCanvas.current
      const ctx = canvas.getContext('2d')
      this.chartInstance = new ChartJS(ctx, this.chartConfig)
    }
  }

createDoughnutChart() {
    this.myChart = new Chart(this.chartCanvas.nativeElement, {
      type: 'doughnut',
      data: {
        labels: this.getLabels(),
        datasets: [{
          label: 'Resultados',
          data: this.getValues(),
          backgroundColor: this.backgroundColor,
          hoverBackgroundColor: this.hoverBackgroundColor
        }]
      }
    });
  }

private initChartObj() {
        this.chartObj = new Chart(this.el.nativeElement.getContext('2d'), {
            type: 'horizontalBar',
            data: this.makeDataOption(),
            options: this.makeNormalOption()
        });
    }
    private makeDataOption(): any {

ionViewDidLoad(){
      this.chart = new Chart(this.progressChart.nativeElement, {
        type: 'doughnut',
        data: {
          datasets: [{
            data: [this.piggy.percentage, 100 - this.piggy.percentage],
            backgroundColor: [
              "#00FF00"
            ]
          }],
          
        }
      });
    }
  }

private createChart() {
    if (this.chart) {
      this.chart.destroy();
    }
    if (this.canvas) {
      const ctx = this.canvas.nativeElement;
      this.chart = new Chart(ctx, this.configuration);
    }
  }
}

setChart(): void {
    if (this.chart) {
      this.chart.destroy();
    }
    this.chart = new Chart(this.storageName, this.getChartConfig());
  }

var hits = data.totalHits.map(d => {
    return {
      x: d.date,
      y: d.count
    }
  })
  var devices = data.uniqueHits.map(d => {
    return {
      x: d.date,
      y: d.count
    }
  })
  hits = hits.splice(hits.length - 48 - 1)
  devices = devices.splice(devices.length - 48 - 1)
  new Chart($('#dailyStats'), {
    type: 'line',
    data: {
      datasets: [{
        fill: false,
        label: 'Devices',
        data: devices,
        pointBorderColor: 'rgba(72, 198, 240, 0.4)',
        lineTension: 0.2,
        backgroundColor: 'rgba(72, 198, 240, 1)',
        borderColor: 'rgba(72, 198, 240, 1)',
        pointHitRadius: 10,
        borderWidth: 4
      }, {
        fill: false,
        label: 'Total Hits',
        data: hits,

var hits = [];
    var devices = [];

    for (var date in data.dailyStats) {
      hits.push({
        x: new Date(date),
        y: parseInt(data.dailyStats[date].totalHits)
      });
      devices.push({
        x: new Date(date),
        y: parseInt(data.dailyStats[date].devices)
      });
    }
    hits = hits.splice(hits.length - 48 - 1);
    devices = devices.splice(devices.length - 48 - 1);
    var dailyStats = new Chart($('#dailyStats'), {
      type: 'line',
      data: {
        datasets: [{
          fill: false,
          label: 'Devices',
          data: devices,
          pointBorderColor: 'rgba(72, 198, 240, 0.4)',
          lineTension: 0.2,
          backgroundColor: "rgba(72, 198, 240, 1)",
          borderColor: "rgba(72, 198, 240, 1)",
          pointHitRadius: 10,
          borderWidth: 4
        }, {
          fill: false,
          label: 'Total Hits',
          data: hits,