c3js - change the initial date label in x-axis

Question

I have a c3js line graph of type timeseries.

My axis tables are currently like this:

Showing the x-axis 11/10.....05/11.....11/11.....05/12.....11/12.....05/13.....11/13

and it want it to be

.12/10.....06/11.....12/11.....06/12.....12/12.....06/13.....

where each dot indicates a month, note that the datapoint at 11/10 is still kept and displayed, only the axis labelling has changed. FYI, The increment is not set directly but hacked using culling.

Is there any way to alter the starting label to 12/10 (with all subsequent labels increasing in 6-months intervals)?

UPDATE (14NOV14): I have added a working jsFiddle for you to tinker with. Any help is appreciated! UPDATE (14NOV14): I have tried using functions for this. But I want the 'pop-up' box to show the grey heading all the time.

can you put a plunkr together to understand what you are doing better? — Sebastian Piu
@Sebastian Plu - I'm trying to make one...but not so much luck - plnkr.co/edit/yASPgG76uA7WDsZz2Au4?p=preview and jsfiddle.net/ew9kpx3r — dayuloli
@Sebastian Plu - If you look at c3js.org/samples/timeseries.html, the equivalent to what I want is for the x-axis to only start labelling the axis at '2013-01-02', and have a label every 2 days. So it will miss out '2013-01-01', '2013-01-03'... even though the data point is still there. — dayuloli
@anoop Culling isn't a hack I want to follow, since if the client adds a different/new date I'm minced meat. Please see my latest jsFiddle (in the update). Thanks for your interest and help! — dayuloli

dayuloli dayuloli · Accepted Answer · 2014-11-14T03:07:43

This was a painfully long learning process, for a very badly-documented library. But I had to use a function for the format option for the tick, and then format the title again for the tooltip. Here's the final, working copy.

HTML (Include the d3.js, c3.js, and c3.css scripts too)

<body>
    <div id="chartContainer"></div>
</body>

JS

var chart = c3.generate({
  bindto: '#chartContainer',
    data: {
        x: 'x',
        columns: [
            ['x', '2013-04-01', '2013-05-02', '2013-06-03', '2013-07-04', '2013-08-05', '2013-09-06'],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 340, 200, 500, 250, 350]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if((x.getMonth()+1) % 6 === 0) {
                        return ('0' + (x.getMonth()+1)).slice(-2) + '/' + x.getFullYear().toString().substr(2,2);
                    }
                }
            }
        }
    },
    tooltip: {
        format: {
            title: function (d) {
                var format = d3.time.format('%m/%y');
                return format(d)
            }
        }
    }
});

N.B. Also be aware that culling might interfere with this. I had to set culling: {max: 100} to ensure any built in incrementations are not applied.

c3js - change the initial date label in x-axis

1 Answers