* 하이차트 전역 옵션 먼저 적용됨 (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,
}]
});
728x90
'퍼블리싱 > highchart' 카테고리의 다른 글
5단계 gauage chart highchart 5steps guage chart (0) | 2023.09.14 |
---|---|
series 팁 (차트 hover액션 false / legend와 차트 영역에서 숨기기) (0) | 2023.09.14 |
비교 차트 highchart compare chart (0) | 2023.09.13 |
일주일간 15분 단위로 데이터 넣기 highchart 1week data (every 15 minutes) (0) | 2023.09.13 |
legend에서 특정 item의 click이 안되게 할때 옵션 (0) | 2023.09.13 |