faisal faisal - 2 months ago 18
HTML Question

scrollbar is not initially visible in highstock

I am using highstock to create charts in my asp.net MVC application
I have added a navigation along with it i have added a scroll bar
I am viewing 4 charts in a single view, for all charts the horizontal scroll bar is visible only for one as show in the image

enter image description here

In the image the above chart's scrollbar is visible but not for the chart bellow it

But when i move my navigation bar a bit it displays the scrollbar like this

Bellow is my Razor for chart

var chart3 = new Highcharts.Chart({

chart: {
renderTo: 'container3',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift',
resetZoomButton: {
position: {
//align: 'right', // by default
//verticalAlign: 'top', // by default
x: -10,
y: 350,
//height: 25
},
relativeTo: 'chart'
}
},
scrollbar: {
enabled: true,
showFull: false
},
rangeSelector: {
enabled: true,
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
// disabled: { ... }
}
},
inputBoxWidth: 160,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'black',
fontWeight: 'bold'
},
buttons: [{
type: 'minute',
count: 60 * 6,
text: '6h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 7,
text: '7d'
},
{
type: 'day',
count: 14,
text: '2w'
},
{
type: 'day',
count: 21,
text: '3w'

},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'all',
text: 'All'
}]
},
navigator: {

enabled: true,
height: 30,
},
//scrollbar: {
// enabled: true,
// barBackgroundColor: 'silver',
// barBorderRadius: 7,
// barBorderWidth: 0,
// buttonBackgroundColor: 'silver',
// buttonBorderWidth: 0,
// buttonArrowColor: 'yellow',
// buttonBorderRadius: 7,
// rilfeColor: 'yellow',
// trackBackgroundColor: 'none',
// trackBorderWidth: 1,
// trackBorderRadius: 8,
// trackBorderColor: '#CCC'
//},

title: {
text: 'Voltage vs Date & Time',
style: {
//color: '#FF00FF',
fontWeight: 'bold'
}
},
xAxis: {
// categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
type: 'datetime'
},
yAxis: {
scrollbar: {
enabled: true,
showFull: false
},
alternateGridColor: '#FDFFD5',
title: {
text: 'Voltage (V)'
}

},
plotOptions: {
line: {
turboThreshold: 50000
},
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 3
}
}
},
series: [{
name: 'Voltages Phase 1',
color: 'red',
data: arry_voltage_1,
}, {
name: 'Voltages Phase 2',
color: 'yellow',
data: arry_voltage_2,
}, {
name: 'Voltages Phase 3',
color: 'blue',
data: arry_voltage_3,
},
],


});


Any help would be highly appreciated

enter image description here

Answer

Remove or comment showFull: false in your scrollbar: {enabled: true, showFull: false}, or set the value to true and it will work surely