5

The chart is pretty good when it is normal. but i expect it to adjust the bar width upon zoom. The graph without zoom is as below.

enter image description here

when I zoom into the graph, the bars width remains same, very thin!

enter image description here

Is there anyway that they auto adjust? I saw a link where the example adjusts the bar width with the zoom. But I don't see anything missing. Here's the example : http://blog.trifork.com/2014/07/29/creating-charts-with-c3-js/

Here's my charting code. Am I missing some setting?

var chart = c3.generate({
    bindto: '#chart',
    data: {
        xFormat: '%m/%d/%y %I:%M %p',
        json: final_data,
        keys: {
            x: 'date',
            value: values
        },
        type: 'bar',
        groups: val
    },
    bar: {
        width: { ratio: 0.9 }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%b %d'
            }
        }
    },
    zoom: {
        enabled: true
    },
    color: {
        pattern: colors
    }
});
Vishal Sharma
  • 2,550
  • 1
  • 23
  • 40
  • You're not missing anything - C3 changed the way zoom was handled between 0.4.9 and 0.4.10. You can see this by changing the version of C3 used in the pen you linked to. [Here's the related github issue](https://github.com/c3js/c3/issues/945) – esvendsen Mar 02 '17 at 19:44
  • having the same issue. For me when i removed timeseries the autoscaling works again, but obviously hi is not what we want. Did you find a solution by now? @Vishal Sharma? – dcts Apr 02 '20 at 13:47

1 Answers1

0

Try removing key value pair "bar". If the problem still persists, try setting axis.x.tick.fit = false

Venkata Sandeep
  • 191
  • 1
  • 12