Calendar Chart with Multiple Rows

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/L1ETRYTN

<!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>
    @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

    .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"]; // DEFINE DATA
    // -----------------------------
    function getCurrentYear() {
      return new Date().getFullYear();
    };

    let chartData = [
      [`${getCurrentYear()}-01-01`, 3, 'Alex'],
      [`${getCurrentYear()}-01-02`, 12, 'Paige'],
      [`${getCurrentYear()}-01-03`, 3, 'Carrie'],
      [`${getCurrentYear()}-01-04`, 4, 'Derek'],
      [`${getCurrentYear()}-01-05`, 9, 'Alexis'],
      [`${getCurrentYear()}-01-08`, 11, 'Jeff'],
      [`${getCurrentYear()}-01-09`, 5, 'Alex'],
      [`${getCurrentYear()}-01-10`, 5, 'Brian'],
      [`${getCurrentYear()}-01-11`, 9, 'Brian'],
      [`${getCurrentYear()}-01-12`, 9, 'Brian'],
      [`${getCurrentYear()}-01-15`, 9, 'Brian'],
      [`${getCurrentYear()}-01-16`, 4, 'Alex'],
      [`${getCurrentYear()}-01-17`, 6, 'Khoa'],
      [`${getCurrentYear()}-01-18`, 5, 'Brian'],
      [`${getCurrentYear()}-01-19`, 6, 'Tawnya'],
      [`${getCurrentYear()}-01-22`, 2, 'Paige'],
      [`${getCurrentYear()}-01-23`, 5, 'Jeff'],
      [`${getCurrentYear()}-01-24`, 9, 'Alex'],
      [`${getCurrentYear()}-01-25`, 6, 'Brian'],
      [`${getCurrentYear()}-01-26`, 6, 'Carrie'],
      [`${getCurrentYear()}-01-29`, 7, 'Brian'],
      [`${getCurrentYear()}-01-30`, 7, 'Carrie'],
      [`${getCurrentYear()}-01-31`, 12, 'Jeff'],
      [`${getCurrentYear()}-02-01`, 3, 'Carrie'],
      [`${getCurrentYear()}-02-02`, 3, 'Derek'],
      [`${getCurrentYear()}-02-05`, 9, 'Derek'],
      [`${getCurrentYear()}-02-06`, 9, 'Carrie'],
      [`${getCurrentYear()}-02-07`, 9, 'Carrie'],
      [`${getCurrentYear()}-02-08`, 4, 'Brian'],
      [`${getCurrentYear()}-02-09`, 5, 'Brian'],
      [`${getCurrentYear()}-02-12`, 8, 'Derek'],
      [`${getCurrentYear()}-02-13`, 8, 'Derek'],
      [`${getCurrentYear()}-02-14`, 3, 'Carrie'],
      [`${getCurrentYear()}-02-15`, 7, 'Alexis'],
      [`${getCurrentYear()}-02-16`, 5, 'Carrie'],
      [`${getCurrentYear()}-02-19`, 9, 'Carrie'],
      [`${getCurrentYear()}-02-20`, 6, 'Carrie'],
      [`${getCurrentYear()}-02-21`, 5, 'Carrie'],
      [`${getCurrentYear()}-02-22`, 8, 'Jeff'],
      [`${getCurrentYear()}-02-23`, 10, 'Jeff'],
      [`${getCurrentYear()}-02-24`, 4, 'Alex'],
      [`${getCurrentYear()}-02-26`, 5, 'Alex'],
      [`${getCurrentYear()}-02-27`, 9, 'Brian'],
      [`${getCurrentYear()}-02-28`, 9, 'Preston'],
      [`${getCurrentYear()}-03-01`, 3, 'Alex'],
      [`${getCurrentYear()}-03-02`, 3, 'Jeff'],
      [`${getCurrentYear()}-03-05`, 4, 'Jeff'],
      [`${getCurrentYear()}-03-06`, 2, 'Alex'],
      [`${getCurrentYear()}-03-07`, 10, 'Khoa'],
      [`${getCurrentYear()}-03-08`, 9, 'Tawnya'],
      [`${getCurrentYear()}-03-09`, 7, 'Tawnya'],
      [`${getCurrentYear()}-03-12`, 8, 'Jeff'],
      [`${getCurrentYear()}-03-13`, 7, 'Brian'],
      [`${getCurrentYear()}-03-14`, 8, 'Alex'],
      [`${getCurrentYear()}-03-15`, 8, 'Brian'],
      [`${getCurrentYear()}-03-16`, 2, 'Preston'],
      [`${getCurrentYear()}-03-19`, 3, 'Preston'],
      [`${getCurrentYear()}-03-20`, 4, 'Jeff'],
      [`${getCurrentYear()}-03-21`, 5, 'Jeff'],
      [`${getCurrentYear()}-03-22`, 6, 'Jeff'],
      [`${getCurrentYear()}-03-23`, 7, 'Carrie'],
      [`${getCurrentYear()}-03-26`, 8, 'Brian'],
      [`${getCurrentYear()}-03-27`, 8, 'Brian'],
      [`${getCurrentYear()}-03-28`, 9, 'Ian'],
      [`${getCurrentYear()}-03-29`, 7, 'Ian'],
      [`${getCurrentYear()}-03-30`, 9, 'Preston'],
      [`${getCurrentYear()}-04-02`, 7, 'Preston'],
      [`${getCurrentYear()}-04-03`, 5, 'Ian'],
      [`${getCurrentYear()}-04-04`, 6, 'Preston'],
      [`${getCurrentYear()}-04-05`, 9, 'Brian'],
      [`${getCurrentYear()}-04-06`, 4, 'Tawnya'],
      [`${getCurrentYear()}-04-09`, 8, 'Tawnya'],
      [`${getCurrentYear()}-04-10`, 9, 'Tawnya'],
      [`${getCurrentYear()}-04-11`, 3, 'Preston'],
      [`${getCurrentYear()}-04-12`, 5, 'Tawnya'],
      [`${getCurrentYear()}-04-13`, 5, 'Alex'],
      [`${getCurrentYear()}-04-16`, 8, 'Paige'],
      [`${getCurrentYear()}-04-17`, 8, 'Paige'],
      [`${getCurrentYear()}-04-18`, 9, 'Paige'],
      [`${getCurrentYear()}-04-19`, 3, 'Paige'],
      [`${getCurrentYear()}-04-20`, 6, 'Brian'],
      [`${getCurrentYear()}-04-23`, 12, 'Ian'],
      [`${getCurrentYear()}-04-24`, 6, 'Preston'],
      [`${getCurrentYear()}-04-25`, 5, 'Carrie'],
      [`${getCurrentYear()}-04-26`, 5, 'Jeff'],
      [`${getCurrentYear()}-04-27`, 11, 'Jeff'],
      [`${getCurrentYear()}-04-30`, 9, 'Jeff'],
      [`${getCurrentYear()}-05-01`, 3, 'Brian'],
      [`${getCurrentYear()}-05-02`, 5, 'Paige'],
      [`${getCurrentYear()}-05-03`, 4, 'Paige'],
      [`${getCurrentYear()}-05-04`, 9, 'Carrie'],
      [`${getCurrentYear()}-05-07`, 5, 'Carrie'],
      [`${getCurrentYear()}-05-08`, 5, 'Carrie'],
      [`${getCurrentYear()}-05-09`, 7, 'Alex'],
      [`${getCurrentYear()}-05-10`, 7, 'Alex'],
      [`${getCurrentYear()}-05-11`, 5, 'Carrie'],
      [`${getCurrentYear()}-05-14`, 3, 'Carrie'],
      [`${getCurrentYear()}-05-15`, 2, 'Alex'],
      [`${getCurrentYear()}-05-16`, 7, 'Alex'],
      [`${getCurrentYear()}-05-17`, 5, 'Josh'],
      [`${getCurrentYear()}-05-18`, 3, 'Josh'],
      [`${getCurrentYear()}-05-21`, 9, 'Preston'],
      [`${getCurrentYear()}-05-22`, 11, 'Carrie'],
      [`${getCurrentYear()}-05-23`, 5, 'Carrie'],
      [`${getCurrentYear()}-05-24`, 9, 'Tawnya'],
      [`${getCurrentYear()}-05-25`, 4, 'Tawnya'],
      [`${getCurrentYear()}-05-28`, 5, 'Preston'],
      [`${getCurrentYear()}-05-29`, 7, 'Josh'],
      [`${getCurrentYear()}-05-30`, 9, 'Rigie'],
      [`${getCurrentYear()}-05-31`, 5, 'Carrie'],
      [`${getCurrentYear()}-06-01`, 5, 'Carrie'],
      [`${getCurrentYear()}-06-04`, 6, 'Nick'],
      [`${getCurrentYear()}-06-05`, 7, 'Jeff'],
      [`${getCurrentYear()}-06-06`, 8, 'Jeff'],
      [`${getCurrentYear()}-06-07`, 5, 'Brian'],
      [`${getCurrentYear()}-06-08`, 8, 'Paige'],
      [`${getCurrentYear()}-06-11`, 6, 'Brian'],
      [`${getCurrentYear()}-06-12`, 6, 'Brian'],
      [`${getCurrentYear()}-06-13`, 2, 'Brian'],
      [`${getCurrentYear()}-06-14`, 7, 'Josh'],
      [`${getCurrentYear()}-06-15`, 5, 'Carrie'],
      [`${getCurrentYear()}-06-18`, 5, 'Preston'],
      [`${getCurrentYear()}-06-19`, 8, 'Brian'],
      [`${getCurrentYear()}-06-20`, 8, 'Paige'],
      [`${getCurrentYear()}-06-21`, 8, 'Paige'],
      [`${getCurrentYear()}-06-22`, 10, 'Paige'],
      [`${getCurrentYear()}-06-25`, 7, 'Brian'],
      [`${getCurrentYear()}-06-26`, 12, 'Tawnya'],
      [`${getCurrentYear()}-06-27`, 7, 'Rigie'],
      [`${getCurrentYear()}-06-28`, 6, 'Tawnya'],
      [`${getCurrentYear()}-06-29`, 12, 'Derek'],
      [`${getCurrentYear()}-07-02`, 3, 'Derek'],
      [`${getCurrentYear()}-07-03`, 4, 'Derek'],
      [`${getCurrentYear()}-07-04`, 9, 'Derek'],
      [`${getCurrentYear()}-07-05`, 11, 'Derek'],
      [`${getCurrentYear()}-07-06`, 5, 'Derek'],
      [`${getCurrentYear()}-07-09`, 5, 'Derek'],
      [`${getCurrentYear()}-07-10`, 9, 'Nick'],
      [`${getCurrentYear()}-07-11`, 9, 'Preston'],
      [`${getCurrentYear()}-07-12`, 9, 'Jeff'],
      [`${getCurrentYear()}-07-13`, 4, 'Josh'],
      [`${getCurrentYear()}-07-16`, 6, 'Josh'],
      [`${getCurrentYear()}-07-17`, 5, 'Brian'],
      [`${getCurrentYear()}-07-18`, 6, 'Tawnya'],
      [`${getCurrentYear()}-07-19`, 2, 'Tawnya'],
      [`${getCurrentYear()}-07-20`, 5, 'Tawnya'],
      [`${getCurrentYear()}-07-23`, 9, 'Brian'],
      [`${getCurrentYear()}-07-24`, 6, 'Brian'],
      [`${getCurrentYear()}-07-25`, 6, 'Paige'],
      [`${getCurrentYear()}-07-26`, 7, 'Paige'],
      [`${getCurrentYear()}-07-27`, 7, 'Paige'],
      [`${getCurrentYear()}-07-30`, 12, 'Brian'],
      [`${getCurrentYear()}-07-31`, 3, 'Brian'],
      [`${getCurrentYear()}-08-01`, 3, 'Brian'],
      [`${getCurrentYear()}-08-02`, 9, 'Preston'],
      [`${getCurrentYear()}-08-03`, 9, 'Preston'],
      [`${getCurrentYear()}-08-06`, 9, 'Brian'],
      [`${getCurrentYear()}-08-07`, 4, 'Tawnya'],
      [`${getCurrentYear()}-08-08`, 5, 'Tawnya'],
      [`${getCurrentYear()}-08-09`, 8, 'Tawnya'],
      [`${getCurrentYear()}-08-10`, 8, 'Alex'],
      [`${getCurrentYear()}-08-13`, 3, 'Jeff'],
      [`${getCurrentYear()}-08-14`, 7, 'Nick'],
      [`${getCurrentYear()}-08-15`, 5, 'Alex'],
      [`${getCurrentYear()}-08-16`, 9, 'Alex'],
      [`${getCurrentYear()}-08-17`, 6, 'Paige'],
      [`${getCurrentYear()}-08-20`, 5, 'Paige'],
      [`${getCurrentYear()}-08-21`, 8, 'Paige'],
      [`${getCurrentYear()}-08-22`, 10, 'Nick'],
      [`${getCurrentYear()}-08-23`, 4, 'Alex'],
      [`${getCurrentYear()}-08-24`, 5, 'Alex'],
      [`${getCurrentYear()}-08-27`, 9, 'Alex'],
      [`${getCurrentYear()}-08-28`, 9, 'Carrie'],
      [`${getCurrentYear()}-08-29`, 3, 'Carrie'],
      [`${getCurrentYear()}-08-30`, 3, 'Alex'],
      [`${getCurrentYear()}-08-31`, 4, 'Alex'],
      [`${getCurrentYear()}-09-03`, 2, 'Nick'],
      [`${getCurrentYear()}-09-04`, 10, 'Alex'],
      [`${getCurrentYear()}-09-05`, 9, 'Nick'],
      [`${getCurrentYear()}-09-06`, 7, 'Alex'],
      [`${getCurrentYear()}-09-07`, 8, 'Ian'],
      [`${getCurrentYear()}-09-10`, 7, 'Preston'],
      [`${getCurrentYear()}-09-11`, 8, 'Ian'],
      [`${getCurrentYear()}-09-12`, 8, 'Paige'],
      [`${getCurrentYear()}-09-13`, 2, 'Brian'],
      [`${getCurrentYear()}-09-14`, 3, 'Nick'],
      [`${getCurrentYear()}-09-17`, 4, 'Khoa'],
      [`${getCurrentYear()}-09-18`, 5, 'Jeff'],
      [`${getCurrentYear()}-09-19`, 6, 'Rigie'],
      [`${getCurrentYear()}-09-20`, 7, 'Brian'],
      [`${getCurrentYear()}-09-21`, 8, 'Brian'],
      [`${getCurrentYear()}-09-24`, 8, 'Tawnya'],
      [`${getCurrentYear()}-09-25`, 9, 'Nick'],
      [`${getCurrentYear()}-09-26`, 7, 'Alex'],
      [`${getCurrentYear()}-09-27`, 9, 'Khoa'],
      [`${getCurrentYear()}-09-28`, 7, 'Khoa'],
      [`${getCurrentYear()}-10-01`, 5, 'Khoa'],
      [`${getCurrentYear()}-10-02`, 6, 'Khoa'],
      [`${getCurrentYear()}-10-03`, 9, 'Khoa'],
      [`${getCurrentYear()}-10-04`, 4, 'Khoa'],
      [`${getCurrentYear()}-10-05`, 8, 'Alex'],
      [`${getCurrentYear()}-10-08`, 9, 'Nick'],
      [`${getCurrentYear()}-10-09`, 3, 'Nick'],
      [`${getCurrentYear()}-10-10`, 5, 'Nick'],
      [`${getCurrentYear()}-10-11`, 5, 'Carrie'],
      [`${getCurrentYear()}-10-12`, 8, 'Paige'],
      [`${getCurrentYear()}-10-15`, 8, 'Alex'],
      [`${getCurrentYear()}-10-16`, 9, 'Nick'],
      [`${getCurrentYear()}-10-17`, 3, 'Nick'],
      [`${getCurrentYear()}-10-18`, 6, 'Josh'],
      [`${getCurrentYear()}-10-19`, 12, 'Khoa'],
      [`${getCurrentYear()}-10-22`, 6, 'Khoa'],
      [`${getCurrentYear()}-10-23`, 5, 'Paige'],
      [`${getCurrentYear()}-10-24`, 5, 'Paige'],
      [`${getCurrentYear()}-10-25`, 11, 'Khoa'],
      [`${getCurrentYear()}-10-26`, 9, 'Brian'],
      [`${getCurrentYear()}-10-29`, 3, 'Nick'],
      [`${getCurrentYear()}-10-30`, 5, 'Nick'],
      [`${getCurrentYear()}-10-31`, 4, 'Nick'],
      [`${getCurrentYear()}-11-01`, 9, 'Alex'],
      [`${getCurrentYear()}-11-02`, 5, 'Alex'],
      [`${getCurrentYear()}-11-05`, 5, 'Alex'],
      [`${getCurrentYear()}-11-06`, 7, 'Alex'],
      [`${getCurrentYear()}-11-07`, 7, 'Tawnya'],
      [`${getCurrentYear()}-11-08`, 5, 'Carrie'],
      [`${getCurrentYear()}-11-09`, 3, 'Carrie'],
      [`${getCurrentYear()}-11-12`, 2, 'Ian'],
      [`${getCurrentYear()}-11-13`, 7, 'Preston'],
      [`${getCurrentYear()}-11-14`, 5, 'Alex'],
      [`${getCurrentYear()}-11-15`, 3, 'Paige'],
      [`${getCurrentYear()}-11-16`, 9, 'Alex'],
      [`${getCurrentYear()}-11-19`, 11, 'Alex'],
      [`${getCurrentYear()}-11-20`, 5, 'Khoa'],
      [`${getCurrentYear()}-11-21`, 9, 'Khoa'],
      [`${getCurrentYear()}-11-22`, 4, 'Josh'],
      [`${getCurrentYear()}-11-23`, 5, 'Josh'],
      [`${getCurrentYear()}-11-26`, 7, 'Alex'],
      [`${getCurrentYear()}-11-27`, 9, 'Nick'],
      [`${getCurrentYear()}-11-28`, 5, 'Brian'],
      [`${getCurrentYear()}-11-29`, 5, 'Brian'],
      [`${getCurrentYear()}-11-30`, 6, 'Alexis'],
      [`${getCurrentYear()}-12-03`, 7, 'Alexis'],
      [`${getCurrentYear()}-12-04`, 8, 'Brian'],
      [`${getCurrentYear()}-12-05`, 5, 'Alexis'],
      [`${getCurrentYear()}-12-06`, 8, 'Paige'],
      [`${getCurrentYear()}-12-07`, 6, 'Paige'],
      [`${getCurrentYear()}-12-10`, 6, 'Alex'],
      [`${getCurrentYear()}-12-11`, 2, 'Brian'],
      [`${getCurrentYear()}-12-12`, 7, 'Khoa'],
      [`${getCurrentYear()}-12-13`, 5, 'Carrie'],
      [`${getCurrentYear()}-12-14`, 5, 'Nick'],
      [`${getCurrentYear()}-12-17`, 8, 'Tawnya'],
      [`${getCurrentYear()}-12-18`, 8, 'Tawnya'],
      [`${getCurrentYear()}-12-19`, 8, 'Tawnya'],
      [`${getCurrentYear()}-12-20`, 10, 'Brian'],
      [`${getCurrentYear()}-12-21`, 7, 'Tawnya'],
      [`${getCurrentYear()}-12-24`, 12, 'Carrie'],
      [`${getCurrentYear()}-12-25`, 7, 'Carrie'],
      [`${getCurrentYear()}-12-26`, 6, 'Nick'],
      [`${getCurrentYear()}-12-27`, 5, 'Alex'],
      [`${getCurrentYear()}-12-28`, 11, 'Brian'],
      [`${getCurrentYear()}-12-31`, 6, 'Nick'],
    ];

    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'calendar',
      title: {
        text: 'Donations Collected',
        fontColor: '#212121',
        fontFamily: 'Roboto',
        fontSize: '32px',
        fontWeight: 'normal',
        textAlign: 'left',
        width: '60%',
        x: '10%',
        y: '9%',
      },
      options: {
        values: chartData,
        day: {
          inactive: {
            backgroundColor: '#F5F5F5',
          },
        },
        month: {
          item: {
            fontColor: 'gray',
            fontSize: '9px',
          },
          outline: {
            active: {
              borderColor: '#BDBDBD',
            },
          },
        },
        palette: ['none', '#3F51B5'],
        rows: 2,
        scale: {
          height: '10px',
          width: '30%',
          x: '75%',
          y: '15%',
        },
        weekday: {
          values: ['', 'Mon', '', 'Wed', '', 'Fri', ''],
          item: {
            fontColor: 'gray',
            fontSize: '9px',
          },
        },
        year: {
          text: getCurrentYear(),
          visible: false,
        },
      },
      plot: {
        tooltip: {
          text: '%data-day:<br><br>$%v0 in donations<br>collected by %data-info0.',
          alpha: 0.8,
          backgroundColor: '#212121',
          borderColor: '#212121',
          borderRadius: '3px',
          fontColor: 'white',
          fontFamily: 'Georgia',
          fontSize: '12px',
          offsetY: '-10px',
          textAlign: 'center',
          textAlpha: 1,
        },
      },
      plotarea: {
        marginTop: '30%',
        marginBottom: '10%',
      },
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.loadModules('calendar');
    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>

