Heat Map with Color Rules and Tooltips

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/817AGGQP

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'piano',
      backgroundColor: '#325598 #10203a',
      fillType: 'radial',
      plot: {
        tooltip: {
          text: 'Call Volume<br>During %k Hour:<br><b>%v</b>',
          padding: '5px 10px',
          borderColor: 'none',
          borderRadius: '8px',
          borderWidth: '0px',
          fontColor: '#fff',
          fontFamily: 'Arial',
          fontSize: '10px',
          fontWeight: 'normal',
          shadow: false,
        },
        valueBox: {
          visible: false,
        },
        aspect: 'brightness',
        rules: [{
            backgroundColor: '#7000ac',
            rule: '%v < 200',
          },
          {
            backgroundColor: '#3e99cf',
            rule: '%v >= 200 && %v < 375',
          },
          {
            backgroundColor: '#d9dde8',
            rule: '%v >= 375',
          },
        ],
      },
      plotarea: {
        margin: '30px 30px 85px 105px',
        backgroundColor: 'none',
      },
      scaleX: {
        values: [
          '1 AM',
          '2 AM',
          '3 AM',
          '4 AM',
          '5 AM',
          '6 AM',
          '7 AM',
          '8 AM',
          '9 AM',
          '10 AM',
          '11 AM',
          '12 PM',
          '1 PM',
          '2 PM',
          '3 PM',
          '4 PM',
          '5 PM',
          '6 PM',
          '7 PM',
          '8 PM',
          '9 PM',
          '10 PM',
          '11 PM',
          '12 AM',
        ],
        alpha: 0.5,
        guide: {
          visible: false,
        },
        item: {
          paddingTop: '5px',
          fontAngle: -90,
          fontColor: '#93abc9',
          fontFamily: 'arial',
          fontSize: '10px',
          rules: [{
            rule: '%i %2 != 0',
            visible: false,
          }, ],
        },
        itemsOverlap: true,
        label: {
          text: 'Local Time for Call Center Region',
          paddingTop: '15px',
          bold: true,
          fontColor: '#fff',
          fontFamily: 'arial',
          fontSize: '12px',
        },
        lineColor: '#000',
        lineWidth: '2px',
        maxLabels: 999,
        tick: {
          visible: false,
        },
      },
      scaleY: {
        values: [
          'San Jose:<br>Sales',
          'San Jose:<br>Support',
          'Dallas:<br>Sales',
          'Dallas:<br>Support',
          'Raleigh:<br>Sales',
          'Raleigh:<br>Support',
        ],
        alpha: 0.5,
        guide: {
          visible: false
        },
        item: {
          paddingRight: '5px',
          fontColor: '#93abc9',
          fontFamily: 'arial',
          fontSize: '10px',
          textAlign: 'right',
        },
        label: {
          text: 'Call Center Location',
          paddingRight: '20px',
          bold: true,
          fontColor: '#fff',
          fontFamily: 'arial',
          fontSize: '12px',
        },
        lineColor: '#000',
        lineWidth: '2px',
        tick: {
          alpha: 0.5,
          lineColor: '#000',
        },
      },
      series: [{
          text: 'San Jose: Sales',
          values: [
            106, 122, 203, 245, 261, 202, 309, 410, 451, 304, 203, 425, 191, 206,
            263, 284, 251, 382, 391, 405, 321, 298, 302, 194,
          ],
        },
        {
          text: 'Dallas: Sales',
          values: [
            175, 205, 283, 304, 291, 258, 311, 406, 125, 206, 307, 254, 281, 352,
            395, 461, 201, 302, 153, 94, 101, 201, 143, 124,
          ],
        },
        {
          text: 'Raleigh: Sales',
          values: [
            101, 108, 93, 84, 71, 122, 253, 194, 201, 92, 143, 104, 221, 242, 263,
            304, 178, 222, 243, 184, 101, 92, 83, 64,
          ],
        },
        {
          text: 'San Jose: Support',
          values: [
            301, 402, 433, 294, 406, 382, 325, 407, 198, 208, 298, 498, 401, 452,
            397, 485, 508, 594, 493, 454, 321, 382, 403, 204,
          ],
        },
        {
          text: 'Dallas: Support',
          values: [
            211, 208, 175, 406, 199, 207, 253, 264, 301, 295, 303, 284, 107, 182,
            193, 204, 171, 250, 93, 94, 106, 142, 153, 204,
          ],
        },
        {
          text: 'Raleigh: Support',
          values: [
            201, 245, 153, 174, 201, 172, 309, 402, 401, 392, 303, 244, 254, 292,
            103, 144, 201, 192, 175, 254, 311, 252, 193, 144,
          ],
        },
      ],
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
    });
  </script>
</body>

</html>

<!doctype html>
<html class="zc-html">
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  
  <body class="zc-body">
  
    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    
  </body>
