I'm trying to add some fancy logic to a button range preselection. The idea is to highlight the button with maximum range that has available data.
As you can see on the picture below we don't have data for 5 years price history but we have 1 year and the idea is to show "1 Year" button highlighted in this case.
And if the price history has only 9 months available we want to show "6 Month" button highlighted.
The piece responsible for rangeSelector:
Code: Select all
rangeSelector: {
allButtonsEnabled: true,
enabled: true,
floating: false,
buttonSpacing: 10,
buttonPosition: {
align: 'right'
},
buttons: [
{
text: 'Week',
count: 1,
type: 'week'
},
{
text: '1 Month',
count: 1,
type: 'month'
},
{
text: '6 Month',
count: 6,
type: 'month'
},
{
text: '1 Year',
count: 1,
type: 'year'
},
{
text: '5 Years',
count: 5,
type: 'year'
}
],
buttonTheme: {
fill: '#fff',
stroke: 'none',
'stroke-width': 0,
r: 5,
style: {
color: '#171D28',
fontWeight: 500,
fontSize: '16px'
},
states: {
select: {
fill: '#072FCC',
style: {
color: '#FFF'
}
},
hover: {
fill: '#c1cbf2',
style: {
color: '#171D28'
}
}
},
padding: 6,
width: 60
},
inputEnabled: false,
labelStyle: {
color: 'transparent'
}
}