React / CreateJS: custom charts in HTML5 Canvas (ES5)

This snippet shows how to create a React component using EaselJS and TweenJS (part of CreateJS suite) to draw a custom chart on HTML5 Canvas.

USAGE (JSX):

PROPERTIES DETAILS

  • width or height: the size of the chart
  • animationSpeed: element animation speed (in ms)
  • staggerDelay: delay between elements (in ms)
  • hpadding: padding between columns
  • rotation: rotation animation effect (0-360)
  • data: an array of percentages [10,40,100,20,...]

LIVE DEMO


SOURCE CODE

App.js

CanvasChart.js

Fabio Biondi

I am an italian developer with over 10+ years of experience in developing custom user interfaces and interactive applications for any screen and device using the latest web technologies - HTML5, SVG, Canvas, ES2015, CSS3 - the latest libraries - React, AngularJS, D3.js, CreateJS - and many other tools - Gulp, WebPack, LESS/SASS but also Sketch, Balsamiq, PS and AI.