title: Why is my Line Chart.JS starting in the middle?
body: <p>I am trying to add some JS chart to my webpage, but somehow the line starts in the middle of the graph. (No matter how many data points there are)</p>
  
  <p>See Below:</p>
  
  <p>There are only 3 data points, but the line starts only at the very end. And only one label shows up even there are 3 data point</p>
  
  <p><a href="https://i.stack.imgur.com/uBub9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uBub9.png" alt="Example"></a></p>
  
  <p>Does anyone have any idea why?  Thanks!</p>
  
  <p>Code: </p>
  
  <blockquote>
  <pre><code> // Line chart
    var ctx = document.getElementById("instance_countChart");
    var instance_countChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [
         "gukumar_skb_regression_03_17_17_23.45",
  
         "gukumar_skb_regression_03_18_17_23.45",
  
         "gukumar_skb_regression_03_19_17_23.45",
                  ],
        datasets: [{
        label: "instance_count",
          backgroundColor: "transparent",
          borderColor: "rgba(38, 185, 154, 0.7)",
          pointBorderColor: "rgba(38, 185, 154, 0.7)",
          pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
          pointHoverBorderColor: "rgba(220,220,220,1)",
          pointBorderWidth: 1,
        //backgroundColor: "#26B99A",
        data: [  7409085.0,  7409085.0,  7409041.0,
      ]
      }]
      },
  
  
    });
  </code></pre>
  </blockquote>
  
  <p>How I am calling it:</p>
  
  <pre><code>    &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
            &lt;div class="x_panel"&gt;
              &lt;div class="x_title"&gt;
                &lt;h2&gt;instancecount &lt;/h2&gt;
                &lt;ul class="nav navbar-right panel_toolbox"&gt;
                  &lt;li&gt;&lt;a class="collapse-link"&gt;&lt;i class="fa fa-chevron-up"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;&lt;i class="fa fa-wrench"&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;ul class="dropdown-menu" role="menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Settings 1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Settings 2&lt;/a&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a class="close-link"&gt;&lt;i class="fa fa-close"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
                &lt;div class="clearfix"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="x_content"&gt;
                &lt;canvas id="instance_countChart" width="400" height="200"&gt;&lt;/canvas&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>