search

gevgeny / angular2-highcharts

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

Support for Highcharts 5 styled mode #115

Closed textbook closed 7 years ago

textbook commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

It is easy to use by changing your webpack or systemjs config. Look at this commit changes https://github.com/gevgeny/angular2-webpack-starter-and-angular2-highcharts/commit/c585a6b076b9b52b7e647fae58d7147bb2f910dd

textbook commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 6 years ago

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