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
Post a Comment