chart.js stack

chart.js stack no custom

by oktaviardi pratama

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="bar-chart" width="600" height="350"></canvas>

SCSS

#chartjs-tooltip {
  display: inline-block;
  color: #fff;
  table {
    background-color: #000;
  }
  span {
    display:block;
  }
  button,a {
    width: 100%;
    display:block;
  }
}

JavaScript

var sample = {
  "content": {
    label: [1594012703, 1594012704, 1594012705],
    data: [
    {
    	name: '1 star',
      value: [40, 47, 44]
    },
     {
    	name: '2 star',
      value: [40, 47, 44]
    },
     {
    	name: '3 star',
      value: [40, 47, 44]
    },
     {
    	name: '4 star',
      value: [40, 47, 44]
    },
     {
    	name: '5 star',
      value: [40, 47, 44]
    },
    ]
  },
  "message": "Success",
  "code": 200
}
 var canvasP = document.getElementById("bar-chart");
 // Return with commas in between
  var numberWithCommas = function(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

var dataPack1 = [40, 47, 44, 38, 27, 31, 25, 40, 47, 44, 38, 27, 31, 25, 40, 47, 44, 38, 27, 31, 25, 40, 47, 44, 38, 27, 40, 47, 44, 38, 27];
var dataPack2 = [10, 12, 7, 5, 4, 6, 8, 10, 12, 7, 5, 4, 6, 8, 10, 12, 7, 5, 4, 6, 8, 10, 12, 7, 5, 4, 10, 12, 7, 5, 4];
var dataPack3 = [17, 11, 22, 18, 12, 7, 5, 17, 11, 22, 18, 12, 7, 5, 17, 11, 22, 18, 12, 7, 5, 17, 11, 22, 18, 12, 17, 11, 22, 18, 12];
var dates = ["SN 1.0.1", "SN 1.0.2", "SN 1.0.3", "SN 1.0.4", "SN 1.0.5", "SN 2.0.0", "SN 2.0.1", "SN 2.0.2", "SN 2.0.3", "SN 2.0.4", "SN 2.0.5", "SN 3.0.1", "SN 3.0.2", "SN 3.0.3", "SN 3.0.4", "SN 3.0.5", "SN 4.0.1", "SN 4.0.2", "SN 4.0.3", "SN 4.0.4", "SN 4.0.5", "SN 5.0.1", "SN 5.0.2", "SN 5.0.3", "SN 5.0.4", "SN 5.0.5", "SN 5.0.1", "SN 5.0.2", "SN 5.0.3", "SN 5.0.4", "SN 5.0.5"];

/* var dataPack1 = [40, 47, 44, 38, 27];
var dataPack2 = [10, 12, 7, 5, 4, 6];
var dataPack3 = [17, 11, 22, 18, 12];
var dates = ["SN 1.0.1", "SN 1.0.2", "SN 1.0.3", "SN 1.0.4", "SN 1.0.5"];
 */
// Chart.defaults.global.elements.rectangle.backgroundColor = '#FF0000';

var bar_ctx = document.getElementById('bar-chart');
var bar_chart = new Chart(bar_ctx, {
    type: 'bar',
    data: {
        labels: dates,
        datasets: [
        {
            label: 'Bad Style',
            data: dataPack1,
						backgroundColor: "#512DA8",
						hoverBackgroundColor:...