Highcharts column chart, line chart, pie chart combination

To create a combination chart using Highcharts with a column chart, a line chart, and a pie chart, 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>

Create container elements for each chart in your HTML file, like this:

<div id="column-chart"></div>
<div id="line-chart"></div>
<div id="pie-chart"></div>

In your JavaScript code, define the data for each chart. For the column and line charts, you can use an array of numbers or objects with 'name' and 'y' properties. For the pie chart, you'll need an array of objects with 'name' and 'y' properties, like this:

var columnData = [5, 3, 4, 7, 2];
var lineData = [2, 7, 4, 3, 5];
var pieData = [
  { name: 'Apples', y: 5 },
  { name: 'Oranges', y: 3 },
  { name: 'Bananas', y: 4 },
  { name: 'Pears', y: 7 },
  { name: 'Grapes', y: 2 }
];

Create Highcharts chart objects for each chart and configure them with the data and chart options. In this case, we want a column chart, a line chart, and a pie chart, so we'll create three chart objects and use the 'data' option to specify the data for each chart, like this:

Highcharts.chart('column-chart', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Column Chart'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: 'Value'
    }
  },
  series: [{
    name: 'Data',
    data: columnData
  }]
});

Highcharts.chart('line-chart', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Line Chart'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: 'Value'
    }
  },
  series: [{
    name: 'Data',
    data: lineData
  }]
});

Highcharts.chart('pie-chart', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Pie Chart'
  },
  series: [{
    name: 'Data',
    data: pieData
  }]
});

Note that we're using the 'data' option to specify the data for each chart, and the 'xAxis' and 'yAxis' options to set the labels for the axes.

Finally, add some CSS to style the chart containers and make them responsive, like this:

#column-chart, #line-chart, #pie-chart {
  width: 100%;
  height: 500px;
  max-width: 800px;
  margin: 0 auto;
}

This will create a combination chart using the specified data and options, and render it in the 'column-chart', 'line-chart', and 'pie-chart' elements on your web page. You can customize the charts further by adjusting the options and adding additional features, like tooltips, legends, and labels.

Customizing appearance in Highcharts Combo Chart with multiple types:

Customize the appearance by adjusting various chart options such as colors, line styles, and marker shapes for each series.

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Combo Chart with Multiple Types'
    },
    xAxis: {
        categories: ['Category 1', 'Category 2', 'Category 3']
    },
    yAxis: {
        title: {
            text: 'Y-Axis Label'
        }
    },
    series: [{
        name: 'Column Series',
        type: 'column',
        data: [10, 15, 7],
        color: '#64b4dc' // Column color
    }, {
        name: 'Line Series',
        type: 'line',
        data: [5, 10, 5],
        color: '#ff9900', // Line color
        marker: {
            symbol: 'circle' // Marker shape
        }
    }, {
        name: 'Pie Series',
        type: 'pie',
        data: [{
            name: 'Slice 1',
            y: 20
        }, {
            name: 'Slice 2',
            y: 30
        }],
        center: [100, 80], // Pie center position
        size: 100, // Pie size
        showInLegend: false // Hide from legend
    }],
    // Other configuration options...
});

Adding data to Highcharts Combo Chart with Column, Line, and Pie:

Add data for each series within the series array to create a Combo Chart with multiple types.

series: [{
    name: 'Column Series',
    type: 'column',
    data: [10, 15, 7],
    // Other configuration options...
}, {
    name: 'Line Series',
    type: 'line',
    data: [5, 10, 5],
    // Other configuration options...
}, {
    name: 'Pie Series',
    type: 'pie',
    data: [{
        name: 'Slice 1',
        y: 20
    }, {
        name: 'Slice 2',
        y: 30
    }],
    // Other configuration options...
}]

Stacked Combination Chart in Highcharts with various types:

Create a stacked Combination Chart with multiple types by configuring the stacking option for the desired series.

plotOptions: {
    column: {
        stacking: 'normal' // Stack columns on top of each other
    }
},
series: [{
    name: 'Column Series',
    type: 'column',
    data: [10, 15, 7],
    // Other configuration options...
}, {
    name: 'Line Series',
    type: 'line',
    data: [5, 10, 5],
    // Other configuration options...
}, {
    name: 'Pie Series',
    type: 'pie',
    data: [{
        name: 'Slice 1',
        y: 20
    }, {
        name: 'Slice 2',
        y: 30
    }],
    // Other configuration options...
}]

Grouped Combination Chart using Highcharts with multiple types:

Create a grouped Combination Chart with multiple types by configuring the grouping option for the desired series.

plotOptions: {
    column: {
        grouping: false // Display columns side by side
    }
},
series: [{
    name: 'Column Series',
    type: 'column',
    data: [10, 15, 7],
    // Other configuration options...
}, {
    name: 'Line Series',
    type: 'line',
    data: [5, 10, 5],
    // Other configuration options...
}, {
    name: 'Pie Series',
    type: 'pie',
    data: [{
        name: 'Slice 1',
        y: 20
    }, {
        name: 'Slice 2',
        y: 30
    }],
    // Other configuration options...
}]

Interactive features in Highcharts Combo Chart with Column, Line, and Pie:

Enable interactive features like tooltips, data labels, and events for a richer user experience.

tooltip: {
    shared: true // Share tooltip for all series
},
plotOptions: {
    column: {
        dataLabels: {
            enabled: true // Show data labels for columns
        }
    },
    line: {
        dataLabels: {
            enabled: true // Show data labels for lines
        }
    },
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f}%'
        }
    }
}