CODEWITHSUNDEEP
javascripthtmlangulartypescripthighcharts
Bhargav Raju
Bhargav Raju

Reputation: 181

Unable to make my highchart responsive in angular 5

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".

enter image description here

Where am i going wrong with this? Is there another way to make my charts responsive?

Upvotes: 2

Views: 2438

Answers (2)

Janith Widarshana
Janith Widarshana

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

Fearcoder
Fearcoder

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

Related Questions