Thank you for the quick response! Here is the format object that we are using to create the chart. It is safe to assume that we have data for all series that need them, but the bm**exists vars are all false so we do not render any bm data
Code: Select all
var bm1yrexists = false;
var bm3yrexists = false;
var bm5yrexists = false;
var bm10yrexists = false;
var bmfullexists = false;
var propertiesObj = {
height: 306,
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%b-%d',
week: '%b %Y',
month: '%b %Y',
year: '%b %Y'
}
},
scrollbar: {
enabled: false
},
rangeSelector: {
allButtonsEnabled: true,
selected: 5,
inputDateFormat: '%d/%m/%Y',
inputEditDateFormat: '%d/%m/%Y',
inputEnabled: false,
buttons: [{
type: 'year',
count: 1,
text: '1y',
events: {
click: function () {
chart.series[0].setData(data1yr, true, true, true);
if (bm1yrexists) {
chart.series[1].setData(bmdata1yr, true, true, true);
}
else {
chart.series[1].setData([], true, true, true);
}
chart.reflow();
}
}
}, {
type: 'year',
count: 3,
text: '3y',
events: {
click: function () {
chart.series[0].setData(data3yr, true, true, true);
if (bm3yrexists) {
chart.series[1].setData(bmdata3yr, true, true, true);
}
else {
chart.series[1].setData([], true, true, true);
}
chart.reflow();
}
}
}, {
type: 'year',
count: 5,
text: '5y',
events: {
click: function () {
chart.series[0].setData(data5yr, true, true, true);
if (bm5yrexists) {
chart.series[1].setData(bmdata5yr, true, true, true);
}
else {
chart.series[1].setData([], true, true, true);
}
chart.reflow();
}
}
}, {
type: 'year',
count: 10,
text: '10y',
events: {
click: function () {
chart.series[0].setData(data10yr, true, true, true);
if (bm10yrexists) {
chart.series[1].setData(bmdata10yr, true, true, true);
}
else {
chart.series[1].setData([], true, true, true);
}
chart.reflow();
}
}
}, {
type: 'all',
text: 'All',
events: {
click: function () {
chart.series[0].setData(datafull, true, true, true);
if (bmfullexists) {
chart.series[1].setData(bmdatafull, true, true, true);
}
else {
chart.series[1].setData([], true, true, true);
}
chart.reflow();
}
}
}]
},
title: {
text: ''
},
yAxis: {
labels: {
formatter: function () {
var label = this.axis.defaultLabelFormatter.call(this);
if (/^[0-9]{4}$/.test(label)) {
return Highcharts.numberFormat(this.value, 0);
}
return label.replace('k', 'K');
}
},
showLastLabel: true,
showFirstLabel: true,
opposite: false,
title: {
rotation: 0,
text: "<span>$</span>",
useHTML: true
}
},
navigator: {
enabled: false
},
series: [{
name: 'TCW',
type: 'area',
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.16).get('rgba')],
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.015).get('rgba')]
]
},
fillOpacity: 0.16,
threshold: null,
data: datafull,
tooltip: {
valueDecimals: 2,
valuePrefix: "$"
},
showInLegend: true,
events: {
legendItemClick: function () {
return false;
}
}
}],
credits: {
enabled: false
},
tooltip: {
backgroundColor: '',
borderRadius: 0,
borderWidth: 0
},
padding: 0,
shadow: false,
shape: "chart-arrow",
style: {
color: "#ffffff"
},
useHTML: true,
};
var chart = Highcharts.stockChart('chart-cumulative', propertiesObj, function (chart) { });