Gallery Back to Gallery

Transparent Spline Area Chart

Powered by ZingChart
<!DOCTYPE html>
<html>

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

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

<body>
  <div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let colors = {
      gray: '#EBEBEB',
      grayDark: '#3F3F3F'
    };

    let randomVal = (min, max, num) => {
      let aData = [];
      for (let i = 0; i < num; i++) {
        let val = ((Math.random() * (max - min)) + min);
        aData.push(parseInt(val));
      }
      return aData;
    }

    let chartConfig = {
      type: 'area',
      plot: {
        animation: {
          delay: 400,
          effect: 'ANIMATION_EXPAND_TOP',
          method: 'ANIMATION_BOUNCE_EASE_OUT',
          sequence: 'ANIMATION_NO_SEQUENCE',
          speed: 500
        },
        aspect: 'spline'
      },
      scaleX: {
        guide: {
          alpha: 1,
          lineColor: colors.gray,
          lineStyle: 'solid'
        },
        item: {
          color: colors.grayDark
        },
        lineColor: colors.gray,
        lineWidth: '1px',
        tick: {
          lineColor: '#C7C7C7',
          lineWidth: '1px'
        },
      },
      scaleY: {
        guide: {
          alpha: 1,
          lineColor: colors.gray,
          lineStyle: 'solid'
        },
        item: {
          color: colors.grayDark
        },
        lineColor: colors.gray,
        lineWidth: '1px',
        step: 10,
        tick: {
          lineColor: '#C7C7C7',
          lineWidth: '1px'
        }
      },
      tooltip: {
        text: '%kl<br><span style=\'color:%color\'>%t: </span>%v<br>',
        padding: '15px',
        backgroundColor: 'white',
        bold: true,
        borderColor: '#e3e3e3',
        borderRadius: '5px',
        fontColor: '#2f2f2f',
        fontSize: '12px',
        shadow: true,
        shadowAlpha: 0.2,
        shadowBlur: 5,
        shadowColor: '#a1a1a1',
        shadowDistance: 4,
        textAlign: 'left',
        visible: true
      },
      series: [{
          values: randomVal(22, 42, 10),
          backgroundColor: '#80DEEA',
          lineColor: '#80DEEA',
          lineWidth: '2px',
          marker: {
            backgroundColor: '#80DEEA'
          }
        },
        {
          values: randomVal(7, 32, 10),
          backgroundColor: '#69F0AE',
          lineColor: '#69F0AE',
          lineWidth: '2px',
          marker: {
            backgroundColor: '#69F0AE'
          }
        }
      ]
    }


    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      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" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
	</body>
</html>
let colors = {
  gray: '#EBEBEB',
  grayDark: '#3F3F3F'
};

let randomVal = (min, max, num) => {
  let aData = [];
  for (let i = 0; i < num; i++) {
    let val = ((Math.random() * (max - min)) + min);
    aData.push(parseInt(val));
  }
  return aData;
}

let chartConfig = {
  type: 'area',
  plot: {
    animation: {
      delay: 400,
      effect: 'ANIMATION_EXPAND_TOP',
      method: 'ANIMATION_BOUNCE_EASE_OUT',
      sequence: 'ANIMATION_NO_SEQUENCE',
      speed: 500
    },
    aspect: 'spline'
  },
  scaleX: {
    guide: {
      alpha: 1,
      lineColor: colors.gray,
      lineStyle: 'solid'
    },
    item: {
      color: colors.grayDark
    },
    lineColor: colors.gray,
    lineWidth: '1px',
    tick: {
      lineColor: '#C7C7C7',
      lineWidth: '1px'
    },
  },
  scaleY: {
    guide: {
      alpha: 1,
      lineColor: colors.gray,
      lineStyle: 'solid'
    },
    item: {
      color: colors.grayDark
    },
    lineColor: colors.gray,
    lineWidth: '1px',
    step: 10,
    tick: {
      lineColor: '#C7C7C7',
      lineWidth: '1px'
    }
  },
  tooltip: {
    text: '%kl<br><span style=\'color:%color\'>%t: </span>%v<br>',
    padding: '15px',
    backgroundColor: 'white',
    bold: true,
    borderColor: '#e3e3e3',
    borderRadius: '5px',
    fontColor: '#2f2f2f',
    fontSize: '12px',
    shadow: true,
    shadowAlpha: 0.2,
    shadowBlur: 5,
    shadowColor: '#a1a1a1',
    shadowDistance: 4,
    textAlign: 'left',
    visible: true
  },
  series: [
    {
      values: randomVal(22, 42, 10),
      backgroundColor: '#80DEEA',
      lineColor: '#80DEEA',
      lineWidth: '2px',
      marker: {
        backgroundColor: '#80DEEA'
      }
    },
    {
      values: randomVal(7, 32, 10),
      backgroundColor: '#69F0AE',
      lineColor: '#69F0AE',
      lineWidth: '2px',
      marker: {
        backgroundColor: '#69F0AE'
      }
    }
  ]
}


zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});
.chart--container {
  min-height: 530px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}
Dynamic Area Chart with Minimum and Maximum Values 266/271 Bubble Chart with HTML Tooltips

Related Documentation: