간단한 multi yAxis 차트 highchart dual + multi yAxis chart

See the Pen highchart simple dual chart by publisher.kim (@publisherkim) on CodePen.

 

* 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js)

    Highcharts.chart('chart', {
      xAxis: {
        categories: ['카테고리1', '카테고리2', '카테고리3'],
      },
      yAxis: [{
        title: {
          text: '시리즈1 y축'
        },
        labels: {
          format: '{value}개' // y축 format 설정
        },
      }, {
        title: {
          text: '시리즈2 y축'
        },
        labels: {
          format: '{value}원' // y축 format 설정
        },
        opposite: true,
      }, ],
      tooltip: {
        shared: true,
        formatter: function() {
          let tooltip = '<div><b style="color:#000; margin-bottom:2px; display:block;">' + this.x +
            '</b></div>';
          this.points.forEach(function(point) {
            let seriesName = point.series.name;
            let value = point.y;
            if (seriesName === '시리즈1') {
              value = value.toLocaleString() + '개'; // 시리즈1의 tooltip format
            } else {
              value = value.toLocaleString() + '원'; // 시리즈2의 tooltip format
            }
            tooltip += '<span style="color:' + point.color + '">\u25CF</span> ' + seriesName + ': <b>' +
              value + '</b><br/>';
          });
          return tooltip;
        },
      },
      plotOptions: {
        column: {
          dataLabels: {
            enabled: true,
            inside: true, // Set to true if you want data labels inside the columns
            format: '{y}개', // data label format 설정
            style: {
              fontSize: '14px',
              fontWeight: '600',
            }
          }
        },
      },
      series: [{
        name: '시리즈1',
        type: 'line',
        color: '#f5b93d',
        data: [100, 70, 170],
        yAxis: 1, // 다중 y축 사용 시 해당 series의 기준 y축 지정 (기본값 0 (왼쪽))
        zIndex: 3, // 라인 차트를 가장 위에 표시
      }, {
        name: '시리즈2',
        type: 'column',
        data: [86, 66, 152],
        borderRadiusTopLeft: 2,
        borderRadiusTopRight: 2,
      }]
    });