<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

#container {
    min-width: 300px;
    max-width: 800px;
    margin: 1em auto;
}

const heightCell = 80,
  colorLevel = "#000000",
  HSProducts = "#AFE5F4",
  HighchartsJS = "#A8E6CF",
  HStck = "#DCEDC1",
  HMaps = "#FFD3B6",
  Gantt = "#FEAAA5",
  Others = "#FE8B94",
  Editor = "#FBEBA7",
  Advantage = "#F7D2AF",
  Integrations = "#F8C1BA",
  Frameworks = "#B1B2FF",
  React = "#B1B2FF",
  Angular = "#D2DAFF",
  Vue = "#EEF1FF",
  Addons = "#F4BEAF",
  Wrappers = "#FE9495",
  Net = "#FE9495",
  iOS = "#FFD1D1",
  Android = "#FFE3E1",
  Mobile = "#DDC5E7";

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

  title: {
    text: null
  },

  series: [
    {
      type: "organization",
      name: "Highsoft",
      keys: ["from", "to"],
      data: [
        ["HS", "HC"],
        ["HS", "HStck"],
        ["HS", "HMaps"],
        ["HS", "Gantt"],
        ["HS", "Others"],

        ["Others", "Editor"],

        ["Others", "Advantage"],

        ["Others", "Integrations"],

        ["Integrations", "Wrappers"],
        ["Integrations", "Add-ons"],
        ["Integrations", "Frameworks"],
        ["Integrations", "Mobile"],

        ["Wrappers", ".Net"],
        ["Wrappers", "iOS"],
        ["Wrappers", "Android"],

        ["Frameworks", "React"],
        ["Frameworks", "Angular"],
        ["Frameworks", "Vue"]
      ],
      levels: [
        {
          level: 0,
          color: HSProducts,
          dataLabels: {
            color: colorLevel
          }
        },
        {
          level: 1,
          color: "silver",
          dataLabels: {
            color: colorLevel
          }
        },
        {
          level: 2,
          color: "silver",
          dataLabels: {
            color: colorLevel
          }
        },
        {
          level: 4,
          color: "silver",
          dataLabels: {
            color: colorLevel
          }
        },
        {
          level: 5,
          color: "silver",
          dataLabels: {
            color: colorLevel
          }
        }
      ],
      nodes: [
        {
          id: "HS",
          title: null,
          height: heightCell,
          name: "Highsoft Products"
        },
        {
          id: "HC",
          title: null,
          name: "Highcharts JS",
          color: HighchartsJS,
          height: heightCell,
          image: null,
          description:
            '<a href="https://www.highcharts.com/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/highcharts/"  target="_blank">API</a>'
        },
        {
          id: "HStck",
          title: null,
          name: "Highcharts Stock",
          color: HStck,
          height: heightCell,
          description:
            '<a href="https://www.highcharts.com/stock/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/highstock/"  target="_blank">API</a>',
          image: null
        },
        {
          id: "HMaps",
          useHTML: true,
          color: HMaps,
          height: heightCell,
          title: null,
          name: "Highcharts Maps",
          description:
            '<a href="https://www.highcharts.com/maps/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/highmaps/"  target="_blank">API</a>',
          image: null
        },
        {
          id: "Gantt",
          useHTML: true,
          color: Gantt,
          height: heightCell,
          title: null,
          name: "Highcharts Gantt",
          description:
            '<a href="https://www.highcharts.com/gantt/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/gantt/"  target="_blank">API</a>',
          image: null
        },
        {
          id: "Others",
          title: null,
          height: heightCell,
          name: "Others",
          color: Others
        },
        {
          id: "Editor",
          name: "Editor",
          color: Editor,
          height: heightCell,
          useHTML: true,
          description:
            '<a href="http://editor.highcharts.com/" target="_blank">Demo</a><br/><a href="https://github.com/highcharts/highcharts-editor/wiki"  target="_blank">Documentation</a>'
        },
        {
          id: "Advantage",
          name: "Advantage",
          color: Advantage,
          height: heightCell,
          useHTML: true,
          description:
            '<a href="https://www.highcharts.com/products/highcharts-advantage/" target="_blank">Info</a>'
        },
        {
          id: "Integrations",
          name: "Integrations",
          color: Integrations,
          height: heightCell,
          useHTML: true
        },
        {
          id: "Mobile",
          name: "Mobile",
          color: Mobile,
          height: heightCell,
          useHTML: true,
          description:
            '<a href="https://www.highcharts.com/products/highcharts-mobile/"  target="_blank">Info</a>'
        },
        {
          id: "iOS",
          title: null,
          name: "iOS",
          color: iOS,
          height: heightCell,
          description:
            '<a href="https://www.highcharts.com/ios/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/ios/highcharts/"  target="_blank">API</a>'
        },
        {
          id: "Android",
          title: null,
          name: "Android",
          color: Android,
          height: heightCell,
          description:
            '<a href="https://www.highcharts.com/android/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/android/highcharts/"  target="_blank">API</a>'
        },
        {
          id: "Add-ons",
          title: null,
          name: "Add-ons",
          color: Addons,
          height: heightCell,
          description:
            '<a href="https://www.highcharts.com/blog/add-ons/"  target="_blank">Info</a>'
        },
        {
          id: "Frameworks",
          title: null,
          name: "Frameworks",
          color: Frameworks,
          height: heightCell,
          description:
            '<a href="https://www.highcharts.com/frameworks/"  target="_blank">Info</a>'
        },
        {
          id: "Wrappers",
          name: "Wrappers",
          color: Wrappers,
          height: heightCell,
          description:
            '<a href="https://www.highcharts.com/wrappers/"  target="_blank">Info</a>',
          image: null
        },
        {
          id: ".Net",
          name: ".Net",
          color: Net,
          height: heightCell,
          useHTML: true,
          description:
            '<a href="http://dotnet.highcharts.com/Highcharts/Demo" target="_blank">Demo</a><br/><a href="http://dotnet.highcharts.com/Help/Highcharts/html/index.html"  target="_blank">Documentation</a>'
        },
        {
          id: "Angular",
          name: "Angular",
          color: Angular,
          height: heightCell,
          useHTML: true,
          description:
            '<a href="https://www.npmjs.com/package/highcharts-angular" target="_blank">Doc & Demo</a>'
        },
        {
          id: "React",
          name: "React",
          color: React,
          height: heightCell,
          useHTML: true,
          description:
            '<a href="https://www.npmjs.com/package/highcharts-react-official" target="_blank">Doc & Demo</a>'
        },
        {
          id: "Vue",
          name: "Vue",
          color: Vue,
          height: heightCell,
          useHTML: true,
          description:
            '<a href="https://www.npmjs.com/package/highcharts-vue" target="_blank">Doc & Demo</a>'
        }
      ],
      colorByPoint: false,
      color: "#007ad0",
      dataLabels: {
        color: "white"
      },
      borderColor: "white",
      nodeWidth: 65
    }
  ],
  tooltip: {
    enabled: false
  },
  exporting: {
    allowHTML: true,
    sourceWidth: 800,
    sourceHeight: 600
  }
});