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,
},
]
});
728x90
'퍼블리싱 > highchart' 카테고리의 다른 글
series 팁 (차트 hover액션 false / legend와 차트 영역에서 숨기기) (0) | 2023.09.14 |
---|---|
간단한 multi yAxis 차트 highchart dual + multi yAxis chart (0) | 2023.09.14 |
일주일간 15분 단위로 데이터 넣기 highchart 1week data (every 15 minutes) (0) | 2023.09.13 |
legend에서 특정 item의 click이 안되게 할때 옵션 (0) | 2023.09.13 |
y축에 가로로 선 그리기 (plotLines) highchart yAxis line (plotLines) (0) | 2023.09.13 |