Code: Select all
const date = new Date(2018, 0, 1);
const dates = [];
const lastYear = 2022;
let data1 = [];
let data2 = [];
let data3 = [];
while (date.getFullYear() <= lastYear) {
dates.push(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
data1.push(Math.floor(Math.random() * 5) + 1);
data2.push(Math.floor(Math.random() * 5) + 1);
data3.push(Math.floor(Math.random() * 5) + 1);
date.setDate(date.getDate() + 1);
}
Highcharts.chart('historicalChart', {
chart: {
type: 'area'
},
credits: {enabled: false}, // 하단 highchart.com 글씨 삭제
exporting: { // 상단 context menu 제거
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.category}, {point.percentage:.1f}%.'
}
},
xAxis: {
type: 'datetime',
categories: dates,
lineColor: '#000000',
tickColor: '#000000',
tickmarkPlacement: 'on',
tickInterval: 1,
allowDecimals: false,
labels: {
formatter() {
let date = new Date(this.value);
console.log(date);
return Highcharts.dateFormat('%Y', this.value);
},
},
},
yAxis: [{
lineWidth: 0,
gridLineColor: '#000000',
title: {
text: ''
},
labels: {
formatter: function () {
//Add percent sign to first value
if (this.isLast == true) {
return this.value + "%";
} else {
return this.value;
}
}
}
}],
tooltip: {
// shared: true,
// crosshairs: true,
xDateFormat: '%b.%d, %Y ',
valueSuffix: '%',
valueDecimals: 1,
style: {
fontSize: '13.5px',
color: '#000000'
}
},
// tooltip: {
// pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
// },
legend: {
align: 'right',
verticalAlign: 'top',
},
plotOptions: {
size: '100%',
area: {
stacking: 'percent',
lineColor: '#000000',
lineWidth: 1,
pointPlacement: 'on',
marker: {
enabled: false
},
},
column: {
stacking: 'normal',
pointPadding: 0,
groupPadding: 0,
borderWidth: 0
}
},
series: [
{
name: 'Oceania',
data: data1,
color: '#ff754b',
}, {
name: 'Asia',
data: data2,
color: '#FF8000',
}, {
name: 'Africa',
data: data3,
color: '#2e9875',
},
]
});