JSFiddle - React, Tailwind, and code Playground

by Adem GENC

HTML

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

JavaScript

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
  labels: ["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],
  datasets: [{
    label: "PRODUCT_1",
    backgroundColor: "#008000",
    data: [17,33,14,36,26,17,18,24,23,51,30,23]
  }, {
    label: "PRODUCT_2",
    backgroundColor: "#ff00ff",
    data: [10,20,11,7,6,9,3,2,10,8,6,8]
  }, {
    label: "PRODUCT_3",
    backgroundColor: "#800080",
    data: [5,4,4,6,1,2,2,6,4,2,2,3]
  }, {
    label: "PRODUCT_4",
    backgroundColor: "#ff0000",
    data: [2,3,2,3,2,3,1,2,2,4,4,3]
  }, {
    label: "PRODUCT_5",
    backgroundColor: "#800000",
    data: [1,3,3,2,6,4,1,2,1,4,4,3]
  }, {
    label: "PRODUCT_6",
    backgroundColor: "#c0c0c0",
    data: [0,1,0,0,0,3,0,0,0,0,0,0]
  }, {
    label: "PRODUCT_7",
    backgroundColor: "#00ff00",
    data: [0,0,0,0,0,0,0,0,2,0,0,0]
  }
  ]
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
        }
      }]
    }
  }
});