CODEWITHSUNDEEP
javascripthtmld3.jsc3.js
Michael MacDonald
Michael MacDonald

Reputation: 433

c3 js -> I need to shift/ change my x-axis labels

(I'm using c3.js specifically, but it's a d3.js library, so I added both tags)

I am trying to make a graph that shows data for a 'month' based on the month a user clicks. The issue I am having is that the x-axis labels are showing 0-X instead of 1-X.

So for example February shows 0 - 27 instead of 1-28.

an example showing February

The code for this graph looks like this:

var chart = c3.generate({
    bindto: '#graph',
    data: {
        columns: [
            daysArray
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 1
        }
    }
});

Extremely simple... the 'daysArray' is the data (with 0's for the days where there isn't any) It contains a label ('Expenses') and 28 values.

I tried adding this bit of code:

var chart = c3.generate({
    bindto: '#graph',
    data: {
        columns: [
            daysArray
        ],
        type: 'bar'
    },
    /*==========ADDED THIS SECTION=========*/
    axis: {
        x:{
            tick: {
                values: monthLengthArray,
            }
        }
    },
    /*======================================*/
    bar: {
        width: {
            ratio: 1
        }
    }
});

Which uses the 'monthLengthArray' to put in the days for each month. ie. if the user clicks Feb. it contains the values 1 - 28... Jan. contains 1-31... etc. and it looks like this:

an example showing February with added code

Basically the same, but with a blank 0 column. To clarify, for both attempts the data is on the correct 'days' but 'shifted' to the right..

I'm sure it's a simple fix, but wording this question is quite difficult (I had no luck finding an answer on here before posting, but I did look)

Also something to note: I'm not using a 'timeseries' for the x-axis. I'm using the default (which I believe is 'indexed'). I'm sure that indexing has something to do with it, but I'm not sure how to tell it to start the index at 1 instead of 0!

Thank you!

Upvotes: 3

Views: 1536

Answers (1)

mgraham
mgraham

Reputation: 6207

If the problem is just shifting the values of the labels up by one try this segment in your setup:

axis: { 
   x: {
        tick: {
            format: function (x) { return x+1; }
        }
    }
}

Upvotes: 4

Related Questions