jQuery Funnel Charts are used to represent multiple stages in a process and are widely used in visualizing sales process. Funnel Charts are fully customizable & are interactive. Given example shows simple jQuery Funnel Chart along with source code that you can edit in-browser or save to run it locally.
window.onload = function () { var options = { animationEnabled: true, theme: "light2", //"light1", "light2", "dark1", "dark2" title: { text: "Sales Analysis - March 2017" }, data: [{ type: "funnel", toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>", indexLabel: "{label} ({percentage}%)", dataPoints: [ { y: 1800, label: "Leads" }, { y: 1552, label: "Initial Communication" }, { y: 1320, label: "Customer Evaluation" }, { y: 885, label: "Negotiation" }, { y: 678, label: "Order Received" }, { y: 617, label: "Payment" } ] }] }; calculatePercentage(); $("#chartContainer").CanvasJSChart(options); function calculatePercentage() { var dataPoint = options.data[0].dataPoints; var total = dataPoint[0].y; for (var i = 0; i < dataPoint.length; i++) { if (i == 0) { options.data[0].dataPoints[i].percentage = 100; } else { options.data[0].dataPoints[i].percentage = ((dataPoint[i].y / total) * 100).toFixed(2); } } } }
Index / Data Labels can be placed inside the funnel section by using the indexLabelPlacement property. Other common customizations include valueRepresents, color, fillOpacity, neckHeight, neckWidth etc.