search

gevgeny / angular2-highcharts

:bar_chart: :chart_with_upwards_trend: Highcharts for your Angular project
MIT License
380 stars 113 forks source link

Theming for angular2-highcharts #168

Open benticlaskaris opened 7 years ago

benticlaskaris commented 7 years ago

Highcharts offers a simple solution for theming as here.http://www.highcharts.com/docs/chart-design-and-style/themes

I tried integrating in my angular2 typescript app including the js file in the index.html. Also tried attaching the script using AfterViewInit of the AppComponent but I keep having "Highcharts is not defined"...

Including directly in index.html, the highcharts js script from CDN generates a duplicate HighCharts error.. 1)Including in index.html only theme file. index.html <script src="resources/highchartsTheme/dark-unica-highcharts.js"></script>

screenshot 2017-03-08 22 35 05

2)Including both theme and cdn js file `

` screenshot 2017-03-08 22 37 48 Highcharts error 16 refers to duplicate Highchart definition in page... Thanks in advance
benticlaskaris commented 7 years ago

Solved. I'm gonna share my solution in case someone stumbles upon this problem...

You can use const Highcharts = require('highcharts'); to get a static reference to HighCharts.

I used this in my root component; then I implemented afterViewInit and set all the options and themes for my Highcharts graphs.

Tameshiwari commented 7 years ago

This solution above may work with early versions of Angular 2 though there are big chances it will crash 💥 on Angular 4. Reason is you can no longer use 'require' with --module es2015.

Using require will cause a TypeScript compile error. So you would probably need to use something like

import * as highcharts from '../Highcharts'

[making sure your path is pointing to right folder + files...] and see what you come up with...😉