Chart.BarFunnel.js
Bar Funnel Chart extension for Chart.js
Install / Use
/learn @chartjs/Chart.BarFunnel.jsREADME
Chart.BarFunnel.js
Provides a Bar Funnel Chart for use with Chart.js
Documentation
To create a Bar Funnel Chart, include Chart.BarFunnel.js after Chart.js and then create the chart by setting the type attribute to 'barFunnel'
var chart = new Chart({
type: 'barFunnel',
data: dataObject
});
Configuration
The Bar Funnel chart colored region and step labels can be configured by placing options into the config that is passed to the chart upon creation.
new Chart({
config: {
region: {
display: true,
borderColor: "#F6C85F",
backgroundColor: "rgba(246, 200, 95, 0.2)"
},
elements: {
rectangle: {
stepLabel: {
display: true,
fontSize: 20
// color: "red"
}
}
}
}
});
Example

License
Chart.BarFunnel.js is available under the MIT license.
Bugs & issues
When reporting bugs or issues, if you could include a link to a simple jsbin or similar demonstrating the issue, that would be really helpful.
Related Skills
node-connect
348.2kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
108.9kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
348.2kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
348.2kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
