• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let chartConfig = {
          type: "area",
          plot: {
            alphaArea: 1,
            contourOnTop: false // Sets whether the contour lines on area plots will be on top of all areas or will be hidden by the next area plot on top of it. You will notice when the attribute is set to true the lines are all set above the shaded regions.
          },
          series: [{
              values: [28, 19, 30, 35, 46, 36],
            },
            {
              values: [11, 7, 14, 11, 24, 22],
            },
            {
              values: [18, 25, 35, 16, 31, 18],
            }
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: 400,
          width: '100%'
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'></div>
    </body>
    
    </html>
    
          
    let chartConfig = {
      type: "area",
      plot: {
        alphaArea: 1,
        contourOnTop: false // Sets whether the contour lines on area plots will be on top of all areas or will be hidden by the next area plot on top of it. You will notice when the attribute is set to true the lines are all set above the shaded regions.
      },
      series: [{
          values: [28, 19, 30, 35, 46, 36],
        },
        {
          values: [11, 7, 14, 11, 24, 22],
        },
        {
          values: [18, 25, 35, 16, 31, 18],
        }
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: 400,
      width: '100%'
    });