JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart"></div>
<button id="btnByMonth">By Month</button>
<button id="btnByWeek">By Week</button>

JavaScript

var formatter;
function updateFormatter(byMonth) {
  formatter = d3.time.format(byMonth ? '%Y-%m' : '%Y-%m-%d')
}

updateFormatter();

var chart = c3.generate({
    data: {
        x: 'date',     
        columns: [
            ['date', '2014-01-01', '2014-01-02', '2014-01-03'],
            ['data1', 100, 200, 300],
        ]
    },
    axis: {
      x: {
        type: 'timeseries',
        tick: {
            format: function (x) { // x comes in as a time string.
              return formatter(x);
            }
        }
      }
    }
});
            
d3.select('#btnByMonth').on('click', function () {
  updateFormatter(true);
  chart.flush();            
});
d3.select('#btnByWeek').on('click', function () {
  updateFormatter(false);
  chart.flush();            
});