For a Dutch entrepreneurial support company, I designed and developed a custom charting library using HTML5 Canvas and JavaScript. The visualization tool allows users to compare business and personal development metrics across timeframes, offering a quadrant-based radial chart with intuitive iconography.
Each quadrant represents key themes: Personal Development, My Business, and Market, with visual comparisons (before vs after) for metrics such as revenue, entrepreneurship, and market position.
The library features custom Canvas rendering without external charting libraries, dynamic radial segments with colored performance deltas, data-driven tooltips with value comparisons, timeline comparisons, and icon-based storytelling for intuitive visual mapping. This enabled the company's users to track growth in a clear, engaging format, aiding in coaching, mentoring, and strategic reviews.
The technical challenge was to build a lightweight, dependency-free alternative to D3/Chart.js for customized radial visualizations. The solution involved a performant canvas rendering loop with arc generation, dynamic label positioning and scaling, custom legend tooltips with real-time data updates, and responsive design that adapts to different screen sizes.
The library provides a reusable charting module for rendering time-based comparative dashboards tailored for business coaching metrics. Each quadrant visually represents categorical insights with dual-value arcs, icons, and central timeline toggles.
The tool serves various use cases including business coaching to track entrepreneurial progress over time, personal development visualization for growth in key skill areas, market analysis to compare market position across different periods, and strategic reviews to present complex data in an accessible format.
The tool transforms complex business metrics into intuitive visual stories, making it easier for entrepreneurs to understand their growth trajectory and make informed decisions about their business development.