Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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:

  1. I'm not sure if I have access to the underlying chart element in the way the user does here with angular-chart.js
  2. I can't even get access to onAnimationComplete in angular-chart.js.
  3. 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?

share|improve this question

This question has an open bounty worth +50 reputation from Rolando ending in 17 hours.

The question is widely applicable to a large audience. A detailed canonical answer is required to address all the concerns.

1  
Would be easier to help if there's some fiddle/plnkr available.. – tanmay Feb 24 at 9:59
    

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.