How we can create Highcharts treegraph box layout in angular?

Question

enter image description here Cannot find module 'highcharts/modules/treegraph' or its corresponding type declarations.

10 import HCTree from 'highcharts/modules/treegraph'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I checked the documentation but didn't found correct way to implement Highcharts Treegraph box layout it in angular.

I want this chart

enter image description here

Answer 1

That's because you need to load the treemap module before treegraph.

import * as Highcharts from 'highcharts';
import treemap from 'highcharts/modules/treemap';
import treegraph from 'highcharts/modules/treegraph';

treemap(Highcharts);
treegraph(Highcharts);

---

Live demo: https://stackblitz.com/edit/highcharts-angular-line-kagqjy

Docs: https://www.highcharts.com/docs/chart-and-series-types/treegraph-chart

Answer 2

Need to add the latest supported version of HighChart for treegraph.

Not sure exactly which version you are using for the HighChart, its not there in 10.2.1 but if you will update to the latest, it will work

From:

"highcharts": "10.2.1", 
import HCTree from 'highcharts/modules/treegraph';
/*Cannot find module 'highcharts/modules/treegraph' or its corresponding 
type declarations.*/

To:

"highcharts": "11.1.0" 
import HCTree from 'highcharts/modules/treegraph'; // wokring fine