// DEFINE DATA
// -----------------------------
function getCurrentYear() {
  return new Date().getFullYear();
};

let chartData = [
  [`${getCurrentYear()}-01-01`, 3, 'Alex'],
  [`${getCurrentYear()}-01-02`, 12, 'Paige'],
  [`${getCurrentYear()}-01-03`, 3, 'Carrie'],
  [`${getCurrentYear()}-01-04`, 4, 'Derek'],
  [`${getCurrentYear()}-01-05`, 9, 'Alexis'],
  [`${getCurrentYear()}-01-08`, 11, 'Jeff'],
  [`${getCurrentYear()}-01-09`, 5, 'Alex'],
  [`${getCurrentYear()}-01-10`, 5, 'Brian'],
  [`${getCurrentYear()}-01-11`, 9, 'Brian'],
  [`${getCurrentYear()}-01-12`, 9, 'Brian'],
  [`${getCurrentYear()}-01-15`, 9, 'Brian'],
  [`${getCurrentYear()}-01-16`, 4, 'Alex'],
  [`${getCurrentYear()}-01-17`, 6, 'Khoa'],
  [`${getCurrentYear()}-01-18`, 5, 'Brian'],
  [`${getCurrentYear()}-01-19`, 6, 'Tawnya'],
  [`${getCurrentYear()}-01-22`, 2, 'Paige'],
  [`${getCurrentYear()}-01-23`, 5, 'Jeff'],
  [`${getCurrentYear()}-01-24`, 9, 'Alex'],
  [`${getCurrentYear()}-01-25`, 6, 'Brian'],
  [`${getCurrentYear()}-01-26`, 6, 'Carrie'],
  [`${getCurrentYear()}-01-29`, 7, 'Brian'],
  [`${getCurrentYear()}-01-30`, 7, 'Carrie'],
  [`${getCurrentYear()}-01-31`, 12, 'Jeff'],
  [`${getCurrentYear()}-02-01`, 3, 'Carrie'],
  [`${getCurrentYear()}-02-02`, 3, 'Derek'],
  [`${getCurrentYear()}-02-05`, 9, 'Derek'],
  [`${getCurrentYear()}-02-06`, 9, 'Carrie'],
  [`${getCurrentYear()}-02-07`, 9, 'Carrie'],
  [`${getCurrentYear()}-02-08`, 4, 'Brian'],
  [`${getCurrentYear()}-02-09`, 5, 'Brian'],
  [`${getCurrentYear()}-02-12`, 8, 'Derek'],
  [`${getCurrentYear()}-02-13`, 8, 'Derek'],
  [`${getCurrentYear()}-02-14`, 3, 'Carrie'],
  [`${getCurrentYear()}-02-15`, 7, 'Alexis'],
  [`${getCurrentYear()}-02-16`, 5, 'Carrie'],
  [`${getCurrentYear()}-02-19`, 9, 'Carrie'],
  [`${getCurrentYear()}-02-20`, 6, 'Carrie'],
  [`${getCurrentYear()}-02-21`, 5, 'Carrie'],
  [`${getCurrentYear()}-02-22`, 8, 'Jeff'],
  [`${getCurrentYear()}-02-23`, 10, 'Jeff'],
  [`${getCurrentYear()}-02-24`, 4, 'Alex'],
  [`${getCurrentYear()}-02-26`, 5, 'Alex'],
  [`${getCurrentYear()}-02-27`, 9, 'Brian'],
  [`${getCurrentYear()}-02-28`, 9, 'Preston'],
  [`${getCurrentYear()}-03-01`, 3, 'Alex'],
  [`${getCurrentYear()}-03-02`, 3, 'Jeff'],
  [`${getCurrentYear()}-03-05`, 4, 'Jeff'],
  [`${getCurrentYear()}-03-06`, 2, 'Alex'],
  [`${getCurrentYear()}-03-07`, 10, 'Khoa'],
  [`${getCurrentYear()}-03-08`, 9, 'Tawnya'],
  [`${getCurrentYear()}-03-09`, 7, 'Tawnya'],
  [`${getCurrentYear()}-03-12`, 8, 'Jeff'],
  [`${getCurrentYear()}-03-13`, 7, 'Brian'],
  [`${getCurrentYear()}-03-14`, 8, 'Alex'],
  [`${getCurrentYear()}-03-15`, 8, 'Brian'],
  [`${getCurrentYear()}-03-16`, 2, 'Preston'],
  [`${getCurrentYear()}-03-19`, 3, 'Preston'],
  [`${getCurrentYear()}-03-20`, 4, 'Jeff'],
  [`${getCurrentYear()}-03-21`, 5, 'Jeff'],
  [`${getCurrentYear()}-03-22`, 6, 'Jeff'],
  [`${getCurrentYear()}-03-23`, 7, 'Carrie'],
  [`${getCurrentYear()}-03-26`, 8, 'Brian'],
  [`${getCurrentYear()}-03-27`, 8, 'Brian'],
  [`${getCurrentYear()}-03-28`, 9, 'Ian'],
  [`${getCurrentYear()}-03-29`, 7, 'Ian'],
  [`${getCurrentYear()}-03-30`, 9, 'Preston'],
  [`${getCurrentYear()}-04-02`, 7, 'Preston'],
  [`${getCurrentYear()}-04-03`, 5, 'Ian'],
  [`${getCurrentYear()}-04-04`, 6, 'Preston'],
  [`${getCurrentYear()}-04-05`, 9, 'Brian'],
  [`${getCurrentYear()}-04-06`, 4, 'Tawnya'],
  [`${getCurrentYear()}-04-09`, 8, 'Tawnya'],
  [`${getCurrentYear()}-04-10`, 9, 'Tawnya'],
  [`${getCurrentYear()}-04-11`, 3, 'Preston'],
  [`${getCurrentYear()}-04-12`, 5, 'Tawnya'],
  [`${getCurrentYear()}-04-13`, 5, 'Alex'],
  [`${getCurrentYear()}-04-16`, 8, 'Paige'],
  [`${getCurrentYear()}-04-17`, 8, 'Paige'],
  [`${getCurrentYear()}-04-18`, 9, 'Paige'],
  [`${getCurrentYear()}-04-19`, 3, 'Paige'],
  [`${getCurrentYear()}-04-20`, 6, 'Brian'],
  [`${getCurrentYear()}-04-23`, 12, 'Ian'],
  [`${getCurrentYear()}-04-24`, 6, 'Preston'],
  [`${getCurrentYear()}-04-25`, 5, 'Carrie'],
  [`${getCurrentYear()}-04-26`, 5, 'Jeff'],
  [`${getCurrentYear()}-04-27`, 11, 'Jeff'],
  [`${getCurrentYear()}-04-30`, 9, 'Jeff'],
  [`${getCurrentYear()}-05-01`, 3, 'Brian'],
  [`${getCurrentYear()}-05-02`, 5, 'Paige'],
  [`${getCurrentYear()}-05-03`, 4, 'Paige'],
  [`${getCurrentYear()}-05-04`, 9, 'Carrie'],
  [`${getCurrentYear()}-05-07`, 5, 'Carrie'],
  [`${getCurrentYear()}-05-08`, 5, 'Carrie'],
  [`${getCurrentYear()}-05-09`, 7, 'Alex'],
  [`${getCurrentYear()}-05-10`, 7, 'Alex'],
  [`${getCurrentYear()}-05-11`, 5, 'Carrie'],
  [`${getCurrentYear()}-05-14`, 3, 'Carrie'],
  [`${getCurrentYear()}-05-15`, 2, 'Alex'],
  [`${getCurrentYear()}-05-16`, 7, 'Alex'],
  [`${getCurrentYear()}-05-17`, 5, 'Josh'],
  [`${getCurrentYear()}-05-18`, 3, 'Josh'],
  [`${getCurrentYear()}-05-21`, 9, 'Preston'],
  [`${getCurrentYear()}-05-22`, 11, 'Carrie'],
  [`${getCurrentYear()}-05-23`, 5, 'Carrie'],
  [`${getCurrentYear()}-05-24`, 9, 'Tawnya'],
  [`${getCurrentYear()}-05-25`, 4, 'Tawnya'],
  [`${getCurrentYear()}-05-28`, 5, 'Preston'],
  [`${getCurrentYear()}-05-29`, 7, 'Josh'],
  [`${getCurrentYear()}-05-30`, 9, 'Rigie'],
  [`${getCurrentYear()}-05-31`, 5, 'Carrie'],
  [`${getCurrentYear()}-06-01`, 5, 'Carrie'],
  [`${getCurrentYear()}-06-04`, 6, 'Nick'],
  [`${getCurrentYear()}-06-05`, 7, 'Jeff'],
  [`${getCurrentYear()}-06-06`, 8, 'Jeff'],
  [`${getCurrentYear()}-06-07`, 5, 'Brian'],
  [`${getCurrentYear()}-06-08`, 8, 'Paige'],
  [`${getCurrentYear()}-06-11`, 6, 'Brian'],
  [`${getCurrentYear()}-06-12`, 6, 'Brian'],
  [`${getCurrentYear()}-06-13`, 2, 'Brian'],
  [`${getCurrentYear()}-06-14`, 7, 'Josh'],
  [`${getCurrentYear()}-06-15`, 5, 'Carrie'],
  [`${getCurrentYear()}-06-18`, 5, 'Preston'],
  [`${getCurrentYear()}-06-19`, 8, 'Brian'],
  [`${getCurrentYear()}-06-20`, 8, 'Paige'],
  [`${getCurrentYear()}-06-21`, 8, 'Paige'],
  [`${getCurrentYear()}-06-22`, 10, 'Paige'],
  [`${getCurrentYear()}-06-25`, 7, 'Brian'],
  [`${getCurrentYear()}-06-26`, 12, 'Tawnya'],
  [`${getCurrentYear()}-06-27`, 7, 'Rigie'],
  [`${getCurrentYear()}-06-28`, 6, 'Tawnya'],
  [`${getCurrentYear()}-06-29`, 12, 'Derek'],
  [`${getCurrentYear()}-07-02`, 3, 'Derek'],
  [`${getCurrentYear()}-07-03`, 4, 'Derek'],
  [`${getCurrentYear()}-07-04`, 9, 'Derek'],
  [`${getCurrentYear()}-07-05`, 11, 'Derek'],
  [`${getCurrentYear()}-07-06`, 5, 'Derek'],
  [`${getCurrentYear()}-07-09`, 5, 'Derek'],
  [`${getCurrentYear()}-07-10`, 9, 'Nick'],
  [`${getCurrentYear()}-07-11`, 9, 'Preston'],
  [`${getCurrentYear()}-07-12`, 9, 'Jeff'],
  [`${getCurrentYear()}-07-13`, 4, 'Josh'],
  [`${getCurrentYear()}-07-16`, 6, 'Josh'],
  [`${getCurrentYear()}-07-17`, 5, 'Brian'],
  [`${getCurrentYear()}-07-18`, 6, 'Tawnya'],
  [`${getCurrentYear()}-07-19`, 2, 'Tawnya'],
  [`${getCurrentYear()}-07-20`, 5, 'Tawnya'],
  [`${getCurrentYear()}-07-23`, 9, 'Brian'],
  [`${getCurrentYear()}-07-24`, 6, 'Brian'],
  [`${getCurrentYear()}-07-25`, 6, 'Paige'],
  [`${getCurrentYear()}-07-26`, 7, 'Paige'],
  [`${getCurrentYear()}-07-27`, 7, 'Paige'],
  [`${getCurrentYear()}-07-30`, 12, 'Brian'],
  [`${getCurrentYear()}-07-31`, 3, 'Brian'],
  [`${getCurrentYear()}-08-01`, 3, 'Brian'],
  [`${getCurrentYear()}-08-02`, 9, 'Preston'],
  [`${getCurrentYear()}-08-03`, 9, 'Preston'],
  [`${getCurrentYear()}-08-06`, 9, 'Brian'],
  [`${getCurrentYear()}-08-07`, 4, 'Tawnya'],
  [`${getCurrentYear()}-08-08`, 5, 'Tawnya'],
  [`${getCurrentYear()}-08-09`, 8, 'Tawnya'],
  [`${getCurrentYear()}-08-10`, 8, 'Alex'],
  [`${getCurrentYear()}-08-13`, 3, 'Jeff'],
  [`${getCurrentYear()}-08-14`, 7, 'Nick'],
  [`${getCurrentYear()}-08-15`, 5, 'Alex'],
  [`${getCurrentYear()}-08-16`, 9, 'Alex'],
  [`${getCurrentYear()}-08-17`, 6, 'Paige'],
  [`${getCurrentYear()}-08-20`, 5, 'Paige'],
  [`${getCurrentYear()}-08-21`, 8, 'Paige'],
  [`${getCurrentYear()}-08-22`, 10, 'Nick'],
  [`${getCurrentYear()}-08-23`, 4, 'Alex'],
  [`${getCurrentYear()}-08-24`, 5, 'Alex'],
  [`${getCurrentYear()}-08-27`, 9, 'Alex'],
  [`${getCurrentYear()}-08-28`, 9, 'Carrie'],
  [`${getCurrentYear()}-08-29`, 3, 'Carrie'],
  [`${getCurrentYear()}-08-30`, 3, 'Alex'],
  [`${getCurrentYear()}-08-31`, 4, 'Alex'],
  [`${getCurrentYear()}-09-03`, 2, 'Nick'],
  [`${getCurrentYear()}-09-04`, 10, 'Alex'],
  [`${getCurrentYear()}-09-05`, 9, 'Nick'],
  [`${getCurrentYear()}-09-06`, 7, 'Alex'],
  [`${getCurrentYear()}-09-07`, 8, 'Ian'],
  [`${getCurrentYear()}-09-10`, 7, 'Preston'],
  [`${getCurrentYear()}-09-11`, 8, 'Ian'],
  [`${getCurrentYear()}-09-12`, 8, 'Paige'],
  [`${getCurrentYear()}-09-13`, 2, 'Brian'],
  [`${getCurrentYear()}-09-14`, 3, 'Nick'],
  [`${getCurrentYear()}-09-17`, 4, 'Khoa'],
  [`${getCurrentYear()}-09-18`, 5, 'Jeff'],
  [`${getCurrentYear()}-09-19`, 6, 'Rigie'],
  [`${getCurrentYear()}-09-20`, 7, 'Brian'],
  [`${getCurrentYear()}-09-21`, 8, 'Brian'],
  [`${getCurrentYear()}-09-24`, 8, 'Tawnya'],
  [`${getCurrentYear()}-09-25`, 9, 'Nick'],
  [`${getCurrentYear()}-09-26`, 7, 'Alex'],
  [`${getCurrentYear()}-09-27`, 9, 'Khoa'],
  [`${getCurrentYear()}-09-28`, 7, 'Khoa'],
  [`${getCurrentYear()}-10-01`, 5, 'Khoa'],
  [`${getCurrentYear()}-10-02`, 6, 'Khoa'],
  [`${getCurrentYear()}-10-03`, 9, 'Khoa'],
  [`${getCurrentYear()}-10-04`, 4, 'Khoa'],
  [`${getCurrentYear()}-10-05`, 8, 'Alex'],
  [`${getCurrentYear()}-10-08`, 9, 'Nick'],
  [`${getCurrentYear()}-10-09`, 3, 'Nick'],
  [`${getCurrentYear()}-10-10`, 5, 'Nick'],
  [`${getCurrentYear()}-10-11`, 5, 'Carrie'],
  [`${getCurrentYear()}-10-12`, 8, 'Paige'],
  [`${getCurrentYear()}-10-15`, 8, 'Alex'],
  [`${getCurrentYear()}-10-16`, 9, 'Nick'],
  [`${getCurrentYear()}-10-17`, 3, 'Nick'],
  [`${getCurrentYear()}-10-18`, 6, 'Josh'],
  [`${getCurrentYear()}-10-19`, 12, 'Khoa'],
  [`${getCurrentYear()}-10-22`, 6, 'Khoa'],
  [`${getCurrentYear()}-10-23`, 5, 'Paige'],
  [`${getCurrentYear()}-10-24`, 5, 'Paige'],
  [`${getCurrentYear()}-10-25`, 11, 'Khoa'],
  [`${getCurrentYear()}-10-26`, 9, 'Brian'],
  [`${getCurrentYear()}-10-29`, 3, 'Nick'],
  [`${getCurrentYear()}-10-30`, 5, 'Nick'],
  [`${getCurrentYear()}-10-31`, 4, 'Nick'],
  [`${getCurrentYear()}-11-01`, 9, 'Alex'],
  [`${getCurrentYear()}-11-02`, 5, 'Alex'],
  [`${getCurrentYear()}-11-05`, 5, 'Alex'],
  [`${getCurrentYear()}-11-06`, 7, 'Alex'],
  [`${getCurrentYear()}-11-07`, 7, 'Tawnya'],
  [`${getCurrentYear()}-11-08`, 5, 'Carrie'],
  [`${getCurrentYear()}-11-09`, 3, 'Carrie'],
  [`${getCurrentYear()}-11-12`, 2, 'Ian'],
  [`${getCurrentYear()}-11-13`, 7, 'Preston'],
  [`${getCurrentYear()}-11-14`, 5, 'Alex'],
  [`${getCurrentYear()}-11-15`, 3, 'Paige'],
  [`${getCurrentYear()}-11-16`, 9, 'Alex'],
  [`${getCurrentYear()}-11-19`, 11, 'Alex'],
  [`${getCurrentYear()}-11-20`, 5, 'Khoa'],
  [`${getCurrentYear()}-11-21`, 9, 'Khoa'],
  [`${getCurrentYear()}-11-22`, 4, 'Josh'],
  [`${getCurrentYear()}-11-23`, 5, 'Josh'],
  [`${getCurrentYear()}-11-26`, 7, 'Alex'],
  [`${getCurrentYear()}-11-27`, 9, 'Nick'],
  [`${getCurrentYear()}-11-28`, 5, 'Brian'],
  [`${getCurrentYear()}-11-29`, 5, 'Brian'],
  [`${getCurrentYear()}-11-30`, 6, 'Alexis'],
  [`${getCurrentYear()}-12-03`, 7, 'Alexis'],
  [`${getCurrentYear()}-12-04`, 8, 'Brian'],
  [`${getCurrentYear()}-12-05`, 5, 'Alexis'],
  [`${getCurrentYear()}-12-06`, 8, 'Paige'],
  [`${getCurrentYear()}-12-07`, 6, 'Paige'],
  [`${getCurrentYear()}-12-10`, 6, 'Alex'],
  [`${getCurrentYear()}-12-11`, 2, 'Brian'],
  [`${getCurrentYear()}-12-12`, 7, 'Khoa'],
  [`${getCurrentYear()}-12-13`, 5, 'Carrie'],
  [`${getCurrentYear()}-12-14`, 5, 'Nick'],
  [`${getCurrentYear()}-12-17`, 8, 'Tawnya'],
  [`${getCurrentYear()}-12-18`, 8, 'Tawnya'],
  [`${getCurrentYear()}-12-19`, 8, 'Tawnya'],
  [`${getCurrentYear()}-12-20`, 10, 'Brian'],
  [`${getCurrentYear()}-12-21`, 7, 'Tawnya'],
  [`${getCurrentYear()}-12-24`, 12, 'Carrie'],
  [`${getCurrentYear()}-12-25`, 7, 'Carrie'],
  [`${getCurrentYear()}-12-26`, 6, 'Nick'],
  [`${getCurrentYear()}-12-27`, 5, 'Alex'],
  [`${getCurrentYear()}-12-28`, 11, 'Brian'],
  [`${getCurrentYear()}-12-31`, 6, 'Nick'],
];

// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'calendar',
  title: {
    text: 'Donations Collected',
    fontColor: '#212121',
    fontFamily: 'Roboto',
    fontSize: '32px',
    fontWeight: 'normal',
    textAlign: 'left',
    width: '60%',
    x: '10%',
    y: '9%',
  },
  options: {
    values: chartData,
    day: {
      inactive: {
        backgroundColor: '#F5F5F5',
      },
    },
    month: {
      item: {
        fontColor: 'gray',
        fontSize: '9px',
      },
      outline: {
        active: {
          borderColor: '#BDBDBD',
        },
      },
    },
    palette: ['none', '#3F51B5'],
    rows: 2,
    scale: {
      height: '10px',
      width: '30%',
      x: '75%',
      y: '15%',
    },
    weekday: {
      values: ['', 'Mon', '', 'Wed', '', 'Fri', ''],
      item: {
        fontColor: 'gray',
        fontSize: '9px',
      },
    },
    year: {
      text: getCurrentYear(),
      visible: false,
    },
  },
  plot: {
    tooltip: {
      text: '%data-day:<br><br>$%v0 in donations<br>collected by %data-info0.',
      alpha: 0.8,
      backgroundColor: '#212121',
      borderColor: '#212121',
      borderRadius: '3px',
      fontColor: 'white',
      fontFamily: 'Georgia',
      fontSize: '12px',
      offsetY: '-10px',
      textAlign: 'center',
      textAlpha: 1,
    },
  },
  plotarea: {
    marginTop: '30%',
    marginBottom: '10%',
  },
};

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

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

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

.zc-ref {
  display: none;
}

Calendar Chart 117/285 Animated Nested Pie Chart

Calendar Chart with Multiple Rows

Related Documentation: