Chart.js v2.7.0

Simple yet flexible JavaScript charting for designers & developers. Made by our friends from Charts.js. Please check the full documentation.

<!-- markup -->
<canvas id="chartHours"></canvas>
<!-- javascript init -->
chartColor = "#FFFFFF";

ctx = document.getElementById('chartHours').getContext("2d");

myChart = new Chart(ctx, {
  type: 'line',

  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
    datasets: [{
        borderColor: "#6bd098",
        backgroundColor: "#6bd098",
        pointRadius: 0,
        pointHoverRadius: 0,
        borderWidth: 3,
        data: [300, 310, 316, 322, 330, 326, 333, 345, 338, 354]
      },
      {
        borderColor: "#f17e5d",
        backgroundColor: "#f17e5d",
        pointRadius: 0,
        pointHoverRadius: 0,
        borderWidth: 3,
        data: [320, 340, 365, 360, 370, 385, 390, 384, 408, 420]
      },
      {
        borderColor: "#fcc468",
        backgroundColor: "#fcc468",
        pointRadius: 0,
        pointHoverRadius: 0,
        borderWidth: 3,
        data: [370, 394, 415, 409, 425, 445, 460, 450, 478, 484]
      }
    ]
  },
  options: {
    legend: {
      display: false
    },

    tooltips: {
      enabled: false
    },

    scales: {
      yAxes: [{

        ticks: {
          fontColor: "#9f9f9f",
          beginAtZero: false,
          maxTicksLimit: 5,
          //padding: 20
        },
        gridLines: {
          drawBorder: false,
          zeroLineColor: "#ccc",
          color: 'rgba(255,255,255,0.05)'
        }

      }],

      xAxes: [{
        barPercentage: 1.6,
        gridLines: {
          drawBorder: false,
          color: 'rgba(255,255,255,0.1)',
          zeroLineColor: "transparent",
          display: false,
        },
        ticks: {
          padding: 20,
          fontColor: "#9f9f9f"
        }
      }]
    },
  }
});