Reputation: 10704
I was looking at this codebase https://jsfiddle.net/mushigh/zvq46kg8/ which gave me insight on how to develop a scrollbar. When attemptng to do it myself though it doesnt work correctly.
The fiddle shows the following set up for the chart:
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
},
plotOptions: {
column: {
stacking: 'normal'
},
},
xAxis: {
type: 'category',
min: 0,
max: 5
},
scrollbar: {
enabled: true
},
series: [{
type: 'pie',
name: 'Total consumption',
zIndex: 9,
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [300, 10],
size: 50,
showInLegend: false,
dataLabels: {
enabled: false
}
}, {
name: "A",
data: test(20)
}, {
name: "B",
data: test(20)
},
{
name: "C",
data: test(20)
},
{
name: "D",
data: test(20)
}
]
});
I was trying to implement this with angular-highcharts through and while it looks like everything works, the horizontal bars are not hidden when outside of the view port.
You can see there are some bars which show when they should not. (This is in comparison to the above jsfiddle).
I created a repo in order to create reproducibility. You should just need to npm intall and then ng serve. The repo is located at: https://github.com/fallenreaper/highchart-angular-scrolling.git
Everything should be in place and you should be able to serve the app, go to localhost and see the issue. I didnt update it YET but i can revert the dataset to the one given in the jsfiddle as well.
Is this a glitch with Angular HighCharts, or is here something else going on?
Upvotes: 0
Views: 153
Reputation: 11633
Here is my reproduction of the demo which you have shared in the Angular environment.
Demo: https://codesandbox.io/s/angular-ldxch
Please notice that this example uses the Highstock, not Highcharts - scrollbar is not implemented in Highcharts.
Highcharts use the scrollablePlotArea instead: https://api.highcharts.com/highcharts/chart.scrollablePlotArea
Upvotes: 2