sunbirded-mobile-app documentation
  1. Components
  2. PieChartComponent

File

src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts

Implements

OnInit

Metadata

selector pie-chart
styleUrls ./pie-chart.component.scss
templateUrl ./pie-chart.component.html

Index

Properties
Methods
Inputs

Constructor

constructor()
Defined in src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts:24

Inputs

data
Type : any
Defined in src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts:11
questionNumber
Type : any
Defined in src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts:12

Methods

ngOnInit
ngOnInit()
Defined in src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts:34
Returns : void

Properties

Public chartColors
Type : Array<any>
Defined in src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts:24
Public pieChartData
Type : SingleDataSet
Defined in src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts:19
Public pieChartLabels
Type : Label[]
Defined in src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts:18
Public pieChartLegend
Default value : true
Defined in src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts:22
Public pieChartOptions
Type : ChartOptions
Default value : { responsive: true, legend: { position: 'bottom', align:'start'}, }
Defined in src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts:14
Public pieChartPlugins
Type : []
Default value : []
Defined in src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts:23
Public pieChartType
Type : ChartType
Default value : 'pie'
Defined in src/app/manage-learn/shared/components/pie-chart/pie-chart.component.ts:21
 
import { Component, Input, OnInit } from '@angular/core';
import { ChartOptions, ChartType } from 'chart.js';
import { Label, SingleDataSet } from 'ng2-charts';

@Component({
  selector: 'pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.scss'],
})
export class PieChartComponent implements OnInit {
  @Input() data;
  @Input() questionNumber;

  public pieChartOptions: ChartOptions = {
    responsive: true,
    legend: { position: 'bottom', align:'start'},
  };
  public pieChartLabels: Label[];
  public pieChartData: SingleDataSet;
  // = [75, 25];
  public pieChartType: ChartType = 'pie';
  public pieChartLegend = true;
  public pieChartPlugins = [];
  public chartColors: Array<any>;
  //   = [
  //   {
  //     // all colors in order
  //     backgroundColor: ['#D35400', '#D35400', '#D35400'],
  //   },
  // ];

  constructor() {}

  ngOnInit() {
    this.pieChartLabels = this.data.chart.data.labels;
    this.pieChartData = this.data.chart.data.datasets[0].data;
    this.chartColors = [{ backgroundColor: this.data.chart.data.datasets[0].backgroundColor }];



  }
}

<div *ngIf="pieChartData">
  <div class="heading">
    <h4>{{ questionNumber }}) {{ data?.question }}</h4>
  </div>
  <div *ngIf="data?.chart?.data">
    <div style="display: block" *ngIf="data?.chart?.data">
      <canvas
        baseChart
        height="60vh"
        width="80vw"
        [data]="pieChartData"
        [labels]="pieChartLabels"
        [chartType]="pieChartType"
        [options]="pieChartOptions"
        [plugins]="pieChartPlugins"
        [legend]="pieChartLegend"
        [colors]="chartColors"
      >
      </canvas>
    </div>
  </div>
  <div class="errorMsg" *ngIf="!data?.chart?.data">No data found</div>
</div>

./pie-chart.component.scss 

@import 'src/assets/styles/base/_variables.scss';
@import 'src/assets/styles/_custom-mixins.scss';
@import 'src/assets/styles/_variables.scss';
.heading {
  background: #f4f4f4;
  padding: 15px 10px;
}
.errorMsg {
  color: $gray-400;
  text-align: center;
  padding: 20px 0;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""