2

I'm running into issues and not been able to render TreeMap chart. Other chart types like Line works fine in my App. The error I get is Error# 17. I'm using Angular 5. Can you please share any working sample using Angular5 and Highcharts for TreeMap.

Appreciate your quick help.

Sagar Agrawal
  • 639
  • 1
  • 7
  • 17

1 Answers1

6

Check official docs

Import like this

import * as  Highcharts from 'highcharts';
import More from 'highcharts/highcharts-more';
import Tree from 'highcharts/modules/treemap';
import Heatmap from 'highcharts/modules/heatmap';
More(Highcharts);
Tree(Highcharts);
Heatmap(Highcharts);

stackblitz demo

Deep 3015
  • 9,929
  • 5
  • 30
  • 54
  • Hey, this seems to be ionic app and not angular app. – Sagar Agrawal Mar 27 '18 at 09:48
  • this doesnt seem to work. I get many errors when I try to use your sample in angular5 – Sagar Agrawal Mar 27 '18 at 13:15
  • remember in am not using angular2-highcharts but using official highcharts npm package. Do check – Deep 3015 Mar 27 '18 at 13:20
  • It gives me error for this imports: `code` import More from 'highcharts/highcharts-more'; More(Highcharts); import Tree from 'highcharts/modules/treemap'; Tree(Highcharts); import Heatmap from 'highcharts/modules/heatmap'; Heatmap(Highcharts); `code` – Sagar Agrawal Mar 27 '18 at 13:41
  • match dependencies of stackblitz demo to your project – Deep 3015 Mar 27 '18 at 13:43
  • The line where you specified the layoutAlgorithm, I get error on that line as layoutAlgorithm does not exists in type IndividualSeriesOptions – Sagar Agrawal Mar 27 '18 at 13:59
  • Finally it worked for me. The import you outlined was not working. I added it like below and that solved my problem: `code`declare var require: any; require('highcharts/highcharts-more')(Highcharts); `code` – Sagar Agrawal Mar 27 '18 at 14:29
  • https://stackoverflow.com/questions/47116730/how-to-import-highcharts-more – Sagar Agrawal Mar 27 '18 at 14:31