score:1

Accepted answer

You could solve this by removing the tick values for the x axis and replacing them by format (you already define the date within the x data):

axis: {
      x: {
           type: 'timeseries',
           tick: {
              format: '%Y-%m-%d'
           }
       }
}

Please have a look at the executable snippet below. I have added a Timeout function for demonstration.

var chart = c3.generate({
      bindto: "#root",
      data: {
        x: "x",
        columns: [
          ["x", "2013-01-10"],
          ["sample", 30]
        ]
      },
      axis: {
        x: {
          type: "timeseries",
          tick: {
            format: "%Y-%m-%d"
          }
        }
      }
    });
    
   setTimeout(function () {
        chart.load({
        columns: [
            ['x', '2015-01-09', '2015-01-10', '2015-01-11'],
            ['sample', 20, 30, 45],
        ],
        duration: 50,
    });
}, 3500);
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
  <div root>
    <div rootRoot id="root" style="width: 95%; height: 200px"></div>
    <div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>

If you already want to display all the times as ticks on the x axis at the beginning when only one data point is present, you could add "null" to the data string:

data: {
    x: 'x',
    columns: [
        ['x', '2013-01-05', '2013-01-10', '2013-01-11', '2013-01-12'],
        ['sample', null, 30, null, null]
    ]
}

Below the executable snippet:

var chart = c3.generate({
      bindto: "#root",
      data: {
        x: "x",
        columns: [
          ['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
          ['sample', null, 30, null, null]
        ]
      },
      axis: {
        x: {
          type: "timeseries",
          tick: {
            format: "%Y-%m-%d"
          }
        }
      }
    });
    
   setTimeout(function () {
        chart.load({
        columns: [
            ['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
            ['sample', 20, 30, 15, 25],
        ],
        duration: 50,
    });
}, 3500);
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
  <div root>
    <div rootRoot id="root" style="width: 95%; height: 200px"></div>
    <div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>


Related Query

More Query from same tag