Gallery Back to Gallery

Horizontal Funnel Chart with Styled Guides

​
Powered by ZingChart 
<!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"]; // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'hfunnel',
      theme: 'classic',
      backgroundColor: '#fff',
      backgroundColor2: '#f1f1f1',
      plot: {
        tooltip: {
          shadow: false,
        },
        tooltipText: '%v Actions',
        offset: '40px',
        scales: 'scale-x,scale-y-2',
      },
      plotarea: {
        margin: '75px 25px 50px 80px',
      },
      scaleX: {
        values: ['Website<br>Entry'],
        item: {
          fontSize: '14px',
          offsetY: '-20px',
        },
      },
      scaleY: {
        visible: false,
      },
      scaleY2: {
        values: [
          'Site Visits',
          'Trials Started',
          'Quote<br>Requests',
          'Checkout',
          'Sold',
        ],
        guide: {
          items: [{
              backgroundColor: '#fff',
            },
            {
              backgroundColor: '#eee',
            },
            {
              backgroundColor: '#ddd',
            },
            {
              backgroundColor: '#ccc',
            },
            {
              alpha: 0.2,
              backgroundColor: 'green',
            },
          ],
        },
      },
      series: [{
          values: [38005],
          backgroundColor: '#5FB4E8',
          borderColor: '#000000',
          shadow: false,
        },
        {
          values: [19024],
          backgroundColor: '#EBC765',
          borderColor: '#000000',
          shadow: false,
        },
        {
          values: [8965],
          backgroundColor: '#8FB550',
          borderColor: '#000000',
          shadow: false,
        },
        {
          values: [2848],
          backgroundColor: '#D17549',
          borderColor: '#000000',
          shadow: false,
        },
        {
          values: [999],
          backgroundColor: '#8E468E',
          borderColor: '#000000',
          shadow: false,
        },
      ],
    };

    // 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>
// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'hfunnel',
  theme: 'classic',
  backgroundColor: '#fff',
  backgroundColor2: '#f1f1f1',
  plot: {
    tooltip: {
      shadow: false,
    },
    tooltipText: '%v Actions',
    offset: '40px',
    scales: 'scale-x,scale-y-2',
  },
  plotarea: {
    margin: '75px 25px 50px 80px',
  },
  scaleX: {
    values: ['Website<br>Entry'],
    item: {
      fontSize: '14px',
      offsetY: '-20px',
    },
  },
  scaleY: {
    visible: false,
  },
  scaleY2: {
    values: [
      'Site Visits',
      'Trials Started',
      'Quote<br>Requests',
      'Checkout',
      'Sold',
    ],
    guide: {
      items: [
        {
          backgroundColor: '#fff',
        },
        {
          backgroundColor: '#eee',
        },
        {
          backgroundColor: '#ddd',
        },
        {
          backgroundColor: '#ccc',
        },
        {
          alpha: 0.2,
          backgroundColor: 'green',
        },
      ],
    },
  },
  series: [
    {
      values: [38005],
      backgroundColor: '#5FB4E8',
      borderColor: '#000000',
      shadow: false,
    },
    {
      values: [19024],
      backgroundColor: '#EBC765',
      borderColor: '#000000',
      shadow: false,
    },
    {
      values: [8965],
      backgroundColor: '#8FB550',
      borderColor: '#000000',
      shadow: false,
    },
    {
      values: [2848],
      backgroundColor: '#D17549',
      borderColor: '#000000',
      shadow: false,
    },
    {
      values: [999],
      backgroundColor: '#8E468E',
      borderColor: '#000000',
      shadow: false,
    },
  ],
};

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

.zc-ref {
  display: none;
}
Line Chart with Crosshair Tooltips 240/281 Vertical Funnel with Null Values

Related Documentation: