Code: Select all
//First
Highcharts.chart('boxPlotFirst', {
chart: {
type: 'column',
width: 150,
height: 300,
},
credits: {enabled: false},
exporting: {
enabled: false
},
title: {
text: ''
},
xAxis: {
lineColor: '#000000',
tickColor: '#000000',
categories: ['VIX'],
labels: {
autoRotation: false,
overflow: 'allow',
style: {
fontSize: '13px',
color: '#000000',
},
}
},
yAxis: {
gridLineColor: '#000000',
min: 0,
labels: {
style: {
fontSize: '13px',
color: '#000000',
},
},
title: {
text: 'VIX index',
style: {
fontSize: '13px',
color: '#000000',
},
}
},
legend: {
align: 'right',
enabled: true,
itemStyle: {
fontSize: '13px',
fontWeight: 'normal',
fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
color: '#000000'
},
},
tooltip: {
useHTML: true,
shared: true
},
plotOptions: {
column: {
stacking: 'normal'
},
},
series: [{
type: 'line',
name: 'test',
color: '#000000',
data: [[0, 10], [0, 75]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
},{
name: 'Interquartile<br> range',
data: [25],
color: 'rgb(255,230,127)',
borderColor: '#303030',
zIndex:77,
pointWidth: 40
},{
name: 'Q1',
showInLegend: false,
data: [25],
color: 'rgba(100,100,100,0)',
},{
name: 'Median',
type: 'spline',
color: 'rgb(0,139,92)',
showInLegend: false,
lineWidth: 2,
marker: {
lineColor: 'rgb(0,139,92)',
lineWidth: 2,
radius: 9,
symbol: 'dash'
},
zIndex: 88,
data: [41]
},{
name: 'Latest',
type: 'spline',
showInLegend: false,
marker: {
radius: 6,
symbol: 'circle'
},
color: '#ff754b',
zIndex: 99,
data: [36]
}]
});
// Second
Highcharts.chart('boxPlotSecond', {
chart: {
type: 'column',
width: 150,
height: 300,
},
credits: {enabled: false},
exporting: {
enabled: false
},
title: {
text: ''
},
xAxis: {
lineColor: '#000000',
tickColor: '#000000',
categories: ['MOVE'],
labels: {
autoRotation: false,
overflow: 'allow',
style: {
fontSize: '13px',
color: '#000000',
},
}
},
yAxis: {
gridLineColor: '#000000',
min: 10,
labels: {
style: {
fontSize: '13px',
color: '#000000',
},
format:'{value}%'
},
title: {
text: 'MOVE index',
style: {
fontSize: '13px',
color: '#000000',
},
}
},
legend: {
enabled: false,
},
tooltip: {
useHTML: true,
shared: true
},
plotOptions: {
column: {
stacking: 'normal',
},
},
series: [{
type: 'line',
name: 'test',
color: '#000000',
data: [[0, 10], [0, 75]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
},{
name: 'Interquartile<br> range',
data: [25],
color: 'rgb(255,230,127)',
borderColor: '#303030',
zIndex:77,
pointWidth: 40
},{
name: 'Q1',
showInLegend: false,
data: [25],
color: 'rgba(100,100,100,0)',
},{
name: 'Median',
type: 'spline',
color: 'rgb(0,139,92)',
showInLegend: false,
lineWidth: 2,
marker: {
lineColor: 'rgb(0,139,92)',
lineWidth: 2,
radius: 9,
symbol: 'dash'
},
zIndex: 88,
data: [41]
},{
name: 'Latest',
type: 'spline',
showInLegend: false,
marker: {
radius: 6,
symbol: 'circle'
},
color: '#ff754b',
zIndex: 99,
data: [36]
}]
});
What I want is a legend like the picture below.