Waterfall

<!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-html,
    .zc-body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

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

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

<body class="zc-body">
  <!-- CHART CONTAINER -->
  <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"]; // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
      zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';

      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfig = {
        type: 'waterfall',
        backgroundColor: '#F1F2F4',
        borderColor: '#B9BABC',
        borderRadius: '3px',
        borderWidth: '1px',
        options: {
          final: {
            backgroundColor: '#0091ea'
          },
          intermediate: {
            backgroundColor: '#ffab00'
          },
          line: {
            lineGapSize: 4,
            lineSegmentSize: '4px',
            lineStyle: 'dashed',
            lineWidth: '1px'
          },
          negative: {
            backgroundColor: '#c51162'
          },
          positive: {
            backgroundColor: '#00bfa5'
          }
        },
        plot: {
          valueBox: {
            text: '$%vk',
            backgroundColor: '#FFF',
            color: 'black',
            shadow: false
          },
          animation: {
            delay: 100,
            effect: 'ANIMATION_UNFOLD_VERTICAL',
            method: 'ELASTIC_EASE_OUT',
            sequence: 'ANIMATION_BY_NODE',
            speed: 100
          },
          barWidth: '30px'
        },
        plotarea: {
          marginTop: '20px',
          marginRight: '20px',
          borderColor: '#B9BABC',
          borderWidth: '1px'
        },
        scaleX: {
          backgroundColor: 'white',
          item: {
            color: '#666',
            offsetY: '0px',
            rules: [{
              offsetY: '20px',
              rule: '%i%2==0'
            }]
          },
          itemsOverlap: true,
          labels: [
            'Product Revenue',
            'Services Revenue',
            'Fixed Costs',
            'Variable Costs',
            'Total'
          ],
          lineColor: '#B9BABC',
          lineWidth: '1px',
          offsetStart: '16px',
          offsetEnd: '16px',
          guide: {
            visible: false
          },
          tick: {
            visible: false
          }
        },
        scaleY: {
          values: '0:700:140',
          format: '%vK',
          guide: {
            lineStyle: 'solid'
          },
          item: {
            color: '#666'
          },
          lineColor: '#B9BABC',
          lineWidth: '1px',
          tick: {
            visible: false
          }
        },
        series: [{
          values: [420, 210, -170, -140, 'SUM']
        }]
      };

      // render chart
      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">
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
</body>

</html>

.zc-html,
.zc-body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

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

.zc-ref {
  display: none;
}

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
  zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';

  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let chartConfig = {
    type: 'waterfall',
    backgroundColor: '#F1F2F4',
    borderColor: '#B9BABC',
    borderRadius: '3px',
    borderWidth: '1px',
    options: {
      final: {
        backgroundColor: '#0091ea'
      },
      intermediate: {
        backgroundColor: '#ffab00'
      },
      line: {
        lineGapSize: 4,
        lineSegmentSize: '4px',
        lineStyle: 'dashed',
        lineWidth: '1px'
      },
      negative: {
        backgroundColor: '#c51162'
      },
      positive: {
        backgroundColor: '#00bfa5'
      }
    },
    plot: {
      valueBox: {
        text: '$%vk',
        backgroundColor: '#FFF',
        color: 'black',
        shadow: false
      },
      animation: {
        delay: 100,
        effect: 'ANIMATION_UNFOLD_VERTICAL',
        method: 'ELASTIC_EASE_OUT',
        sequence: 'ANIMATION_BY_NODE',
        speed: 100
      },
      barWidth: '30px'
    },
    plotarea: {
      marginTop: '20px',
      marginRight: '20px',
      borderColor: '#B9BABC',
      borderWidth: '1px'
    },
    scaleX: {
      backgroundColor: 'white',
      item: {
        color: '#666',
        offsetY: '0px',
        rules: [{
          offsetY: '20px',
          rule: '%i%2==0'
        }]
      },
      itemsOverlap: true,
      labels: [
        'Product Revenue',
        'Services Revenue',
        'Fixed Costs',
        'Variable Costs',
        'Total'
      ],
      lineColor: '#B9BABC',
      lineWidth: '1px',
      offsetStart: '16px',
      offsetEnd: '16px',
      guide: {
        visible: false
      },
      tick: {
        visible: false
      }
    },
    scaleY: {
      values: '0:700:140',
      format: '%vK',
      guide: {
        lineStyle: 'solid'
      },
      item: {
        color: '#666'
      },
      lineColor: '#B9BABC',
      lineWidth: '1px',
      tick: {
        visible: false
      }
    },
    series: [{
      values: [420, 210, -170, -140, 'SUM']
    }]
  };

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