Heat Map with Size Design

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/032M87IL

<!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>
  <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',
      globals: {
        bold: true,
        fontFamily: 'arial'
      },
      align: 'left',
      backgroundColor: '#fff',
      title: {
        text: 'WEB ANALYTICS',
        marginTop: '25px',
        backgroundColor: 'none',
        fontColor: '#6699CC',
        fontSize: '30px',
        fontWeight: 'normal',
        textAlign: 'left',
        x: '70px'
      },
      plot: {
        aspect: 'size',
        borderRadius: '10px'
      },
      plotarea: {
        margin: '20% 10% 15% 10%',
        backgroundColor: '#FBFBFB'
      },
      scaleX: {
        values: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        item: {
          fontColor: '#6699CC'
        },
        label: {
          text: '2018',
          fontColor: '#6699CC',
          fontSize: '18px'
        },
        lineColor: '#6699CC',
        tick: {
          lineColor: '#6699CC'
        }
      },
      scaleY: {
        values: ['Visitors', 'Clicks', 'Goals', 'Scrolls'],
        item: {
          fontColor: '#6699CC',
          tick: {
            lineColor: '#6699CC'
          }
        },
        lineColor: '#6699CC'
      },
      tooltip: {
        borderRadius: '10px',
        shadow: false
      },
      series: [{
          text: 'Visitors',
          values: [25707, 26524, 26372, 25273, 23980, 25652, 26943, 26367, 28325, 29657, 30101, 28541],
          backgroundColor: '#ff4e00',
          thousandsSeparator: ','
        },
        {
          text: 'Clicks',
          values: [6944, 6747, 7020, 6987, 6772, 6600, 6897, 7062, 7049, 7034, 6912, 7090],
          backgroundColor: '#a8a8a8',
          thousandsSeparator: ','
        },
        {
          text: 'Goals',
          values: [445, 423, 392, 399, 399, 369, 393, 377, 383, 420, 418, 397],
          backgroundColor: '#1a87d5',
          thousandsSeparator: ','
        },
        {
          text: 'Scrolls',
          values: [1600, 1523, 1561, 1578, 1661, 1688, 1613, 1658, 1600, 1665, 1580, 1488],
          backgroundColor: '#7eac10',
          thousandsSeparator: ','
        }
      ]
    };

    // 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',
  globals: {
    bold: true,
    fontFamily: 'arial'
  },
  align: 'left',
  backgroundColor: '#fff',
  title: {
    text: 'WEB ANALYTICS',
    marginTop: '25px',
    backgroundColor: 'none',
    fontColor: '#6699CC',
    fontSize: '30px',
    fontWeight: 'normal',
    textAlign: 'left',
    x: '70px'
  },
  plot: {
    aspect: 'size',
    borderRadius: '10px'
  },
  plotarea: {
    margin: '20% 10% 15% 10%',
    backgroundColor: '#FBFBFB'
  },
  scaleX: {
    values: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    item: {
      fontColor: '#6699CC'
    },
    label: {
      text: '2018',
      fontColor: '#6699CC',
      fontSize: '18px'
    },
    lineColor: '#6699CC',
    tick: {
      lineColor: '#6699CC'
    }
  },
  scaleY: {
    values: ['Visitors', 'Clicks', 'Goals', 'Scrolls'],
    item: {
      fontColor: '#6699CC',
      tick: {
        lineColor: '#6699CC'
      }
    },
    lineColor: '#6699CC'
  },
  tooltip: {
    borderRadius: '10px',
    shadow: false
  },
  series: [
    {
      text: 'Visitors',
      values: [25707, 26524, 26372, 25273, 23980, 25652, 26943, 26367, 28325, 29657, 30101, 28541],
      backgroundColor: '#ff4e00',
      thousandsSeparator: ','
    },
    {
      text: 'Clicks',
      values: [6944, 6747, 7020, 6987, 6772, 6600, 6897, 7062, 7049, 7034, 6912, 7090],
      backgroundColor: '#a8a8a8',
      thousandsSeparator: ','
    },
    {
      text: 'Goals',
      values: [445, 423, 392, 399, 399, 369, 393, 377, 383, 420, 418, 397],
      backgroundColor: '#1a87d5',
      thousandsSeparator: ','
    },
    {
      text: 'Scrolls',
      values: [1600, 1523, 1561, 1578, 1661, 1688, 1613, 1658, 1600, 1665, 1580, 1488],
      backgroundColor: '#7eac10',
      thousandsSeparator: ','
    }
  ]
};

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

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

.zc-ref {
  display: none;
}

Surf Heat Map 212/267 Grid Pareto Chart with Multiple Axes

Heat Map with Size Design

Related Documentation: