-
Notifications
You must be signed in to change notification settings - Fork 12k
Closed
Labels
Description
So I decided to use the PolarChart for my data visualizing project and wanted to rotate the chart to the left by 45 degrees.
After a lot of time researched on the internet I have concluded that this should work perfectly fine
<div>
<div style="display: block">
<canvas baseChart
[data]="polarAreaChartData"
[labels]="polarAreaChartLabels"
[legend]="polarAreaLegend"
[options]="polarChartOptions"
[chartType]="polarAreaChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
<button (click)="randomize()">Update</button>
</div>
This is my Angular2 file, declaring polarChartOptions, where I would follow up on further customizing it.
import { Component, OnInit } from '@angular/core';
import { PostsService } from '../posts.service';
@Component({
selector: 'app-posts',
templateUrl: './posts.component.html',
styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
// PolarArea
public polarAreaChartLabels:string[] = ['A','B','C','D','E','F','G','H', 'I'];
public polarAreaChartData:number[] = [100, 80, 110, 20, 20, 20, 20, 20, 20];
public polarAreaLegend:boolean = true;
public polarAreaChartType:string = 'polarArea';
public polarChartOptions:any = {
startAngle: 90,
legend: false
};
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
constructor(private postsService: PostsService) { }
}
}
Any help would be greatly appreciated.