본문 바로가기

퍼블리싱/highchart

y축에 가로로 선 그리기 (plotLines) highchart yAxis line (plotLines)

보통 평균값, 기준값 등 나타낼때 쓰는듯.

 

See the Pen highchart yAxis line (plotLines) by publisher.kim (@publisherkim) on CodePen.

 


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

//chart
Highcharts.chart('chart', {
  xAxis: {
    categories: ["'22.09", "'22.10", "'22.11", "'22.12", "'23.01", "'23.02", "'23.03", "'23.04", "'23.05", "'23.06", "'23.07", "'23.08"],
    labels: {
      y: 20,
    },
  },
  yAxis: {
    plotLines: [{
      value: 5000,
      color: '#ff0000',
      width: 2,
      zIndex: 4,
      dashStyle: 'dash', // plotLines를 점선으로 설정
      label: {
        text: '평균',
        align: 'right', // 평균 라벨을 오른쪽으로 정렬
        style: { // label 스타일 설정
          color: '#ff0000',
          fontWeight: '700',
          fontSize: '14px',
        },
        y : -10
      }
    }]
  },
  series: [{
    name: '시리즈1',
    type: 'column',
    data: [7000, 7598, 6765, 5645, 8978, 7874, 6712, 5246, 8978, 7874, 6712, 5246],
  }, {
    name: '시리즈2',
    type: 'spline',
    data: [7598, 6765, 5645, 8978, 7874, 6712, 5246, 8978, 7874, 6712, 5246, 7000],
  }]
});

 

 

728x90