I have highcharts renders to different div id.When I click on those thumbnail chart same chart should be expand on bootstrap modal.I have used https://stackblitz.com/edit/hello-angular-6 this editor for demo but its does not saved,so I am sharing html,ts and package json file here.Here is the code below

app.component.html

<div class="col-md-4 " (click)="openModal()" style="" id="chart1"></div>
<div (click)="openModal()" style="" id="chart2"></div>


<div class="backdrop" [ngStyle]="{'display':display}"></div>
<div class="modal" tabindex="-1" role="dialog"  [ngStyle]="{'display':display}">


  <div class="modal-dialog" role="document">


    <div class="modal-content">


      <div class="modal-header">


        <button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span aria-hidden="true">&times;</span></button>


        <h4 class="modal-title">Model Title</h4>


      </div>


      <div class="modal-body">


        <p>Model body text</p>


      </div>


      <div class="modal-footer">


        <button type="button" class="btn btn-default" (click)="onCloseHandled()" >Close</button>


      </div>


    </div><!-- /.modal-content -->


  </div><!-- /.modal-dialog -->


</div><!-- /.modal !-->

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import * as Exporting from 'highcharts/modules/exporting';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  display:none;
   public chartdata=[{"chartid":"chart1"},{"chartid":"chart2"}];
  openModal(){


       this.display=block; 


    }
    onCloseHandled(){


       this.display='none'; 


    }
  name = 'Angular 6';
  ngOnInit() {
    this.chartFunc('chart1');
    this.chartFunc('chart2');
  }

  chartFunc(chartId) {
    Highcharts.chart(chartId, {
      chart: {
        type: "spline"
      },
      title: {
        text: "Monthly Average Temperature"
      },

      series: [
        {
          name: 'Tokyo',
          data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }
      ]
    });
  }
}

package.json

{
  "name": "hello-angular-6",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/router": "6.0.0",
    "core-js": "2.5.5",
    "highcharts": "^7.1.1",
    "rxjs": "6.1.0",
    "zone.js": "0.8.26"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.2",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

1 Answers

0
Wojciech Chmiel On

You can achieve it following this approach and using highcharts-angular official Highcharts wrapper (https://github.com/highcharts/highcharts-angular):

  1. Create a chart and modal components
  2. Create a chart service with the chart options
  3. Initialize the chart in chart component and modal component using data stored in the chart service
  4. To update charts in both components use Obesrvables and change updateFromInput = true.

Demo:

API reference: