c3js - change the initial date label in x-axis

Question

c3js - change the initial date label in x-axis

3.7k Views Asked by dayuloli At 12 June 2025 at 17:14

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.

Original Q&A

There are 1 best solutions below

**dayuloli** · Accepted Answer

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

There are 1 best solutions below

Related Questions in D3.JS

Related Questions in JAVASCRIPT

Related Questions in C3.JS

Trending Questions

Popular # Hahtags

Popular Questions