C3: Origin is not correctly positioned

Created on 28 Aug 2014 · 4Comments · Source: c3js/c3

While viewing http://c3js.org/ and http://c3js.org/gettingstarted.html I've noticed that the axis origins (i.e. zero points) are incorrectly positioned - they should surely be at the actual crossing of the axes by default, i.e. unless otherwise specified?

example

question

Source

MarcusJT

👍1

Most helpful comment

By setting axis padding and chart range, you achieve this.

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
            data1: 'y',
            data2: 'y2'
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0
        }
    }
});

JS Fiddle: http://jsfiddle.net/santazhang/gswhaLu0/1/

santazhang on 30 Aug 2014

👍2

All 4 comments

By setting axis padding and chart range, you achieve this.

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
            data1: 'y',
            data2: 'y2'
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0
        }
    }
});

JS Fiddle: http://jsfiddle.net/santazhang/gswhaLu0/1/

santazhang on 30 Aug 2014

👍2

Thanks, that partially solves the problem, but...

In the JSFiddle you so kindly provided the first data point appears partially obscured by the Y axis, which isn't right - it should be drawn on top, not underneath and clipped
When there IS padding (as in my example image) the two lines cross and go over each other, which doesn't make any sense as it is not the origin... so how can the axes be configured so that the lines stop at the point they touch instead of carrying on over each other?
C3 defaults are very strange/unusual settings, resulting in unorthodox graphs which have features that don't match common / real-world graphs... why? Why not use the traditional settings I'm asking about, which is what most people will expect?

MarcusJT on 30 Aug 2014

Hi,

c3 does not fix the origin as 0 because the origin is not always 0. I mean if the range of data is 100 to 500, we would want to focus on the range something like 80 to 520.
As you say, it seems natural, but now it's difficult to display the first data point as you write because of the spec of SVG and the way of implementation of c3. However, I think it's acceptable and a kind of trade off. Do you have any idea to fix this?
Sorry I'm not sure what you mean, but if you mean the tick on the bottom and the top of axis, it's d3 way. However, it's possible to hide by using axis.x.tick.outer = false and axis.y.tick.outer = false if you want.
As you say, the default settings is important. I'll update according to the requests if needed.