Ionic - Grafico ChartsJs

Mobile
#1

boa noite

alguém pode me ajudar…

estou inserindo um grafico chart, mas não consigo deixar o valor do rotulo da barra visível!

segue meu codigo abaixo.

<ion-card class="grafico">
    <ion-card-header>      
    </ion-card-header>
    <ion-card-content>
       <canvas #barCanvas></canvas>
    </ion-card-content>
  </ion-card>

import { Component, OnInit, ViewChild } from '@angular/core';
import { DadosSCService } from '../services/dados-sc.service';
import { NavController } from '@ionic/angular';
import { ActivatedRoute } from '@angular/router';
import { Upm } from './upm.model';
import chartJs from 'chart.js';



@Component({
  selector: 'app-upm',
  templateUrl: './upm.page.html',
  styleUrls: ['./upm.page.scss'],
})
export class UpmPage implements OnInit {

  upms: Upm[];
  tipo: any;
  meta: any;
  upm: any;
  erros: any;
  conferencia: any;
  data: any;
  hora: any;

  @ViewChild('barCanvas', { static: false }) barCanvas;
  @ViewChild('lineCanvas', { static: false }) lineCanvas;
  @ViewChild('pieCanvas', { static: false }) pieCanvas;
  @ViewChild('doughnutCanvas', { static: false }) doughnutCanvas;

  barChart: any;
  lineChart: any;
  pieChart: any;
  doughnutChart: any;




  constructor(public navCtrl: NavController, public service: DadosSCService, private route: ActivatedRoute) {
    this.getDados();
  }


  getDados() {
    this.service.getUpm().then((result: any[]) => {
      this.upms = result['upms'];
    }).catch((error: any) => {
      console.error("error: " + error);
    });
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.barCanvas = this.getBarChart();
      //this.lineChart = this.getLineChart();
    }, 150)
    setTimeout(() => {
      // this.pieCanvas = this.getPieChart();
      // this.doughnutChart = this.getDoughnutChart();
    }, 250)
  }


  getChart(context, chartType, data, options?) {
    return new chartJs(context, {
      data,
      options,
      type: chartType
    })
  }


  getBarChart() {
    console.log(this.upms);
    type: 'bar'
    const data = {
      labels: [this.upms[0]['tipo'], this.upms[1]['tipo'], this.upms[2]['tipo']],
      datasets: [{
        label: 'UPM',
        data: [this.upms[0].upm, this.upms[1].upm, this.upms[2].upm],
        backgroundColor: [
          'rgb(18, 34, 70)',
          'rgb(18, 34, 70)',
          'rgb(18, 34, 70)',
        ],

      }, {
        label: 'Meta',
        data: [850, 850, 850],
        backgroundColor: [
          'rgb(255, 255, 255)',
        ],
        borderColor: [
          'rgb(255, 0, 0)',
        ],
        type: 'line'
      }]
    };

    const options = {
      legend: {
        display: true,
        labels: {         
          fontColor: 'rgb(18, 34, 70)'
        }
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
    return this.getChart(this.barCanvas.nativeElement, 'bar', data, options);
  }
}