I want to change the stock chart tooltip format like the attached image, is it possible?
And I wonder if the legend location and range selector location will be like the attached image.
Thank you very much for your reply!
Code: Select all
Highcharts.setOptions({
lang: {
// Pre-v9 legacy settings
rangeSelectorTo: 'To',
},
});
const date = new Date(2022, 0, 1);
const dates = [];
const lastYear = 2022;
let data1 = [];
let data2 = [];
let data3 = [];
while (date.getFullYear() <= lastYear) {
data1.push([Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()), Math.floor(Math.random() * 1000) + 100]);
data2.push([Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()), Math.floor(Math.random() * 1000) + 100]);
date.setDate(date.getDate() + 1);
}
Highcharts.stockChart('growthChart', {
credits: {enabled: false}, // 하단 highchart.com 글씨 삭제
navigator: {
enabled: false,
},
scrollbar: {
enabled: false,
},
xAxis: {
type: 'datetime',
lineColor: '#000000',
tickColor: '#000000',
tickmarkPlacement: 'on',
tickInterval: 24 * 60 * 60 * 1000 * 20,
labels: {
formatter: function() {
return Highcharts.dateFormat('%b %e, %Y', Number(this.value));
},
style: {
color: '#000000',
fontSize: '18px',
fontWeight: 'bold',
padding: '20px 0px 0px 0px'
}
},
},
yAxis: {
opposite: false,
},
tooltip: {
split: false,
shared: false,
// crosshairs: false,
xDateFormat: '%b.%d, %Y ',
valueDecimals: 1,
pointFormat: '<strong style="color:{series.color};">{series.name}</strong> <b>{point.y:.1f}%</b>',
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
},
rangeSelector: {
buttonTheme: { // styles for the buttons
r: 8,
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white',
},
},
// disabled: { ... }
},
},
inputBoxBorderColor: 'gray',
inputBoxWidth: 120,
inputBoxHeight: 18,
inputStyle: {
color: '#039',
fontWeight: 'bold',
},
labelStyle: {
color: 'silver',
fontWeight: 'bold',
},
selected: 1,
},
series: [
{
name: 'Oceania',
data: data1,
color: '#FF754B',
}, {
name: 'Asia',
data: data2,
color: '#FEC90E',
},
],
});