Highcharts dual Y axis, column chart, line chart combination

To create a dual Y-axis column chart and line chart combination using 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: 'Dual Y-Axis Column and Line Chart Combination'
  },
  xAxis: [{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ],
    crosshair: true
  }],
  yAxis: [{ // Primary yAxis
    labels: {
      format: '{value}��C',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    },
    title: {
      text: 'Temperature',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    },
    opposite: true
  }, { // Secondary yAxis
    gridLineWidth: 0,
    title: {
      text: 'Rainfall',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '{value} mm',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    }
  }],
  tooltip: {
    shared: true
  },
  series: [{
    name: 'Rainfall',
    type: 'column',
    yAxis: 1,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
      valueSuffix: ' mm'
    }

  }, {
    name: 'Temperature',
    type: 'spline',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    tooltip: {
      valueSuffix: '��C'
    }
  }]
});

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

chart.zoomType is set to 'xy' to enable zooming and panning on both axes
title.text is set to 'Dual Y-Axis Column and Line Chart Combination' to set the main title
xAxis.categories is set to an array of month names to set the x-axis categories
xAxis.crosshair is set to true to enable crosshairs on the x-axis for easier data reading
yAxis is set to an array with two objects to define the two y-axes, including the title, labels, and other formatting options
tooltip.shared is set to true to enable shared tooltips for easier data reading

Customizing appearance in Highcharts Dual Y-Axis Combination Chart:

Customize the appearance of the Dual Y-Axis Combination Chart with various styling options.

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Customizing Appearance in Highcharts Dual Y-Axis Combination Chart'
    },
    xAxis: {
        categories: ['Category 1', 'Category 2', 'Category 3']
    },
    yAxis: [{
        title: {
            text: 'Primary Axis'
        }
    }, {
        title: {
            text: 'Secondary Axis'
        },
        opposite: true
    }],
    series: [{
        name: 'Column Series',
        data: [10, 20, 30],
        yAxis: 0
    }, {
        name: 'Line Series',
        data: [50, 70, 90],
        yAxis: 1,
        type: 'line'
    }],
    // Additional configuration options...
});

Adding data to Highcharts Dual Y-Axis Column and Line Chart:

Add data to represent different series on the primary and secondary y-axes.

series: [{
    name: 'Column Series',
    data: [10, 20, 30],
    yAxis: 0
}, {
    name: 'Line Series',
    data: [50, 70, 90],
    yAxis: 1,
    type: 'line'
}],

Highcharts Dual Y-Axis Column and Line Chart live demo:

Explore a live demo of the Highcharts Dual Y-Axis Column and Line Chart on your website.

<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.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>
<script>
    // Highcharts Dual Y-Axis Combination Chart configuration here...
</script>

Highcharts Dual Y-Axis Column and Line Chart configuration options:

Explore various configuration options to fine-tune the Dual Y-Axis Combination Chart.

chart: {
    type: 'column'
},
title: {
    text: 'Dual Y-Axis Combination Chart Configuration Options'
},
xAxis: {
    // Configuration options for the x-axis
},
yAxis: [{
    // Configuration options for the primary y-axis
}, {
    // Configuration options for the secondary y-axis
    opposite: true
}],
series: [{
    // Configuration options for the first series
}, {
    // Configuration options for the second series
}],
// Additional configuration options...

Stacked Dual Y-Axis Column and Line Chart in Highcharts:
- Create a stacked Dual Y-Axis Combination Chart for better visualization.
```
plotOptions: {
    column: {
        stacking: 'normal'
    }
},
```
Grouped Dual Y-Axis Column and Line Chart using Highcharts:
- Group columns and lines side by side for comparison.
```
plotOptions: {
    column: {
        grouping: false
    }
},
```

Interactive features in Highcharts Dual Y-Axis Combination Chart:

Implement interactive features for a better user experience.

series: [{
    name: 'Column Series',
    data: [10, 20, 30],
    yAxis: 0,
    events: {
        click: function (event) {
            alert('Clicked on Column Series: ' + this.name);
        }
    }
}, {
    name: 'Line Series',
    data: [50, 70, 90],
    yAxis: 1,
    type: 'line',
    events: {
        click: function (event) {
            alert('Clicked on Line Series: ' + this.name);
        }
    }
}],