Bar Funnel Chart extension for Chart.js

Chart.js

Last update: Nov 24, 2022

Related tags

Data Visualization Chart.BarFunnel.js

Overview

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.

Comments

Changing values on hover
Hi there,

First, thanks for the plugin, very useful! I just installed and configured it, and I get a weird issue when I put my cursor on the graph (cf screenshots).

When the chart loads, everything is ok, but when I move my cursor on the different labels, the graph is automatically updated with different values.

Any ideas? Is there a way to disable the hover? I found this in the source code:

hover: { mode: "label" },

but there is nothing in the doc, so I don't know if there are other possible values.

Thanks for the feedback,
opened by mangiavellano 1
Fix image link

You can see this correctly rendered at https://github.com/benmccann/Chart.BarFunnel.js/tree/patch-1

Sorry it took me two attempts :-) Please squash the commits when you merge

opened by benmccann 0
How to implement BarFunnel into chartjs-node

I have tried to require BarFunnel.js as require('./plugins/chart.barfunnel');

but I am getting following error

ReferenceError: Chart is not defined at Object.<anonymous> (D:\RacDevelopment\Nodejs\chartsservice\src\charts\plugins\chart.barfunnel.js:195:15) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object.<anonymous> (D:\RacDevelopment\Nodejs\chartsservice\src\charts\index.js:5:1) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Module.require (module.js:596:17) at require (internal/module.js:11:18)

any solution to this?

opened by HCodemesh 0
Jumping percentages above bars

Just wanted to add that, if your chart has:

legend: { display: false }

It will cause the percentages above bars to jump (once the animation is complete and the user mouses over the bars)

I have found the solution is to modify chart.barFunnel.js and add at line 167: ctx.textBaseline = 'top';

so it becomes:

if (dataset.data[index] > 0) { // Draw Step Label ctx.textBaseline = 'top'; tx.font = vm.stepLabelFontSize + "px " + options.defaultFontFamily; ctx.fillStyle = vm.stepLabelColor; ctx.textAlign = "center"; ctx.fillText(label.toFixed(0) + "%", vm.x, vm.y - vm.stepLabelFontSize); }

This may be good to get into the next release!

opened by wrostek 0
Update to chart.js 2.6?

I've just tried out the example graph, and it works with chart.js 2.5, but not with 2.6 (no other changes).

Initial console error:

Chart.BarFunnel.js:88 Uncaught TypeError: this.calculateBarX is not a function at n.updateElement (Chart.BarFunnel.js:88)

opened by Yobmod 3
Rename to preferred naming convention chartjs-chart-barfunnel

It was suggested to me to that this was the preferred naming convention when I created https://github.com/chartjs/chartjs-chart-financial

We should rename the existing repos to match
enhancement

opened by benmccann 1

Owner

Chart.js

Simple, clean and engaging charts for designers and developers

GitHub

TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

4 Mar 3, 2021

A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.