Highcharts multiple Y-axis combination

Highcharts supports multiple Y-axes in a single chart, which allows you to display different data series with different scales on the same chart. This is useful for displaying data that may have different units or different magnitudes. To create a combination chart with multiple Y-axes 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>

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: {
    zoomType: 'xy'
  },
  title: {
    text: 'Multiple Y-Axis Combination Chart'
  },
  xAxis: [{
    categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
  }],
  yAxis: [{ // Primary yAxis
    labels: {
      format: '{value}��C'
    },
    title: {
      text: 'Temperature'
    }
  }, { // Secondary yAxis
    title: {
      text: 'Rainfall'
    },
    opposite: true
  }],
  tooltip: {
    shared: true
  },
  series: [{
    name: 'Temperature',
    type: 'column',
    yAxis: 0,
    data: [1, 3, 2, 4, 5]
  }, {
    name: 'Rainfall',
    type: 'spline',
    yAxis: 1,
    data: [10, 20, 15, 25, 30],
    marker: {
      enabled: false
    }
  }]
});

In this example, we're creating a combination chart with multiple Y-axes with the Highcharts chart function and passing in a set of options:

chart.zoomType is set to 'xy' to enable zooming and panning in both axes
title.text is set to 'Multiple Y-Axis Combination Chart' to set the main title
xAxis.categories is set to an array of category labels for the x-axis
yAxis is set to an array of objects with properties to define the Y-axes for the chart. The first object defines the primary Y-axis with a title and label format for temperature data, and the second object defines the secondary Y-axis with a title for rainfall data and opposite set to true to position it on the right side of the chart.
tooltip.shared is set to true to enable a shared tooltip for both series
series is set to an array of objects with a name, type, yAxis, and data property to define the series data and appearance. The type property is set to 'column' for the first series to display it as a column chart, and 'spline' for the second series to display it as a line chart. The yAxis property is used to assign each series to a different Y-axis, and the data property contains the actual data for each series.

With these options, you can create a combination chart with multiple Y-axes and customizable data and appearance. Highcharts also supports other types of Y-axes, including logarithmic and reversed axes.

Customizing appearance in Highcharts with multiple Y-Axes: Customizing the appearance of a chart with multiple Y-Axes involves specifying options for each Y-Axis. You can customize axis labels, colors, and more. Here's a basic example:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    yAxis: [{
        title: {
            text: 'Primary Y-Axis'
        },
        labels: {
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        }
    }, {
        title: {
            text: 'Secondary Y-Axis'
        },
        opposite: true,
        labels: {
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }],
    series: [{
        name: 'Primary Y-Axis Data',
        data: [10, 15, 20, 25, 30]
    }, {
        name: 'Secondary Y-Axis Data',
        yAxis: 1,
        data: [50, 45, 40, 35, 30]
    }]
});

Adding data to Highcharts multiple Y-axis combination: Adding data to a chart with multiple Y-Axes involves specifying the Y-Axis for each series. Here's an example:

series: [{
    name: 'Primary Y-Axis Data',
    data: [10, 15, 20, 25, 30]
}, {
    name: 'Secondary Y-Axis Data',
    yAxis: 1,
    data: [50, 45, 40, 35, 30]
}]

Stacked Combination Chart with Multiple Y-Axes in Highcharts: Creating a stacked combination chart with multiple Y-Axes involves setting the stacking property in the plot options. Here's an example:

plotOptions: {
    series: {
        stacking: 'normal'
    }
},
series: [{
    name: 'Primary Y-Axis Data',
    data: [10, 15, 20, 25, 30]
}, {
    name: 'Secondary Y-Axis Data',
    yAxis: 1,
    data: [50, 45, 40, 35, 30]
}]

Grouped Combination Chart using Multiple Y-Axes in Highcharts: Creating a grouped combination chart with multiple Y-Axes involves omitting the stacking property. Here's an example:

plotOptions: {
    series: {
        // No stacking property for grouped chart
    }
},
series: [{
    name: 'Primary Y-Axis Data',
    data: [10, 15, 20, 25, 30]
}, {
    name: 'Secondary Y-Axis Data',
    yAxis: 1,
    data: [50, 45, 40, 35, 30]
}]

Interactive features in Highcharts multiple Y-axis combination: Highcharts supports interactive features like tooltips, click events, and legends in charts with multiple Y-Axes. You can enable these features to enhance user interaction. Here's a snippet for tooltip configuration:
```
tooltip: {
    shared: true
}
```