highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる

highcharts.jsで「棒グラフと折れ線グラフを入れる」「Y軸はそれぞれ違う値にしたい」を実現する方法をメモ。

サンプル

https://taitan916.info/sample/highcharts.js/mix/

ソースコード

<div id="graph"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts@11.4.1/highcharts.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/highcharts@11.4.1/css/highcharts.min.css" rel="stylesheet">

<script>
$(function() {
    $('#graph').highcharts({
        title: {
            text: 'グラフ自体のタイトル'
        },
        xAxis: {
            categories: ["2012-11", "2012-12", "2013-01", "2013-02", "2013-03"]
        },
        yAxis: [{
            title: {
                text: '棒グラフのタイトル',
            },
            labels: {
                formatter: function() {
                    return this.value + 'pts'; //Y軸部分の表記
                }
            },
            min: 0
        }, {
            title: {
                text: '折れ線グラフのタイトル',
            },
            labels: {
                formatter: function() {
                    return this.value + '時間'; //Y軸部分の表記
                }
            },
            min: 0,
            opposite: true
        }],
        series: [{
            name: '棒グラフのタイトル',
            data: [1, 2, 5, 7, 10],
            type: 'column', //column->棒グラフ,line->折れ線グラフ
            color: '#d1a4ff' //棒グラフの色
        }, {
            name: '折れ線グラフのタイトル',
            data: [10, 3, 7, 9, 2],
            type: 'line', //column->棒グラフ,line->折れ線グラフ
            yAxis: 1
        }],
        credits: {
            enabled: false
        }
    });
});
</script>