Heatmap using Stacked Column Chart

Heatmap using Stacked Column Chart

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 400px; width: 100%;"></div>

JavaScript

var week = ["Mon", "Tue", "Wed", "Thu", "Fri"], i = 0;
var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  title: {
  	text: "Sales per employee per weekday"
  },
  axisX: {
   	gridThickness: 0,
    lineThickness: 0,
    tickLength: 0
  },
  axisY: {
    gridThickness: 0,
    lineThickness: 0,
    tickLength: 0,
    labelFormatter: function(e) {   
      if(e.value === 10 || e.value / 10 % 2) 
        return week[i++ % 5];
        
      return "";
    }
  },
  data: [{
    type: "stackedColumn100",
    dataPoints: [
      { label: "Brendan Chan", y: 48 },
      { label: "Carla Johnson", y: 85 },
      { label: "Rodrigo Keller", y: 31 },
      { label: "Avery Lang", y: 12 },
      { label: "Maya Ross", y: 87 },
      { label: "Edward Martin", y: 38 },
      { label: "Ricky Bell", y: 71 },
      { label: "Jillian Newton", y: 36 },
      { label: "Mason Figueroa", y: 91 },
      { label: "Dean Ortega", y: 11 },
    ]
  }, {
    type: "stackedColumn100",
    dataPoints: [
      { label: "Brendan Chan", y: 104 },
      { label: "Carla Johnson", y: 91 },
      { label: "Rodrigo Keller", y: 3 },
      { label: "Avery Lang", y: 40 },
      { label: "Maya Ross", y: 35 },
      { label: "Edward Martin", y: 7 },
      { label: "Ricky Bell", y: 124 },
      { label: "Jillian Newton", y: 17 },
      { label: "Mason Figueroa", y: 52 },
      { label: "Dean Ortega", y: 14 },
    ]
  }, {
    type: "stackedColumn100",
    dataPoints: [
      { label: "Brendan Chan", y: 28 },
      { label: "Carla Johnson", y: 97 },
      { label: "Rodrigo Keller", y: 75 },
      { label: "Avery Lang", y: 82 },
      { label: "Maya Ross", y: 10 },
      { label: "Edward Martin", y: 6 },
      { label: "Ricky Bell", y: 124 },
      { label: "Jillian Newton", y: 116 },
      { label: "Mason Figueroa", y: 75 },
      { label: "Dean Ortega", y: 6 },
    ]
  }, {
    type: "stackedColumn100",
    dataPoints: [
      { label: "Brendan Chan", y: 42 },
      { label: "Carla...