</html>

// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'piano',
  backgroundColor: '#325598 #10203a',
  fillType: 'radial',
  plot: {
    tooltip: {
      text: 'Call Volume<br>During %k Hour:<br><b>%v</b>',
      padding: '5px 10px',
      borderColor: 'none',
      borderRadius: '8px',
      borderWidth: '0px',
      fontColor: '#fff',
      fontFamily: 'Arial',
      fontSize: '10px',
      fontWeight: 'normal',
      shadow: false,
    },
    valueBox: {
      visible: false,
    },
    aspect: 'brightness',
    rules: [
      {
        backgroundColor: '#7000ac',
        rule: '%v < 200',
      },
      {
        backgroundColor: '#3e99cf',
        rule: '%v >= 200 && %v < 375',
      },
      {
        backgroundColor: '#d9dde8',
        rule: '%v >= 375',
      },
    ],
  },
  plotarea: {
    margin: '30px 30px 85px 105px',
    backgroundColor: 'none',
  },
  scaleX: {
    values: [
      '1 AM',
      '2 AM',
      '3 AM',
      '4 AM',
      '5 AM',
      '6 AM',
      '7 AM',
      '8 AM',
      '9 AM',
      '10 AM',
      '11 AM',
      '12 PM',
      '1 PM',
      '2 PM',
      '3 PM',
      '4 PM',
      '5 PM',
      '6 PM',
      '7 PM',
      '8 PM',
      '9 PM',
      '10 PM',
      '11 PM',
      '12 AM',
    ],
    alpha: 0.5,
    guide: {
      visible: false,
    },
    item: {
      paddingTop: '5px',
      fontAngle: -90,
      fontColor: '#93abc9',
      fontFamily: 'arial',
      fontSize: '10px',
      rules: [
        {
          rule: '%i %2 != 0',
          visible: false,
        },
      ],
    },
    itemsOverlap: true,
    label: {
      text: 'Local Time for Call Center Region',
      paddingTop: '15px',
      bold: true,
      fontColor: '#fff',
      fontFamily: 'arial',
      fontSize: '12px',
    },
    lineColor: '#000',
    lineWidth: '2px',
    maxLabels: 999,
    tick: {
      visible: false,
    },
  },
  scaleY: {
    values: [
      'San Jose:<br>Sales',
      'San Jose:<br>Support',
      'Dallas:<br>Sales',
      'Dallas:<br>Support',
      'Raleigh:<br>Sales',
      'Raleigh:<br>Support',
    ],
    alpha: 0.5,
    guide: { visible: false },
    item: {
      paddingRight: '5px',
      fontColor: '#93abc9',
      fontFamily: 'arial',
      fontSize: '10px',
      textAlign: 'right',
    },
    label: {
      text: 'Call Center Location',
      paddingRight: '20px',
      bold: true,
      fontColor: '#fff',
      fontFamily: 'arial',
      fontSize: '12px',
    },
    lineColor: '#000',
    lineWidth: '2px',
    tick: {
      alpha: 0.5,
      lineColor: '#000',
    },
  },
  series: [
    {
      text: 'San Jose: Sales',
      values: [
        106, 122, 203, 245, 261, 202, 309, 410, 451, 304, 203, 425, 191, 206,
        263, 284, 251, 382, 391, 405, 321, 298, 302, 194,
      ],
    },
    {
      text: 'Dallas: Sales',
      values: [
        175, 205, 283, 304, 291, 258, 311, 406, 125, 206, 307, 254, 281, 352,
        395, 461, 201, 302, 153, 94, 101, 201, 143, 124,
      ],
    },
    {
      text: 'Raleigh: Sales',
      values: [
        101, 108, 93, 84, 71, 122, 253, 194, 201, 92, 143, 104, 221, 242, 263,
        304, 178, 222, 243, 184, 101, 92, 83, 64,
      ],
    },
    {
      text: 'San Jose: Support',
      values: [
        301, 402, 433, 294, 406, 382, 325, 407, 198, 208, 298, 498, 401, 452,
        397, 485, 508, 594, 493, 454, 321, 382, 403, 204,
      ],
    },
    {
      text: 'Dallas: Support',
      values: [
        211, 208, 175, 406, 199, 207, 253, 264, 301, 295, 303, 284, 107, 182,
        193, 204, 171, 250, 93, 94, 106, 142, 153, 204,
      ],
    },
    {
      text: 'Raleigh: Support',
      values: [
        201, 245, 153, 174, 201, 172, 309, 402, 401, 392, 303, 244, 254, 292,
        103, 144, 201, 192, 175, 254, 311, 252, 193, 144,
      ],
    },
  ],
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: 'myChart',
  data: chartConfig,
});

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

Double Ring Chart 223/281 Multi Chart Dashboard with Grid and Word Cloud

Heat Map with Color Rules and Tooltips

Related Documentation: