chart.js problem

chart.js problem

HTML

<title>chart.js problem</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.css">


<div class="chart-container" id="chart-container" style="position: relative; width:100%">
  <canvas id="chart" width="auto" height="auto"></canvas> 
</div>

JavaScript

var data = {
  "data": {
    "datasets": [
      {
        "borderColor": "rgba(74,118,12,1.000)",
        "data": [
          {
            "x": "2018-01-06",
            "y": 0.242
          },
          {
            "x": "2018-01-07",
            "y": 0.197
          },
          {
            "x": "2018-01-08",
            "y": 0.15
          },
          {
            "x": "2018-01-09",
            "y": 0.15
          },
          {
            "x": "2018-01-10",
            "y": 0.15
          },
          {
            "x": "2018-01-11",
            "y": 0.137
          },
          {
            "x": "2018-01-12",
            "y": 0.11
          },
          {
            "x": "2018-01-13",
            "y": 0.11
          },
          {
            "x": "2018-01-14",
            "y": 0.21
          },
          {
            "x": "2018-01-15",
            "y": 0.273
          },
          {
            "x": "2018-01-16",
            "y": 0.3
          },
          {
            "x": "2018-01-17",
            "y": 0.237
          }
        ],
        "label": "onlydoe",
        "fill": false,
        "pointRadius": 5
      }
    ],
    "labels": [
      "2018-01-05",
      "2018-01-06",
      "2018-01-07",
      "2018-01-08",
      "2018-01-09",
      "2018-01-10",
      "2018-01-11",
      "2018-01-12",
      "2018-01-13",
      "2018-01-14",
      "2018-01-15",
      "2018-01-16",
      "2018-01-17"
    ]
  },
  "options": {
    "hover": {
      "mode": "x"
    }
  },
  "type": "line"
}
new Chart(document.getElementById("chart"), data)