Reputation: 181
I am using Highcharts in Angular 5 to display pie charts. I have created multiple charts and stored them in a Chart array and used ngFor directive to display them.
My component.ts file & component.html files
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts';
import { AuthorCountService } from '../services/author-count.service';
import { Company } from '../shared/company';
@Component({
selector: 'app-details-body',
templateUrl: './details-body.component.html',
styleUrls: ['./details-body.component.scss']
})
export class DetailsBodyComponent implements OnInit {
constructor(private authorCountService : AuthorCountService) { }
companyList : Company[];
chartList : Chart[] = [];
ngOnInit() {
this.authorCountService.getJsonData().subscribe((res) => {
this.companyList = res;
console.log(this.companyList);
this.companyList.forEach((company) => {
let chartitem = new Chart({
chart : {
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false,
type : 'pie'
},
title : {
text : company.companyname
},
tooltip : {
pointFormat : '<b>{point.y}</b>'
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
format : '<b>{point.name}</b><br>{point.y}'
}
}
},
series : [
{
"data" : [
{"name" : 'Male', "y" : company.authorcount.male},
{"name" : 'Female', "y" : company.authorcount.female}
]
}
]
});
this.chartList.push(chartitem);
});
console.log(this.chartList);
});
}
}
.first-item {
margin-top: 65px;
}
<section class="first-item">
<div class="text-center container-fluid">
<h2>Unique Author Count</h2>
<p>The number of unique authors for each competitor is</p>
<div class="row">
<div *ngFor="let chart of chartList" [chart]="chart"></div>
</div>
</div>
</section>
It's working fine but i want to make these charts responsive. After searching online, I tried adding the responsive option but i am getting an error message saying "Types of property 'responsive' are incompatible".
Where am i going wrong with this? Is there another way to make my charts responsive?
Upvotes: 2
Views: 2438
Reputation: 3483
This is my solution and hope it will help to anyone.
ngOnInit() {
this.innerWidth = window.innerWidth;
this.chartOptions = {
chart: {
type: 'line',
height: 120,
width: this.innerWidth - 50
},.....
};
this.chart = new Chart(this.chartOptions);
}
Direct screen change and redrew it.
@HostListener('window:resize', ['$event'])
onResize(event) {
this.innerWidth = window.innerWidth;
this.chartOptions.chart.width = this.innerWidth - 50;
this.chart = new Chart(this.chartOptions);
}
Upvotes: 1
Reputation: 788
I had the exact same problem when working with Highcharts. I followed this tutorial of Dylan Dreams. He is using a framework called gridstack.
Link: https://dylandreams.com/2017/05/06/of-charts-and-dashboards/
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="grid-stack" id="grid">
<div class="chart-container" data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content">
<div id="container"></div>
</div>
</div>
<div class="chart-container" data-gs-width="4" data-gs-height="4" data-gs-x="4">
<div class="grid-stack-item-content">
<div id="container2"></div>
</div>
</div>
</div>
</div>
Have a look at the following JSFiddle
https://jsfiddle.net/fbn70fgb/5/
Hope this helps for you
Upvotes: 0