I'm using angular-chart.js
(v1.1.1), an angular wrapper around chart.js
(I believe angular-chart.js
uses chart.js
v2.x), and am having trouble creating a horizontal scroll effect when the number of bars in a bar chart start to get large.
I've seen this as the solution elsewhere: http://jsfiddle.net/mbhavfwm/
But:
- I'm not sure if I have access to the underlying chart element in the way the user does here with
angular-chart.js
- I can't even get access to
onAnimationComplete
inangular-chart.js
. - It seems a bit hacky to use this solution. Is there a better way to not render 2 x axes while ensuring the bar graph can scroll horizontal?
Here is my current solution: I have 3 containing divs, and the canvas
is finally rendered inside the 3rd containing div with the following config:
this.chartOptions = this.composeChartService.createChartOptions({
title: ctrl.chartTitle,
legend: {
position: 'bottom'
},
responsive: true,
maintainAspectRatio: true
});
Here is the jade:
mixin dynamic-chart(type)
canvas(
class=`chart chart-${ type }`
title="$ctrl.chartId"
chart-data="$ctrl.events"
chart-series="$ctrl.cities"
chart-labels="$ctrl.labels"
chart-click="$ctrl.onClickBar"
chart-options="$ctrl.chartOptions")
div.chart-wrapper(ng-switch="$ctrl.chartType")
//- Bar chart
div.chart-area-wrapper(ng-when="bar")
div.chart-test
+dynamic-chart('bar')
And here is the stylus that affects these divs:
.chart-wrapper
width: 800px
overflow: auto
canvas
background-color: white
width: 100%
.chart-test
width: 1200px !important
background-color: yellow
The horizontal scroll kind of works with this solution, but the bar thickness is too low, and I don't like arbitrarily picking the width of the.chart-test
div when that width isn't needed. Also,the title and legend sometimes are hidden with this solution (depending on how long the scroll is).
So, is there a better way to make angular.chart.js
play nice with horizontal scroll?