Bar Funnel Chart extension for Chart.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

BarFunnel Example Image

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

    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,

    screen shot 2017-04-26 at 16 56 44 screen shot 2017-04-26 at 16 56 51
    opened by mangiavellano 1
  • Fix image link

    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

    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

    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?

    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

    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
Chart.js
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

null 4 Mar 3, 2021
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
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.

Kuncoro Wicaksono 177 Jan 4, 2023
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
Progressive pie, donut, bar and line charts

Peity Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini <svg> pie, donut, line or bar chart. Basic Usage HTM

Ben Pickles 4.2k Jan 1, 2023
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.4k Jan 2, 2023
:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

C3.js 9.2k Jan 2, 2023
GPL version of Javascript Gantt Chart

dhtmlxGantt Getting started | Features | Follow us | License | Useful links dhtmlxGantt is an open source JavaScript Gantt chart that helps you illust

null 952 Dec 29, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

NAVER 5.4k Jan 1, 2023
:bar_chart: A library of modular chart components built on D3

Plottable Plottable is a library of chart components for creating flexible, custom charts for websites. It is built on top of D3.js and provides highe

Palantir Technologies 2.9k Dec 31, 2022
Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

Ian Webster 1.3k Dec 25, 2022
📈 A small, fast chart for time series, lines, areas, ohlc & bars

?? μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Leon Sorokin 7.5k Jan 7, 2023
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 6, 2023
The power of Chart.js in Jupyter !

The power of Chart.js in Jupyter Notebooks Installation You can install ipychart from your terminal using pip or conda: # using pip $ pip install ipyc

Nicolas H 68 Dec 8, 2022
Chart.js bindings for OCaml

chartjs-ocaml: OCaml bindings for Chart.js This library provides OCaml bindings for the Chart.js charting library and some popular plugins. Following

Alex Yanin 13 Aug 20, 2022
Java library for use with Chart.js javascript library

Chart.java Chart.java enables integration with the excellent Chart.js library from within a Java application. Usage example In Java: BarDataset datase

Marceau Dewilde 102 Dec 16, 2022
J2CL and GWT Charts library based on CHART.JS

Charba - J2CL and GWT Charts library based on CHART.JS What's Charba GWT Web toolkit doesn't have charting library available out of the box. There are

Pepstock.org 56 Dec 17, 2022
📊 Vue.js wrapper for Chart.js

vue-chartjs vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. Demo & Docs ?? Demo ?? Docs Compatibility

Jakub 5k Jan 7, 2023