Code: Select all
Highcharts.chart('boxPlotFirst', {
chart: {
type: 'column',
width: 600,
height: 400,
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
},
xAxis: [{
width: '40%',
left: '60%',
offset: 0,
lineColor: '#000000',
tickColor: '#000000',
categories: ['VIX'],
labels: {
autoRotation: false,
overflow: 'allow',
style: {
fontSize: '13px',
color: '#000000',
},
}
}, {
width: '40%',
offset: 0,
lineColor: '#000000',
tickColor: '#000000',
categories: ['MOVE'],
labels: {
autoRotation: false,
overflow: 'allow',
style: {
fontSize: '13px',
color: '#000000',
},
}
}],
yAxis: [{
width: '40%',
left: '60%',
offset: 0,
gridLineColor: '#000000',
min: 0,
labels: {
style: {
fontSize: '13px',
color: '#000000',
},
},
title: {
text: 'VIX index',
style: {
fontSize: '13px',
color: '#000000',
},
}
}, {
width: '40%',
offset: 0,
gridLineColor: '#000000',
min: 10,
labels: {
style: {
fontSize: '13px',
color: '#000000',
},
format: '{value}%'
},
title: {
text: 'MOVE index',
style: {
fontSize: '13px',
color: '#000000',
},
}
}],
legend: {
align: 'center',
verticalAlign: 'top',
enabled: true,
margin: 40,
itemStyle: {
fontSize: '13px',
fontWeight: 'normal',
fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
color: '#000000',
},
},
tooltip: {
useHTML: true,
shared: true
},
plotOptions: {
column: {
stacking: 'normal',
grouping: false
},
},
series: [{
xAxis: 0,
yAxis: 0,
id: 'test',
type: 'line',
name: '5th to 95th Percentile',
color: '#000000',
data: [
[0, 10],
[0, 75]
],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
xAxis: 0,
yAxis: 0,
id: 'range',
name: 'Interquartile range',
data: [25],
color: 'rgb(255,230,127)',
borderColor: '#303030',
zIndex: 77,
pointWidth: 40
}, {
xAxis: 0,
yAxis: 0,
name: 'Q1',
showInLegend: false,
data: [25],
color: 'rgba(100,100,100,0)',
}, {
xAxis: 0,
yAxis: 0,
id: 'Median',
name: 'Median',
type: 'spline',
color: 'rgb(0,139,92)',
lineWidth: 2,
marker: {
lineColor: 'rgb(0,139,92)',
lineWidth: 2,
radius: 9,
symbol: 'dash'
},
zIndex: 88,
data: [41]
}, {
xAxis: 0,
yAxis: 0,
id: 'latest',
name: 'Latest',
type: 'spline',
marker: {
radius: 6,
symbol: 'circle'
},
color: '#ff754b',
zIndex: 99,
data: [36]
},
// second chart
{
xAxis: 1,
yAxis: 1,
linkedTo: 'test',
type: 'line',
name: 'test',
color: '#000000',
data: [
[0, 10],
[0, 75]
],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
xAxis: 1,
yAxis: 1,
linkedTo: 'range',
name: 'Interquartile range',
data: [25],
color: 'rgb(255,230,127)',
borderColor: '#303030',
zIndex: 77,
pointWidth: 40
}, {
xAxis: 1,
yAxis: 1,
name: 'Q1',
showInLegend: false,
data: [25],
color: 'rgba(100,100,100,0)',
}, {
xAxis: 1,
yAxis: 1,
linkedTo: 'median',
name: 'Median',
type: 'spline',
color: 'rgb(0,139,92)',
lineWidth: 2,
marker: {
lineColor: 'rgb(0,139,92)',
lineWidth: 2,
radius: 9,
symbol: 'dash'
},
zIndex: 88,
data: [41]
}, {
xAxis: 1,
yAxis: 1,
linkedTo: 'latest',
name: 'Latest',
type: 'spline',
marker: {
radius: 6,
symbol: 'circle'
},
color: '#ff754b',
zIndex: 99,
data: [36]
}]
});