(I'm specifically using c3.js, but I also added d3.js tags)
I have been working on creating a graph that displays data for each month based on user clicks. However, I am facing an issue where the x-axis labels show 0-X instead of 1-X.
For instance, when selecting February, it shows 0 - 27 instead of 1-28.
https://i.stack.imgur.com/5Eklg.png
The code for this graph is as follows:
var chart = c3.generate({
bindto: '#graph',
data: {
columns: [
daysArray
],
type: 'bar'
},
bar: {
width: {
ratio: 1
}
}
});
It's quite simple...the 'daysArray' consists of the data (including 0s for days without any data). It contains a label ('Expenses') and has 28 values.
I attempted to solve this by adding the following code:
var chart = c3.generate({
bindto: '#graph',
data: {
columns: [
daysArray
],
type: 'bar'
},
/*==========ADDED THIS SECTION=========*/
axis: {
x:{
tick: {
values: monthLengthArray,
}
}
},
/*======================================*/
bar: {
width: {
ratio: 1
}
}
});
This code utilizes the 'monthLengthArray' to populate the days for each respective month. For example, if the user selects February, it contains the values 1-28. Similarly, January contains 1-31. The graph appears as follows:
https://i.stack.imgur.com/dthtY.png
It's essentially the same, but with an empty 0 column. To clarify, in both attempts, the data is correct in terms of 'days', but it's 'shifted' to the right.
I believe a simple fix exists, but articulating this issue has proven to be challenging (I couldn't find an answer prior to posting despite searching).
One important note to consider is that I am not using a 'timeseries' for the x-axis. Instead, I'm utilizing the default option (which I think is 'indexed'). While I suspect indexing plays a role here, I don't know how to instruct the system to start the index at 1 instead of 0!
Thank you!