My goal is to have Highcharts render to different div IDs. When I click on a thumbnail chart, the same chart should expand in a Bootstrap modal. I used the Hello Angular 6 StackBlitz editor for a demo, but since it's not saving properly, I'll share the HTML, TS, and package JSON files here. See 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">×</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"
}
}