Highcharts Demo

author(s): Torstein Hønsi

by Sascha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: "heatmap",
    style: { fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif" }
  },
  credits: { enabled: false },
  exporting: { enabled: false },
  title: { text: null, align: "left", style: { fontSize: "16px" } },
  boost: { useGPUTranslations: false },
  plotOptions: {
    series: {
      fillOpacity: 0.4,
      label: { style: { fontWeight: "normal" } },
      dataLabels: { style: { fontWeight: "bold" } }
    }
  },
  tooltip: {
    useHTML: true,
    headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>'
  },
  legend: { enabled: true },
  series: [
    {
      type: "heatmap",
      data: [
        { x: 1, y: 4, value: 0 },
        { x: 1, y: 10, value: 0 },
        { x: 1, y: 6, value: 0 },
        { x: 1, y: 7, value: 0 },
        { x: 1, y: 12, value: 0 },
        { x: 1, y: 3, value: 0 },
        { x: 1, y: 13, value: 0 },
        { x: 1, y: 2, value: 0 },
        { x: 1, y: 8, value: 0 },
        { x: 1, y: 1, value: 0 },
        { x: 1, y: 5, value: 0 },
        { x: 1, y: 9, value: 0 },
        { x: 1, y: 11, value: 0 },
        { x: 2, y: 3, value: 0 },
        { x: 2, y: 8, value: 0 },
        { x: 2, y: 1, value: 0 },
        { x: 2, y: 2, value: 0 },
        { x: 2, y: 7, value: 0 },
        { x: 2, y: 4, value: 0 },
        { x: 2, y: 9, value: 0 },
        { x: 2, y: 10, value: 0 },
        { x: 2, y: 11, value: 0 },
        { x: 2, y: 12, value: 0 },
        { x: 2, y: 13, value: 0 },
        { x: 2, y: 5, value: 0 },
        { x: 2, y: 6, value: 0 },
        { x: 3, y: 5, value: 0 },
        { x: 3, y: 3, value: 0 },
        { x: 3, y: 12, value: 0 },
        { x: 3, y: 1, value: 0 },
        { x: 3, y: 13, value: 0 },
        { x: 3, y: 4, value: 0 },
        { x: 3, y: 7, value: 0 },
        { x: 3, y: 10, value: 0 },
        { x: 3, y: 8, value: 0 },
        { x: 3, y: 6, value: 0 },
        { x: 3, y: 2, value: 0 },
        { x: 3, y: 9, value: 0 },
        { x: 3,...