Animated Area Chart with Crosshairs

Please enable JavaScript to see the interactive demo.

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

<!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>
    .zc-body {
      background-color: #fff;
    }

    .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: 'area',
      globals: {
        fontFamily: 'Helvetica',
        shadow: false,
      },
      backgroundColor: '#fff',
      title: {
        text: 'Bandwidth for All Sites',
        backgroundColor: 'transparent',
        fontColor: '#5f5f5f',
        fontSize: '20px',
        padding: '15px 15px',
        textAlign: 'left',
      },
      legend: {
        backgroundColor: 'transparent',
        borderColor: 'transparent',
        item: {
          fontColor: '#5f5f5f',
        },
        layout: 'float',
        marginTop: '30px',
        marker: {
          borderColor: 'transparent',
          borderRadius: '50px',
        },
      },
      plot: {
        tooltip: {
          visible: false,
        },
        alphaArea: 1,
        animation: {
          delay: 500,
          effect: 'ANIMATION_SLIDE_TOP',
          method: 'ANIMATION_LINEAR',
          sequence: 'ANIMATION_BY_PLOT',
          speed: 700,
        },
        aspect: 'spline',
        contourOnTop: false,
        lineWidth: '2px',
        marker: {
          visible: false,
        },
      },
      scaleX: {
        values: [
          1563778800000, 1563782400000, 1563786000000, 1563789600000, 1563793200000,
          1563796800000, 1563800400000, 1563804000000, 1563807600000, 1563811200000,
          1563814800000, 1563818400000, 1563822000000,
        ],
        guide: {
          visible: false,
        },
        item: {
          fontColor: '#5f5f5f',
        },
        lineColor: '#5f5f5f',
        lineWidth: '1px',
        maxItems: 8,
        tick: {
          lineColor: '#5f5f5f',
          lineWidth: '1px',
        },
        transform: {
          type: 'date',
        },
        zooming: true,
      },
      scaleY: {
        guide: {
          lineColor: '#626262',
          lineStyle: 'solid',
        },
        item: {
          fontColor: '#5f5f5f',
        },
        lineColor: '#5f5f5f',
        lineWidth: '1px',
        tick: {
          lineColor: '#5f5f5f',
          lineWidth: '1px',
        },
      },
      crosshairX: {
        plotLabel: {
          backgroundColor: '#434343',
          fontColor: '#FFF',
        },
        scaleLabel: {
          backgroundColor: '#fff',
          borderColor: '#333',
          borderRadius: '3px',
          borderWidth: '1px',
          fontColor: 'black',
        },
      },
      series: [{
          text: 'All Sites',
          values: [
            2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309,
            52385, 47097, 50813, 13510,
          ],
          backgroundColor1: '#E84F28',
          backgroundColor2: '#E84F28',
          lineColor: '#E84F28',
        },
        {
          text: 'www.zingchart.com',
          values: [
            479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569,
            27721, 31569, 7362,
          ],
          backgroundColor1: '#45C392',
          backgroundColor2: '#45C392',
          lineColor: '#45C392',
        },
        {
          text: 'blog.zingchart.com',
          values: [
            408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720,
            15504, 15821, 4565,
          ],
          backgroundColor1: '#28C2D1',
          backgroundColor2: '#28C2D1',
          lineColor: '#28C2D1',
        },
        {
          text: 'help.zingchart.com',
          values: [
            989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836,
            2589, 1706, 1161,
          ],
          backgroundColor1: '#FBA645',
          backgroundColor2: '#FBA645',
          lineColor: '#FBA645',
        },
      ],
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  </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: 'area',
  globals: {
    fontFamily: 'Helvetica',
    shadow: false,
  },
  backgroundColor: '#fff',
  title: {
    text: 'Bandwidth for All Sites',
    backgroundColor: 'transparent',
    fontColor: '#5f5f5f',
    fontSize: '20px',
    padding: '15px 15px',
    textAlign: 'left',
  },
  legend: {
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    item: {
      fontColor: '#5f5f5f',
    },
    layout: 'float',
    marginTop: '30px',
    marker: {
      borderColor: 'transparent',
      borderRadius: '50px',
    },
  },
  plot: {
    tooltip: {
      visible: false,
    },
    alphaArea: 1,
    animation: {
      delay: 500,
      effect: 'ANIMATION_SLIDE_TOP',
      method: 'ANIMATION_LINEAR',
      sequence: 'ANIMATION_BY_PLOT',
      speed: 700,
    },
    aspect: 'spline',
    contourOnTop: false,
    lineWidth: '2px',
    marker: {
      visible: false,
    },
  },
  scaleX: {
    values: [
      1563778800000, 1563782400000, 1563786000000, 1563789600000, 1563793200000,
      1563796800000, 1563800400000, 1563804000000, 1563807600000, 1563811200000,
      1563814800000, 1563818400000, 1563822000000,
    ],
    guide: {
      visible: false,
    },
    item: {
      fontColor: '#5f5f5f',
    },
    lineColor: '#5f5f5f',
    lineWidth: '1px',
    maxItems: 8,
    tick: {
      lineColor: '#5f5f5f',
      lineWidth: '1px',
    },
    transform: {
      type: 'date',
    },
    zooming: true,
  },
  scaleY: {
    guide: {
      lineColor: '#626262',
      lineStyle: 'solid',
    },
    item: {
      fontColor: '#5f5f5f',
    },
    lineColor: '#5f5f5f',
    lineWidth: '1px',
    tick: {
      lineColor: '#5f5f5f',
      lineWidth: '1px',
    },
  },
  crosshairX: {
    plotLabel: {
      backgroundColor: '#434343',
      fontColor: '#FFF',
    },
    scaleLabel: {
      backgroundColor: '#fff',
      borderColor: '#333',
      borderRadius: '3px',
      borderWidth: '1px',
      fontColor: 'black',
    },
  },
  series: [
    {
      text: 'All Sites',
      values: [
        2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309,
        52385, 47097, 50813, 13510,
      ],
      backgroundColor1: '#E84F28',
      backgroundColor2: '#E84F28',
      lineColor: '#E84F28',
    },
    {
      text: 'www.zingchart.com',
      values: [
        479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569,
        27721, 31569, 7362,
      ],
      backgroundColor1: '#45C392',
      backgroundColor2: '#45C392',
      lineColor: '#45C392',
    },
    {
      text: 'blog.zingchart.com',
      values: [
        408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720,
        15504, 15821, 4565,
      ],
      backgroundColor1: '#28C2D1',
      backgroundColor2: '#28C2D1',
      lineColor: '#28C2D1',
    },
    {
      text: 'help.zingchart.com',
      values: [
        989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836,
        2589, 1706, 1161,
      ],
      backgroundColor1: '#FBA645',
      backgroundColor2: '#FBA645',
      lineColor: '#FBA645',
    },
  ],
};

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

.zc-body { background-color: #fff; }

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

.zc-ref {
  display: none;
}

Pie Chart Dashboard 135/275 Ocean Temperature Range Chart

Animated Area Chart with Crosshairs

Related Documentation: