비교 차트 highchart compare chart

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

 

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

//chart
Highcharts.chart('chart', {
  chart: {
    type: 'column',
    marginTop: 30,
    marginBottom: 80,
  },
  title: null,
  subtitle: null,
  xAxis: {
    categories: ['before', 'after', ],
    plotBands: [{
      from: 0, // Start of the plot band
      to: 1, // End of the plot band
      color: 'transparent',
      label: {
        text: '-32%',
        align: 'center',
        useHTML: true,
        style: { // label 스타일 설정
          color: '#ee1e1e',
          fontSize: '25px',
          fontWeight: '800',
          zIndex: 9999,
        },
        y: 70,
        x: -60
      }
    }]
  },
  yAxis: {
    reversedStacks: false,
  },
  tooltip: {
    shared: true,
    formatter: function() {
      let tooltip = '<div><b style="color:#000; margin-bottom:2px; display:block;">' + this.x + '</b></div>';
      // Get the categories and index for the current x value
      var chart = this.points[0].series.chart;
      var categories = chart.xAxis[0].categories;
      var index = 0;
      while (this.x !== categories[index]) {
        index++;
      }
      $.each(chart.series, function(i, series) {
        let seriesName = series.name; // Use the series name directly
        // Ignore '시리즈1 절감량' and '시리즈1 절감율(%)'and '시리즈2 절감량' series
        if (seriesName !== '시리즈1 절감량' && seriesName !== '시리즈1 절감율(%)' && seriesName !== '시리즈2 절감량') {
          let value = series.yData[index]; // Get the corresponding data point for the current x value
          if (value !== 0) {
            if (seriesName === '시리즈2' || seriesName === '시리즈2 절감량 (1)' || seriesName === '시리즈2 절감량 (2)') {
              value = value.toLocaleString() + '원';
            } else {
              value = value.toLocaleString() + '개';
            }
            tooltip += '<span style="color:' + series.color + '">\u25CF</span> ' + seriesName + ': <b>' +
              value + '</b><br/>';
          }
        }
      });
      return tooltip;
    },
  },
  plotOptions: {
    column: {
      stacking: true,
      dataLabels: {
        enabled: true,
        formatter: function() {
          // 데이터 값이 0인 경우 데이터 레이블을 비활성화합니다.
          if (this.y === 0) {
            return null;
          }
          let unit = '';
          if (this.series.name === '시리즈2' || this.series.name === '시리즈2 절감량') {
            unit = '개';
          } else {
            unit = '원';
          }
          return this.y.toLocaleString() + unit;
        },
        style: {
          fontSize: '14px',
          fontWeight: '600'
        }
      }
    },
    series: {
      borderWidth: 0
    }
  },
  series: [{
      name: '시리즈1',
      color: '#f5b93d',
      data: [100, 70],
      stack: 0,
      borderRadiusTopLeft: 2,
      borderRadiusTopRight: 2,
    }, {
      name: '시리즈2',
      color: '#42a7f4',
      data: [86, 66],
      stack: 1,
      borderRadiusTopLeft: 2,
      borderRadiusTopRight: 2,
    }, {
      name: '시리즈1 절감량',
      color: '#f86253',
      data: [0, 30],
      stack: 0,
      enableMouseTracking: false
    }, {
      name: '시리즈2 절감량',
      color: '#a4df65',
      data: [0, 20],
      stack: 1,
      enableMouseTracking: false,
    }, {
      type: 'line',
      name: '시리즈1 절감율(%)',
      data: [100, 70],
      color: '#ee1e1e',
      lineWidth: 3, // 막대 border 값
      dashStyle: 'shortdot', // 선 스타일   
      enableMouseTracking: false,
      label: {
        enabled: false, // 차트영역에 나오는 series name 숨기기,
      },
      pointPlacement: -0.15,
      zIndex: 3, // 라인 차트를 가장 위에 표시
    }, {
      name: '시리즈1 절감량 (1)',
      color: '#f86253', // 원하는 색상 코드로 변경
      data: [0, 20], // 데이터 값 설정
      visible: false, // 초기에 숨김
      "showInLegend": false,
    },
    {
      name: '시리즈1 절감량 (2)',
      color: '#f86253', // 원하는 색상 코드로 변경
      data: [0, 10], // 데이터 값 설정
      visible: false, // 초기에 숨김
      "showInLegend": false,
    }, {
      name: '시리즈2 절감량 (1)',
      color: '#a4df65', // 원하는 색상 코드로 변경
      data: [0, 5], // 데이터 값 설정
      visible: false, // 초기에 숨김
      "showInLegend": false,
    },
    {
      name: '시리즈2 절감량 (2)',
      color: '#a4df65', // 원하는 색상 코드로 변경
      data: [0, 15], // 데이터 값 설정
      visible: false, // 초기에 숨김
      "showInLegend": false,
    },
  ]
});