Vertical Funnel with Null Values

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/1EDVJ759

<!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>
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

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


<body class="zc-body">
  
  <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"]; // DEFINE DATA
    // -----------------------------
    let chartData = [{
        values: [100, null, null],
        backgroundColor: '#00c322',
        borderColor: '#000000',
        entry: {
          values: [1, 1, 1],
          padding: '5px',
          labels: ['OP 1', null, null],
          offsetX: '-5px',
        },
        shadow: false,
      },
      {
        values: [90, 90, null],
        backgroundColor: '#03899c',
        borderColor: '#000000',
        entry: {
          values: [1, 1, 1],
          padding: '5px',
          labels: ['OP 2', 'TX', null],
          offsetX: '-5px',
        },
        shadow: false,
      },
      {
        values: [75, 80, 70],
        backgroundColor: '#ff7a00',
        borderColor: '#000000',
        exit: {
          values: [null, 1, null],
          padding: '5px',
          labels: [null, 'OP 3', null],
          offsetX: '5px',
        },
        shadow: false,
      },
      {
        values: [55, 50, 40],
        backgroundColor: '#ff1300',
        borderColor: '#000000',
        shadow: false,
      },
      {
        values: [20, 30, 10],
        borderColor: '#000000',
        exit: [{
            values: [null, null, 1],
            padding: '5px',
            labels: [null, null, 'OUT 1'],
            offsetX: '5px',
            offsetY: '-3px',
          },
          {
            values: [null, null, 1],
            padding: '5px',
            labels: [null, null, 'OUT 2'],
            offsetX: '5px',
            offsetY: '3px',
          },
        ],
        shadow: false,
      },
    ];

    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'vfunnel',
      theme: 'classic',
      backgroundColor: '#fff',
      backgroundColor2: '#f1f1f1',
      plot: {
        tooltip: {
          shadow: false,
        },
        tooltipText: '%v Actions',
        offset: '40px',
        scales: 'scale-x-2,scale-y-2',
      },
      plotarea: {
        margin: '75 25 50 125',
      },
      scaleX2: {
        values: ['PROCESS 1', 'PROCESS 2', 'PROCESS 3'],
        item: {
          bold: true,
          fontSize: '14px',
          offsetY: '-20px',
        },
      },
      scaleY: {
        values: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
        guide: {
          items: [{
              backgroundColor: 'none',
            },
            {
              backgroundColor: '#DDE4E7',
            },
          ],
        },
        item: {
          fontSize: '14px',
          fontStyle: 'italic',
          offsetX: '-40px',
        },
      },
      scaleY2: {
        item: {
          visible: false,
        },
      },
      series: chartData,
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
    });
  </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">
  
    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>

  </body>
</html>

// DEFINE DATA
// -----------------------------
let chartData = [
  {
    values: [100, null, null],
    backgroundColor: '#00c322',
    borderColor: '#000000',
    entry: {
      values: [1, 1, 1],
      padding: '5px',
      labels: ['OP 1', null, null],
      offsetX: '-5px',
    },
    shadow: false,
  },
  {
    values: [90, 90, null],
    backgroundColor: '#03899c',
    borderColor: '#000000',
    entry: {
      values: [1, 1, 1],
      padding: '5px',
      labels: ['OP 2', 'TX', null],
      offsetX: '-5px',
    },
    shadow: false,
  },
  {
    values: [75, 80, 70],
    backgroundColor: '#ff7a00',
    borderColor: '#000000',
    exit: {
      values: [null, 1, null],
      padding: '5px',
      labels: [null, 'OP 3', null],
      offsetX: '5px',
    },
    shadow: false,
  },
  {
    values: [55, 50, 40],
    backgroundColor: '#ff1300',
    borderColor: '#000000',
    shadow: false,
  },
  {
    values: [20, 30, 10],
    borderColor: '#000000',
    exit: [
      {
        values: [null, null, 1],
        padding: '5px',
        labels: [null, null, 'OUT 1'],
        offsetX: '5px',
        offsetY: '-3px',
      },
      {
        values: [null, null, 1],
        padding: '5px',
        labels: [null, null, 'OUT 2'],
        offsetX: '5px',
        offsetY: '3px',
      },
    ],
    shadow: false,
  },
];

// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'vfunnel',
  theme: 'classic',
  backgroundColor: '#fff',
  backgroundColor2: '#f1f1f1',
  plot: {
    tooltip: {
      shadow: false,
    },
    tooltipText: '%v Actions',
    offset: '40px',
    scales: 'scale-x-2,scale-y-2',
  },
  plotarea: {
    margin: '75 25 50 125',
  },
  scaleX2: {
    values: ['PROCESS 1', 'PROCESS 2', 'PROCESS 3'],
    item: {
      bold: true,
      fontSize: '14px',
      offsetY: '-20px',
    },
  },
  scaleY: {
    values: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
    guide: {
      items: [
        {
          backgroundColor: 'none',
        },
        {
          backgroundColor: '#DDE4E7',
        },
      ],
    },
    item: {
      fontSize: '14px',
      fontStyle: 'italic',
      offsetX: '-40px',
    },
  },
  scaleY2: {
    item: {
      visible: false,
    },
  },
  series: chartData,
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: 'myChart',
  data: chartConfig,
});

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

.zc-ref {
  display: none;
}

Horizontal Funnel Chart with Styled Guides 241/281 Chord Chart with Title Element and Legend

Vertical Funnel with Null Values

Related Documentation: