JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="myLineChart"></div>

CSS

/*-- Chart --*/

.c3 svg {
  font: 10px sans-serif;
}

.c3 path,
.c3 line {
  fill: none;
  stroke: #000;
}

.c3 text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
  shape-rendering: crispEdges;
}

.c3-chart-arc path {
  stroke: #fff;
}

.c3-chart-arc text {
  fill: #fff;
  font-size: 13px;
}

/*-- Axis --*/

.c3-axis-x .tick {}

.c3-axis-x-label {
  color: red;
}

.c3-axis-y .tick {}

.c3-axis-y-label {}

.c3-axis-y2 .tick {}

.c3-axis-y2-label {}

/*-- Grid --*/

.c3-grid line {
  stroke: #aaa;
}

.c3-grid text {
  fill: #aaa;
}

.c3-xgrid,
.c3-ygrid {
  stroke-dasharray: 3 3;
}

.c3-xgrid-focus {}

/*-- Text on Chart --*/

.c3-text {}

.c3-text.c3-empty {
  fill: #808080;
  font-size: 2em;
}

/*-- Line --*/

.c3-line {
  stroke-width: 1px;
}

/*-- Point --*/

.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: white;
}

.c3-selected-circle {
  fill: white;
  stroke-width: 2px;
}

/*-- Bar --*/

.c3-bar {
  stroke-width: 0;
}

.c3-bar._expanded_ {
  fill-opacity: 0.75;
}

/*-- Arc --*/

.c3-chart-arcs-title {
  font-size: 1.3em;
}

/*-- Focus --*/

.c3-target.c3-focused {
  opacity: 1;
}

.c3-target.c3-focused path.c3-line,
.c3-target.c3-focused path.c3-step {
  stroke-width: 2px;
}

.c3-target.c3-defocused {
  opacity: 0.3 !important;
}

/*-- Region --*/

.c3-region {
  fill: steelblue;
  fill-opacity: .1;
}

/*-- Brush --*/

.c3-brush .extent {
  fill-opacity: .1;
}

/*-- Select - Drag --*/

.c3-dragarea {}

/*-- Legend --*/

.c3-legend-item {
  font-size: 12px;
}

.c3-legend-item-hidden {
  opacity: 0.15;
}

.c3-legend-background {
  opacity: 0.75;
  fill: white;
  stroke: lightgray;
  stroke-width: 1
}

/*-- Tooltip --*/

.c3-tooltip-container {
  z-index: 10;
}

.c3-tooltip {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  -webkit-box-shadow: 7px 7px 12px -9px rgb(119, 119, 119);
 ...

JavaScript

'use strict';

// constants
const X_AXIS = 'timestamp';
const INCOMING_TIME_FORMAT = '%s';

// axis setting
var xMin = '20180101';
var xMax = '20180420';
var yMin = 0;

var xAxisSetting = {
  type: 'timeseries',
  tick: {
    fit: true,
    format: "%Y-%m-%d",
    count: 8,
    rotate: 45
  },
  label: {
    text: 'Date',
    position: 'outer-center'
  },
  //min: xMin,
  //max: xMax,
  padding: {
    left: 0,
    right: 0
  },
  height: 70
};

var yAxisSetting = {
  label: {
    text: 'Currency Value',
    position: 'outer-middle'
  },
  min: yMin,
  padding: {
    bottom: 0,
    top: 50
  }
};

// legend setting
var legendSetting = {
  show: true,
  position: 'inset',
  inset: {
    anchor: 'top-right',
    x: 10,
    y: -10,
    step: 1
  }
};

// grid setting
var gridSetting = {
  x: {
    show: true
  },
  y: {
    show: true
  }
};


function drawLineChartWithJsonData(divId, jsonData, keysData) {

  var chart = c3.generate({
    bindto: divId,
    data: {
      type: 'spline',
      x: X_AXIS,
      xFormat: INCOMING_TIME_FORMAT,
      json: jsonData,
      keys: keysData
    },
    axis: {
      x: xAxisSetting,
      y: yAxisSetting
    },
    legend: legendSetting,
    grid: gridSetting,
    padding: {
      right: 10
    }
  });
}

/* var jsonData = [{
  timestamp: 1516586421000,
  JPY: 30,
  USD: 130
}, {
  timestamp: 1519264821000,
  JPY: 200,
  USD: 340
}, {
  timestamp: 1521684021000,
  JPY: 100,
  USD: 200
}, {
  timestamp: 1524362421000,
  JPY: 400,
  USD: 500
}]; */

var jsonData = [{
  timestamp: 1516586421,
  JPY: 30,
  USD: 130
}, {
  timestamp: 1519264821,
  JPY: 200,
  USD: 340
}, {
  timestamp: 1521684021,
  JPY: 100,
  USD: 200
}, {
  timestamp: 1524362421,
  JPY: 400,
  USD: 500
}];

var keysData = {
  x: X_AXIS,
  value: ['JPY', 'USD']
};


drawLineChartWithJsonData('#myLineChart', jsonData, keysData);