angular2-highcharts

I have created a Pie chart and I am placing this Pie chart inside a panel. My panel width can be 600 or 400 depending on the user settings. When the size is 600 Pie and the legend is displayed properly. But when it is 400, the legend is displayed outside of the panel. Is there a way to reduce the size of the pie in that case, also the legend can be displayed at the bottom if the size is not sufficient. My plnkr https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview My plot options plotOptions: { pie: { innerSize: 120, allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false },

I would like to use the spiderweb chart from highcharts, which requires me to import highcharts-more, but I cannot figure out how to do that. Currently, this is how I've added highcharts to my project, from app.module.ts : import { ChartModule } from 'angular2-highcharts'; import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService'; import * as Highcharts from 'highcharts/highstock'; imports: [ ChartModule ] providers: [{ provide: HighchartsStatic, useValue: Highcharts }], When I try to import it like this: import * as HighchartsMore from 'highcharts/highcharts-more'; I get

I am losing my mind and hair over this. I am importing HighCharts in Angular 2 but need to require some of its extra libraries. So far in my code I have import {ChartModule} from 'angular2-highcharts'; @NgModule({ .... imports:[ ChartModule.forRoot(require('highcharts'), require('highcharts/modules/drilldown'))}) ] But I keep getting this error ERROR in Error encountered resolving symbol values statically. Calling function 'ChartModule'. function calls are not supported. Consider replacing the function or lambda with a reference to an exported fucntion. So I tried export function