Support for Highcharts 5 styled mode

[textbook]

Highcharts 5, now supported by angular2-highcharts, has a "styled mode" where you use CSS instead of JS to style your charts. We would like to use this in a project, but it isn't currently exposed by this library. Are there any plans to add this functionality?

If something like:

imports: [
  ChartModule.styledMode(),
  ...
]

was available that would be great.

Having quickly looked into it, it seems that modifying the HighchartsWrapper to require('highcharts/js/highcharts') would be sufficient to enable this behaviour by default. However, as the HighchartsService is provided directly to ChartComponent, it is difficult to inject an alternative from outside.

[tsabran]

I was just looking for the same thing !
We would also need highcharts/css/highcharts.css in case of "styled mode", I don't know if this can be imported automatically, maybe with something like styleUrls: in the ChartComponent ?

[gevgeny]

It is easy to use by changing your webpack or systemjs config. Look at this commit changes gevgeny/angular2-webpack-starter-and-angular2-highcharts@c585a6b

[textbook]

We're using Angular-CLI to configure and build our project; although this uses Webpack, it doesn't expose the resolve.alias setting. Unfortunately, therefore, that config change won't work for us.

[textbook]

A bit more fiddling, and we found that you could alter src/tsconfig.json, adding:

"baseUrl": ".",
"paths": {
  ...,
  "highcharts": ["../node_modules/highcharts/js/highcharts.js"] 
}

and angular-cli.json, adding:

"styles": [
  ...,
  "../node_modules/highcharts/css/highcharts.css"
],

If anyone else has the same problem (trying to use styled mode with Angular-CLI), that seems to solve it.

[iacii]

I couldn't get paths to work for some reason.

I'm not very happy about using a hack like this, but I included the following in my package.json:

"prebuild": "copy /y node_modules\\highcharts\\js\\highcharts.js node_modules\\highcharts\\"

Now whenever I execute npm run build it will overwrite the "classic" version of highcharts with the "styled" one.

Edit:
It would be better to do this in the postinstall instead:

"postinstall": "copy /y node_modules\\highcharts\\js\\highcharts.js node_modules\\highcharts\\"

[alphadever]

is there any updates on this thread ? my project is an angular/cli based project, and the approach @textbook suggested does not work for me