Gallery Back to Gallery

Horizontal Waterfall Chart with Gradient Colors

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

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

    .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 chartConfig = {
      type: 'hwaterfall',
      backgroundColor: '#3E3E3E',
      title: {
        text: 'INCOME STATEMENT',
        marginTop: '10px',
        backgroundColor: 'none',
        color: '#CCCCCC',
        fontSize: '16px',
        fontWeight: 'none',
      },
      options: {
        final: {
          backgroundColor: '#8D8D8D #444444',
          fillAngle: 90,
          shadow: true,
          shadowColor: '#333',
        },
        intermediate: {
          backgroundColor: '#68C3E7 #1E89B8',
          fillAngle: 90,
          shadow: true,
          shadowColor: '#333',
        },
        line: {
          lineColor: '#646464',
          lineStyle: 'solid',
        },
        negative: {
          backgroundColor: '#B8628F #7A1047',
          fillAngle: 90,
          shadow: true,
          shadowColor: '#333',
        },
        positive: {
          backgroundColor: '#9EBC47 #68821D',
          fillAngle: 90,
          shadow: true,
          shadowColor: '#333',
        },
      },
      plot: {
        barWidth: '24px',
      },
      plotarea: {
        marginLeft: '18%',
        backgroundColor: '#303030',
      },
      scaleX: {
        guide: {
          visible: false,
        },
        item: {
          color: '#CCCCCC',
        },
        labels: [
          'Revenue',
          'COGS',
          'Gross Profit',
          'R & D',
          'Sales Expenses',
          'EBITDA',
          'Depreciation',
          'Interest & Taxes',
          'Net Income',
          'Total',
        ],
        lineColor: '#646464',
        mirrored: true,
        tick: {
          lineColor: '#646464',
        },
      },
      scaleY: {
        format: '$%v',
        guide: {
          alpha: 0.7,
          lineColor: '#646464',
        },
        item: {
          color: '#CCCCCC',
        },
        label: {
          text: '(in thousands)',
          color: '#CCCCCC',
          fontWeight: 'none',
        },
        lineColor: '#646464',
        thousandsSeparator: ',',
        tick: {
          lineColor: '#646464',
        },
      },
      series: [{
        values: [4000, -1000, 'SUM', -500, -200, 700, -400, -100, -200, 'SUM'],
      }, ],
    };

    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 chartConfig = {
  type: 'hwaterfall',
  backgroundColor: '#3E3E3E',
  title: {
    text: 'INCOME STATEMENT',
    marginTop: '10px',
    backgroundColor: 'none',
    color: '#CCCCCC',
    fontSize: '16px',
    fontWeight: 'none',
  },
  options: {
    final: {
      backgroundColor: '#8D8D8D #444444',
      fillAngle: 90,
      shadow: true,
      shadowColor: '#333',
    },
    intermediate: {
      backgroundColor: '#68C3E7 #1E89B8',
      fillAngle: 90,
      shadow: true,
      shadowColor: '#333',
    },
    line: {
      lineColor: '#646464',
      lineStyle: 'solid',
    },
    negative: {
      backgroundColor: '#B8628F #7A1047',
      fillAngle: 90,
      shadow: true,
      shadowColor: '#333',
    },
    positive: {
      backgroundColor: '#9EBC47 #68821D',
      fillAngle: 90,
      shadow: true,
      shadowColor: '#333',
    },
  },
  plot: {
    barWidth: '24px',
  },
  plotarea: {
    marginLeft: '18%',
    backgroundColor: '#303030',
  },
  scaleX: {
    guide: {
      visible: false,
    },
    item: {
      color: '#CCCCCC',
    },
    labels: [
      'Revenue',
      'COGS',
      'Gross Profit',
      'R & D',
      'Sales Expenses',
      'EBITDA',
      'Depreciation',
      'Interest & Taxes',
      'Net Income',
      'Total',
    ],
    lineColor: '#646464',
    mirrored: true,
    tick: {
      lineColor: '#646464',
    },
  },
  scaleY: {
    format: '$%v',
    guide: {
      alpha: 0.7,
      lineColor: '#646464',
    },
    item: {
      color: '#CCCCCC',
    },
    label: {
      text: '(in thousands)',
      color: '#CCCCCC',
      fontWeight: 'none',
    },
    lineColor: '#646464',
    thousandsSeparator: ',',
    tick: {
      lineColor: '#646464',
    },
  },
  series: [
    {
      values: [4000, -1000, 'SUM', -500, -200, 700, -400, -100, -200, 'SUM'],
    },
  ],
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});
.zc-body { 
  background-color: #3E3E3E; 
}

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

.zc-ref {
  display: none;
}
Two Word Clouds Graphset 205/275 Venn Diagram with HTML Tooltips

Related Documentation: