0

The bundle from webpack renders one of my charts very differently from what I see in dev mode with hot reloading and expect to be consistent no matter what.

It is specific to a type chart area with polar at true, I use many other charts and all of them have the same render between dev and prod mode, as expected.

Here's what I get in dev and what I expect to get from the bundle :

expected render

And here's what I got once I browse the webpack bundle :

enter image description here

Here's the highcharts config applied to it :

https://gist.github.com/sylv3r/6533e240107be42526ea77ea6ab5a13d

The webpack config I use :

https://gist.github.com/sylv3r/001a8c161a9dc580ee5d356a5e9e7155

Packages version :

"highcharts": "^6.1.0",
"highcharts-more": "^0.1.7",
"highcharts-react-official": "^1.2.0",

"webpack": "^4.23.1",
"webpack-cli": "^3.1",
"webpack-dev-middleware": "^3.0.1",
"webpack-hot-middleware": "^2.21.2",

I know this is a weird and specific issue, but any clue would be much appreciated, I'm stuck.

Sylver
  • 2,285
  • 3
  • 29
  • 40
  • Hello Sylver, It looks like `highcharts-more` module is not included in `prod` mode. Could you test `bubble` series type? Also, could you provide me with more files of your project, so that I can reproduce your problem? – ppotaczek Nov 19 '18 at 16:25
  • @ppotaczek Hi, sorry for my late answer, this project was dormant for a while. Still having the issue though. Since `highcharts-react-official` `^2.0.0` I don't have `highcharts-more` anymore, that does not change anything. the webpack dev hmr rendering is ok, but when I make the bundle in production mode, i get this flat rendering. Any other chart I use is rendered as expected.That's not really easy to extract only the part you need to reproduce, but I'll try if there's no other way. – Sylver Jun 12 '19 at 11:24
  • Sylver - but you must use the `highcharts-more` module for `polar` charts. Please check this simple example: http://jsfiddle.net/BlackLabel/ah19ub86/, which I think is presenting your problem. – ppotaczek Jun 12 '19 at 11:35

1 Answers1

1

The "highcharts-more": "^0.1.7" package has been deprecated. You should import that module from the highcharts folder:

import Highcharts from "highcharts/highstock";
import highchartsMore from "highcharts/highcharts-more";
import HighchartsReact from "highcharts-react-official";

highchartsMore(Highcharts);

Live demo: https://codesandbox.io/s/highcharts-react-demo-x10xx

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • thanks @ppotaczek I'll try that and let you know. If that's the official way, that's not really easy to find in the doc about this though. – Sylver Jun 12 '19 at 11:43
  • Indeed it worked ! Thanks for your quick help. Still don't understand why it was working without it in `dev` mode. – Sylver Jun 12 '19 at 12:03
  • Hi @Sylver, It's great to hear that! The `highcharts-more` npm module was not released by Highcharts, so it's unofficial. – ppotaczek Jun 12 '19 at 12:27