Code: Select all
Highcharts.chart('dataChart', {
credits: { enabled: false }, // 하단 highchart.com 글씨 삭제
navigator: {
enabled: false,
},
scrollbar: {
enabled: false,
},
chart: {
zoomType: 'x',
height: 300,
events: {
render() {
const chart = this,
legend = chart.legend,
legendMargin = legend.options.margin ? legend.options.margin - legend.padding : 0,
startX = 0,
startY = legend.group.translateY + legend.legendHeight + legendMargin / 2,
endX = chart.chartWidth,
endY = startY;
if (!chart.customLine) {
chart.customLine = chart.renderer
.path(['M', startX, startY, 'L', endX, endY])
.attr({
'stroke-width': 2,
stroke: 'black',
})
.add();
} else {
chart.customLine.attr({
d: ['M', startX, startY, 'L', endX, endY],
});
}
},
},
},
title: {
text: '',
},
tooltip: {
split: false,
shared: false,
xDateFormat: '%b.%d, %Y ',
},
xAxis: {
type: 'datetime',
tickmarkPlacement: 'on',
labels: {
overflow: 'allow',
tickInterval: 24 * 60 * 60 * 1000 * 20,
style: {
fontSize: '13px',
color: '#000000',
},
formatter: function () {
return Highcharts.dateFormat('%b %d, %Y', Number(this.value));
},
},
title: {
text: null,
},
},
yAxis: {
title: {
text: 'VIX Index',
style: {
fontSize: '13px',
color: '#000000',
},
},
},
legend: {
align: 'right',
verticalAlign: 'top',
enabled: true,
margin: 40,
itemStyle: {
fontSize: '13px',
fontWeight: 'normal',
fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
color: '#000000',
},
},
plotOptions: {
series: {
marker: {
enabled: false,
},
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')],
],
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1,
},
},
},
},
series: [
{
name: 'MOVE',
color: '#FF8000',
data: this.data.dataChart.moveValue,
showInLegend: true,
},
{
name: 'VIX',
color: '#000',
data: this.data.dataChart.vixValue,
showInLegend: true,
},
],
});