Open SourceAug 2019 – Jan 2020

faberjs & redraphael — open source contributions at FusionCharts

Contributed to two FusionCharts-owned open source libraries: faberjs (CSS Grid in JavaScript) and redraphael (cross-browser SVG/VML vector graphics renderer).

faberjs: legend items per row/column feature · redraphael: bug fixes

The problem

FusionCharts maintained two open source libraries that underpinned their rendering engine. As a contributor on the FusionCharts team, Siddhartha worked on both.

faberjs (github.com/fusioncharts/faberjs) — a FusionCharts-owned JavaScript implementation of CSS Grid layout, used internally to position chart elements. The legend component needed finer control over how many items appear per row or column, which required a new layout feature in faberjs itself.

redraphael (github.com/fusioncharts/redraphael) — a FusionCharts-owned fork of the Raphaël vector graphics library, extended to support SVG in modern browsers and VML for legacy IE. Bug fixes were needed to maintain cross-browser rendering stability.

What I built

faberjs (Aug 2019): Implemented the feature to control the number of legend items per row or column using faberjs' grid layout model. This gave FusionCharts developers and end users precise control over legend layout density — useful for charts with many series where the default wrapping was inappropriate.

redraphael (Dec 2019 – Jan 2020): Bug fixes on the SVG/VML renderer. redraphael is the lowest-level rendering primitive in FusionCharts — any bug here affects every chart type. Fixes contributed to cross-browser rendering stability.

Approaches considered

✕Implement legend layout control directly in FusionCharts — rejected: the layout logic belonged in faberjs; duplicating it would violate the separation of concerns the library was built around

✕Replace redraphael with a modern SVG-only renderer — considered at the org level; not done during this period due to IE support requirements

✓Contribute upstream to both libraries — chosen: keeps the shared codebase correct, improvements flow back to any other consumer of the libraries

Architecture

faberjs: CSS Grid specification implemented in JavaScript — computes grid track sizing, line placement, and area layout using the grid algorithm. The legend-items-per-row/column feature hooks into the explicit track sizing phase.
redraphael: two rendering backends behind a unified API — SVG path for modern browsers, VML (Vector Markup Language) for IE8 and below. Both share the same Raphaël-compatible API surface.

Result

faberjs legend control feature shipped into FusionCharts and used in production across thousands of FusionCharts deployments. redraphael fixes improved cross-browser rendering stability. Both repositories are public at github.com/fusioncharts/faberjs and github.com/fusioncharts/redraphael.

JavaScriptCSS GridSVGVMLVector Graphics

Back to all work