Creating a sales funnel chart in Chart JS is possible. However, it requires some advance plugin customization to get it working. What we need to understand is how to draw custom shapes which converts the bars into a funnel.
If you are ready for some advance level Chart.js. In that case this video will be a great challenge. It will track the sales funnel and every step of the funnel, the funnel shrinks based on the values of dataset.
Breaking Down the Sales Funnel Chart in Chart JS
The Sales Funnel Chart consist of multiple items as we will maximize all our Chart.js knowledge to create this unique chart. If you look closely you will notice that the chart is in essence a horizontal bar chart. However, it does not start at the very left but keeps it position to the center of the X-axis. This is due to the floating bar structure that we use.
Chart.js has a floating bar structure which allows bars to float in mid air instead of being pulled to the very beginning of the chart. In this case it is to the very left. The floating bar structure has a different data structure that we use.
Once we are done with that we can remove all the gridlines to keep the sales funnel nice and clear. Once everything is cleared we can start drawing this funnel or grey cone shaped element. The cone or funnel shaped elements are independent of the bars. But, they create a visual that makes it look like it is all one single shape.
The cone shape coordinates are crucial and for this we must know how to draw shapes in the canvas API. Once you understand how to connect each line to create a shape the element will color be easy.
Finally we will need to add text on the bar it self. As each bar or step of the funnel represents a certain value. Once that is done your Sales Funnel Chart in Chart.js is good to go.
English 
Spanish 
French 
Vietnamese