chart.js2 - chart.js plugin for making waterfall charts -


i want create chart.js plugin create waterfall charts.

i new working chart.js. thinking extend bar-chart create waterfall chart.

the draw function in bar chart controller follows:

draw: function(ease) {             var me = this;             var easingdecimal = ease || 1;             helpers.each(me.getmeta().data, function(rectangle, index) {                 var d = me.getdataset().data[index];                 if (d !== null && d !== undefined && !isnan(d)) {                     rectangle.transition(easingdecimal).draw();                 }             }, me);         }, 

the full bar chart controller js file can found here: https://github.com/chartjs/chart.js/tree/master/src/controllers

i created chartjs plugin waterfall charts.

see https://github.com/martindawson/chartjs-plugin-waterfall

this plugin works checking if of datasets contain property called dummystack set true. stack property must used in conjunction dummystack plugin work properly. if dummystack true hides label, tooltip , sets color invisible. when use stacking creates affect of floating bar shown in image above can use waterfall charts chartjs-2 doesn't support waterfall charts default.

import waterfallplugin 'chartjs-plugin-waterfall';  var chart = new chart(ctx, {     plugins: [waterfallplugin] });  const data = {   datasets: [     {       label: 'closing costs',       data: [50],       backgroundcolor: '#e8cdd7',       stack: 'stack 1',     },     {       label: 'purchase price',       data: [700],       backgroundcolor: '#d29baf',       stack: 'stack 1',     },     {       data: [200],       dummystack: true,       stack: 'stack 2',     },     {       label: 'opening loan balance',       data: [550],       backgroundcolor: '#bb6987',       stack: 'stack 2',     },     {       label: 'initial cash investment',       data: [200],       backgroundcolor: '#a53860',       stack: 'stack 3',     },   ], }; 

it has line steps bar bar.


Comments