Highcharts different levels dendrogram

To create a different levels dendrogram in Highcharts, you can follow these steps:

Include the Highcharts library in your HTML file. You can either download it from the Highcharts website or include it from a CDN like this:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Create a container element for the chart in your HTML file, like this:

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

In your JavaScript code, create a Highcharts chart object and configure it with the data and chart options. For example:

Highcharts.chart('chart-container', {
  chart: {
    type: 'dendrogram',
    height: 800
  },
  title: {
    text: 'Different Levels Dendrogram'
  },
  series: [{
    type: 'dendrogram',
    name: 'Dendrogram',
    data: [{
      name: 'A',
      color: '#EC2500'
    }, {
      name: 'B',
      color: '#ECE100',
      parent: 'A'
    }, {
      name: 'C',
      color: '#EC9800',
      parent: 'A'
    }, {
      name: 'D',
      color: '#00ECEC',
      parent: 'C'
    }, {
      name: 'E',
      color: '#00EC25',
      parent: 'C'
    }, {
      name: 'F',
      color: '#EC00E1',
      parent: 'B'
    }, {
      name: 'G',
      color: '#9800EC',
      parent: 'B'
    }, {
      name: 'H',
      color: '#9800EC',
      parent: 'G'
    }],
    layoutAlgorithm: {
      type: 'dendrogram',
      direction: 'left',
      plotBorderWidth: 1,
      enableShadows: true
    },
    tooltip: {
      pointFormat: '{point.name}'
    },
    dataLabels: {
      enabled: true,
      style: {
        fontSize: '12px',
        fontWeight: 'normal',
        color: '#000000'
      }
    }
  }]
});

In this example, we're creating a dendrogram chart with the Highcharts chart function and passing in a set of options:

chart.type is set to 'dendrogram' to create a dendrogram chart
chart.height is set to 800 to adjust the chart height
title.text is set to 'Different Levels Dendrogram' to set the main title
series is set to an array with one object containing type, name, data, layoutAlgorithm, tooltip, and dataLabels properties to set the chart data and styling options
data is set to an array of objects representing the data for the dendrogram chart, with each object containing a name property and optionally a color and parent property to indicate the color and parent node of the data point
layoutAlgorithm is set to configure the dendrogram layout algorithm, including the direction of the layout, the plot border width, and shadow effects
tooltip is set to configure the tooltip content and formatting

Customizing appearance in Highcharts Dendrogram with multiple levels:

Customize the appearance of the Dendrogram chart with various styling options.

Highcharts.chart('container', {
    chart: {
        type: 'dendrogram',
        backgroundColor: '#f2f2f2',
        borderRadius: 10,
        borderWidth: 2,
        borderColor: '#999999'
    },
    title: {
        text: 'Customizing Highcharts Dendrogram with Multiple Levels'
    },
    series: [{
        data: [{
            name: 'Level 1',
            color: '#64b4dc'
        }],
        color: '#64b4dc'
    }],
    // Additional configuration options...
});

Adding data to Highcharts Dendrogram with hierarchical structure:

Add hierarchical data to represent different levels in the Dendrogram.

series: [{
    data: [{
        name: 'Level 1',
        children: [{
            name: 'Sublevel 1.1',
            value: 10
        }, {
            name: 'Sublevel 1.2',
            value: 15
        }]
    }],
    color: '#64b4dc'
}],

Highcharts Dendrogram live demo with different levels:

Explore a live demo of the Highcharts Dendrogram with varying levels on your website.

<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/dumbbell.js"></script>
<script>
    // Highcharts Dendrogram configuration here...
</script>

Highcharts Dendrogram configuration options for multiple levels:

Explore various configuration options to fine-tune the Dendrogram with multiple levels.

chart: {
    type: 'dumbbell',
    backgroundColor: '#f2f2f2',
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#999999'
},
title: {
    text: 'Dendrogram Configuration Options for Multiple Levels'
},
series: [{
    // Configuration options for the series
}],
// Additional configuration options...

Interactive features in Highcharts Dendrogram with varying levels:

Implement interactive features for better user engagement.

series: [{
    data: [{
        name: 'Level 1',
        children: [{
            name: 'Sublevel 1.1',
            value: 10,
            events: {
                click: function () {
                    alert('Clicked on ' + this.name);
                }
            }
        }, {
            name: 'Sublevel 1.2',
            value: 15
        }]
    }],
    color: '#64b4dc'
}],

Configuring labels and tooltips in Highcharts Dendrogram:

Customize labels and tooltips for better clarity and information.

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }
},
tooltip: {
    formatter: function () {
        return 'Value: ' + this.point.value;
    }
},

Advanced styling in Highcharts Dendrogram with different levels:

Apply advanced styling options to enhance the visual appeal of the Dendrogram.

chart: {
    style: {
        fontFamily: 'Arial, sans-serif'
    },
    plotBackgroundColor: {
        linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
        stops: [
            [0, '#ffffff'],
            [1, '#eeeeee']
        ]
    },
    plotShadow: true,
    plotBorderWidth: 1,
    plotBorderColor: '#cccccc'
},