CODEWITHSUNDEEP
angularng2-charts
bluePearl
bluePearl

Reputation: 1257

changing ng2-charts label text on imported chart data

I am importing data into graph chart (ng2-charts in angular 2) and i am loading data from a json file. I wanted to know how can i override the label text on the graph?

Here is a plunker of what i have: https://plnkr.co/edit/xr6xs6PmaF9iQ6DsRnHT?p=preview

on the top of the graph there is Label 0 i would like to override/change that label text to say: Test Results How can i go about doing that with my current code structure.

Upvotes: 0

Views: 1873

Answers (1)

Ahmed Musallam
Ahmed Musallam

Reputation: 9753

Fist, please update your question to include your code from plunker. Just in case that plunker gets deleted.

you'll have to use datasets input instead of data to take advantage of legend labels.

plunker https://plnkr.co/edit/UUW0uHdyVacK7ZMqUsp0?p=preview

//our root app component
import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ChartsModule, Color} from 'ng2-charts';
import { Http, Response, HttpModule, JsonpModule  } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { DataService } from './service';
import { IDataChart } from './dataChart';

@Component({
  selector: 'my-app',
  providers: [DataService],
  template: `
    <div style="width:100%; display:block">
      <canvas *ngIf="loaded" baseChart [datasets]="barChartData" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
      </canvas>
    </div>
  `,
})
export class App {

  barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
        xAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
  };
  barChartLabels: string[] =[];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = true;
  barChartData: any[] =[];
  resultData: IDataChart[] =[];
  loaded = false;

  constructor(private dataService: DataService) {
  }

  getData(){
    this.dataService.getData().subscribe(data => {
      this.resultData = data;
      this.barChartLabels = this.resultData.map(item => item.label);
      var d=this.resultData.map(item => item.data)
      this.barChartData = this.resultData.map(item => <any>{"data":Array.of(item.data), "label":item.label}); // <-- map to correct data structure for 'datasets'
      console.log(this.barChartData)
      // add new data set
      //this.barChartData.push({data:[200], label:"new data set"})
      this.loaded = true;
    }
  }

  ngOnInit() {
    this.getData();
  }
}

@NgModule({
  imports: [ 
    BrowserModule,
    ChartsModule,
    HttpModule,
    JsonpModule
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Upvotes: 5

Related Questions