date label on the X axis

[新井裕]

I want to put the date on the X-axis label, but I get the following error:

Error: <g> attribute transform: Expected number, "translate(NaN, 0)"

Specifically, the following implementation is performed. (If implemented as time-series, an error will occur that it can't be converted to a Date Object.)

var chart = c3.generate({ bindto: '#chart',

data: { x: 'x', columns: [

['x',"2021/01/01", "2021/01/02","2021/01/03","2021/01/04","2021/01/05"], 

 ['sample', 30, 200, 100, 400, 150],

 ['sample2', 50, null, 20, null, 180] ] 

 },

axis: { 

  x: {tick: {values: ["2021/01/01", "2021/01/02","2021/01/03","2021/01/04","2021/01/05"]}},

  y: {label: {position: 'inner-middle'}},

  y2: {show: true, label: {position: 'inner-middle'}} },

  line: { connectNull: true },

zoom: { enabled: true } });

Where is the problem?

[Paul Reimer]

You need to tell it that this is a time series

Paul

var chart = c3.generate({

    data: { 

        x: 'x', 

        columns: [

            ['x',"2021-01-01", "2021-01-02","2021-01-03","2021-01-04","2021-01-05"], 

            ['sample', 30, 200, 100, 400, 150],    

            ['sample2', 50, null, 20, null, 180] ] 

        },

    axis: { 

    x: {

        type : 'timeseries',

        tick: {

            values: ["2021-01-01", "2021-01-02","2021-01-03","2021-01-04","2021-01-05"]

            }

        },

    y: {

        label: {

            position: 'inner-middle'

            }

        },

    y2: {show: true, label: {position: 'inner-middle'}} },

    line: { connectNull: true },

    zoom: { enabled: true } 

    

});