bahan pelajaran

--HTML--
 BACA INI http://www.chartjs.org/docs/latest/charts/bar.html
ikuti step yg ada
<div class="panel-wrapper collapse in">
  <div class="my-chart">
    <canvas id="chart_2" height="200"></canvas>
  </div>
</div>

--JAVASCRIPT--
$(document).ready(function() {
  "use strict";
  if ($('#chart_2').length > 0) {
    var ctx2 = document.getElementById("chart_2").getContext("2d");
    var data2 = {
      labels: ["January", "February", "March", "April", "May", "June", "July"], //labelnya ganti aja
      datasets: [{
          label: "My First dataset", //sumber datanya (1)
          backgroundColor: "rgba(240,197,65,.6)", //ganti warnanya kl sempat
          borderColor: "rgba(240,197,65,.6)",
          data: [10, 30, 80, 61, 26, 75, 40] //nilai data.. dimulai dari jan - juli
        },
        {
          label: "My Second dataset", //sumber datanya (2)
          backgroundColor: "rgba(46,205,153,.6)",
          borderColor: "rgba(46,205,153,.6)",
          data: [28, 48, 40, 19, 86, 27, 90]
        }
      ]
    };

    var hBar = new Chart(ctx2, {
      type: "bar", //ada pilihan lain.. coba yg ini dulu
      data: data2, //sumber data dari atas

      options: {
        tooltips: {
          mode: "label"
        },
        scales: {
          yAxes: [{
            stacked: true,
            gridLines: {
              color: "rgba(135,135,135,0)",
            },
            ticks: {
              fontFamily: "Poppins",
              fontColor: "#878787"
            }
          }],
          xAxes: [{
            stacked: true,
            gridLines: {
              color: "rgba(135,135,135,0)",
            },
            ticks: {
              fontFamily: "Poppins",
              fontColor: "#878787"
            }
          }],

        },
        elements: {
          point: {
            hitRadius: 40
          }
        },
        animation: {
          duration: 3000
        },
        responsive: true,
        legend: {
          display: false,
        },
        tooltip: {
          backgroundColor: 'rgba(33,33,33,1)',
          cornerRadius: 0,
          footerFontFamily: "'Poppins'"
        }

      }
    });
  }
});
--CSS--
.my-chart {
  width: 500px;
  height: 500px;
  margin-top: 40px;
}

body{
  background:black;
}
--URL--
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js