Gallery Back to Gallery

Transparent Spline Area Chart

Powered by ZingChart
<!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>
    .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: {
        tooltip: {
          text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
          backgroundColor: 'white',
          bold: true,
          borderColor: '#e3e3e3',
          borderRadius: '5px',
          fontColor: '#2f2f2f',
          fontSize: '12px',
          padding: '15px',
          shadow: true,
          shadowAlpha: 0.2,
          shadowBlur: 5,
          shadowColor: '#a1a1a1',
          shadowDistance: 4,
          textAlign: 'left',
          visible: true,
        },
        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',
        },
      },
      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: {
    tooltip: {
      text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
      backgroundColor: 'white',
      bold: true,
      borderColor: '#e3e3e3',
      borderRadius: '5px',
      fontColor: '#2f2f2f',
      fontSize: '12px',
      padding: '15px',
      shadow: true,
      shadowAlpha: 0.2,
      shadowBlur: 5,
      shadowColor: '#a1a1a1',
      shadowDistance: 4,
      textAlign: 'left',
      visible: true,
    },
    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',
    },
  },
  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 276/281 Bubble Chart with HTML Tooltips

Related Documentation: