How do I implement organization chart from highcharts in Angular 8?

Question

I want to integrate the Organization chart from the Highcharts using Angular 8.

But, when I tried to implement with the following code it throws me an error in series type

import { Component, OnInit } from '@angular/core';

import * as Highcharts from 'highcharts';
import HighchartsSankey from "highcharts/modules/sankey";
import HighchartsOrganization from "highcharts/modules/organization";
import HighchartsExporting from "highcharts/modules/exporting";

HighchartsSankey(Highcharts);
HighchartsOrganization(Highcharts);
HighchartsExporting(Highcharts);

@Component({
  selector: 'organization-users',...
})
export class OrganizationComponent implements OnInit {
  ngOnInit() {

    Highcharts.chart({
      chart: {
          height: 600,
          inverted: true
      },

      title: {
          text: 'Highcharts Org Chart'
      },

      series: [{
          **type: 'organization',**
          keys: ['from', 'to'],
          data: [
              ['Shareholders', 'Board'],
              ['Board', 'CEO'],
              ['CEO', 'CTO'],
              ['CEO', 'CPO']
          ],...

Answer 1

Rendering an Organization Chart can be tricky.

If there's any additional module that we have to use in there, we have to first register them with Highcharts as they've suggested in this article here.

Since we need to use the organization module which also depends on sankey, we'll first have to register sankey and then organization with highcharts. That's what the following lines do:

declare var require: any;
let sankey = require("highcharts/modules/sankey");
let organization = require("highcharts/modules/organization");

sankey(Highcharts);
organization(Highcharts);

Once that's done, rendering the chart is pretty much straight forward.

Here, give this a try:

import { Component, ViewChild } from "@angular/core";
import * as Highcharts from "highcharts";

declare var require: any;
let sankey = require("highcharts/modules/sankey");
let organization = require("highcharts/modules/organization");

sankey(Highcharts);
organization(Highcharts);

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("orgChartContainer", { static: false }) orgChartContainer;

  ngOnInit() {}

  ngAfterViewInit() {
    //Organization chart starts
    /* Highcharts.chart(this.barChartContainer.nativeElement, {
      // Created pie chart using Highchart
      chart: {
        type: "column"
      },

      xAxis: {
        type: "category"
      },

      series: [
        {
          name: "TOTAL chart",
          data: [
            {
              name: "Planned",
              y: 30,
              drilldown: "planned"
            }
          ]
        }
      ],
      //Drill Downs
      drilldown: {
        series: [
          {
            name: "Planned Drill Down",
            id: "planned",
            data: [["plan A", 55.03], ["plan B", 15.83]]
          }
        ]
      }
    }); */

    Highcharts.chart(this.orgChartContainer.nativeElement, {
      chart: {
        height: 600,
        inverted: true
      },

      title: {
        text: "Highcharts Org Chart"
      },

      accessibility: {
        point: {
          descriptionFormatter: function(point) {
            var nodeName = point.toNode.name,
              nodeId = point.toNode.id,
              nodeDesc =
                nodeName === nodeId ? nodeName : nodeName + ", " + nodeId,
              parentDesc = point.fromNode.id;
            return (
              point.index + ". " + nodeDesc + ", reports to " + parentDesc + "."
            );
          }
        }
      },

      series: [
        {
          type: "organization",
          name: "Highsoft",
          keys: ["from", "to"],
          data: [
            ["Shareholders", "Board"],
            ["Board", "CEO"],
            ["CEO", "CTO"],
            ["CEO", "CPO"],
            ["CEO", "CSO"],
            ["CEO", "CMO"],
            ["CEO", "HR"],
            ["CTO", "Product"],
            ["CTO", "Web"],
            ["CSO", "Sales"],
            ["CMO", "Market"]
          ],
          levels: [
            {
              level: 0,
              color: "silver",
              dataLabels: {
                color: "black"
              },
              height: 25
            },
            {
              level: 1,
              color: "silver",
              dataLabels: {
                color: "black"
              },
              height: 25
            },
            {
              level: 2,
              color: "#980104"
            },
            {
              level: 4,
              color: "#359154"
            }
          ],
          nodes: [
            {
              id: "Shareholders"
            },
            {
              id: "Board"
            },
            {
              id: "CEO",
              title: "CEO",
              name: "Grethe Hjetland",
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132317/Grethe.jpg"
            },
            {
              id: "HR",
              title: "HR/CFO",
              name: "Anne Jorunn Fjærestad",
              color: "#007ad0",
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132314/AnneJorunn.jpg",
              column: 3,
              offset: "75%"
            },
            {
              id: "CTO",
              title: "CTO",
              name: "Christer Vasseng",
              column: 4,
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12140620/Christer.jpg",
              layout: "hanging"
            },
            {
              id: "CPO",
              title: "CPO",
              name: "Torstein Hønsi",
              column: 4,
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12131849/Torstein1.jpg"
            },
            {
              id: "CSO",
              title: "CSO",
              name: "Anita Nesse",
              column: 4,
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132313/Anita.jpg",
              layout: "hanging"
            },
            {
              id: "CMO",
              title: "CMO",
              name: "Vidar Brekke",
              column: 4,
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/13105551/Vidar.jpg",
              layout: "hanging"
            },
            {
              id: "Product",
              name: "Product developers"
            },
            {
              id: "Web",
              name: "Web devs, sys admin"
            },
            {
              id: "Sales",
              name: "Sales team"
            },
            {
              id: "Market",
              name: "Marketing team"
            }
          ],
          colorByPoint: false,
          color: "#007ad0",
          dataLabels: {
            color: "white"
          },
          borderColor: "white",
          nodeWidth: 65
        }
      ],
      tooltip: {
        outside: true
      },
      exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
      }
    });

    //Organization chart ends
  }
}

And in your template:

<div #orgChartContainer></div>

---

Here's a Sample Demo for your ref.