Test Fiddle

Test ChartJS

by tbeehoon

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <canvas id="myChart"> </canvas>
    </div>
  </div>
  <br>
  <br>
</div>
<a href="http://www.mas.gov.sg/"> Data Source:'Monetary Authority of Singapore' </a>
<p>
  Note: Figures refer to average rates compiled from that quoted by 10 leading Singapore banks and finance companies.
</p>

CSS

.container {
  width: 520px;
  height: 280px;
  border: 1px solid #ddd;
  margin: 10px 10px 10px 20px;
  padding: 10px 20px 10px 30px;
  border-radius: 10px;
}

p,
a {
  font-size: 12px;
  margin: 0px 0px 0px 20px;
}

JavaScript

var ctx = $("#myChart");

var newChart = new Chart(ctx, {
  type: "line",

  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],

    datasets: [{
      label: "2014",
      data: [2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93],
      backgroundColor: "green",
      lineTension: 0.5,
      borderColor: "green",
      borderWidth: 1,
      borderDash: [10, 2, 5, 2],
      pointRadius: 2,
      pointHoverRadius: 5,
      pointBackgroundColor: "black",
      pointBorderColor: "black",
      pointHoverBackgroundColor: "yellow",
      pointHoverBorderColor: "green",
      pointBorderWidth: 1,
      pointStyle: "triangle",
      showLine: true,
      spanGaps: true,
      steppedLine: false,
      fill: false
    }, {
      label: "2015",
      data: [2.93, 3.01, 3.01, 3.1, 3.1, 3.1, 3.1, 3.1, 3.1, 3.1, 3.1, 3.22],
      backgroundColor: "blue",
      borderColor: "blue",
      borderWidth: 1,
      lineTension: 0.5,
      borderDash: [5,2],
      pointRadius: 2,
      pointHoverRadius: 5,
      pointBackgroundColor: "black",
      pointBorderColor: "black",
      pointHoverBackgroundColor: "green",
      pointHoverBorderColor: "yellow",
      pointBorderWidth: 1,
      pointStyle: "circle",
      showLine: true,
      steppedLine: false,
      fill: false
    }, {
      label: "2016",
      data: [3.22, 3.39, 3.39, 3.39, 3.39, 3.41, 3.41, 3.41, 3.41, 3.41, 3.41, 3.41],
      backgroundColor: "indigo",
      borderColor: "indigo",
      borderWidth: 1,
      lineTension: 0.5,
      borderDash: [],
      pointRadius: 2,
      pointHoverRadius: 5,
      pointBackgroundColor: "black",
      pointBorderColor: "black",
      pointHoverBackgroundColor: "green",
      pointHoverBorderColor: "yellow",
      pointBorderWidth: 1,
      pointStyle: "circle",
      showLine: true,
      steppedLine: false,
      fill: false
    }]
  },

  options: {
    responsive: true,
    maintainAspectRatio: true,
 ...