chsk

chsk is a charting library for React. It aims to provide a stable toolkit for creating graphs for static publications, dynamic components for dashboards, and animated stories for presentations.

The library provides infrastructure for building visualizations from the ground up. It includes components for common chart elements such as axes and labels. It also includes hooks and data-processing functions. These elements can be combined to create commonly-used charts such as line or bar charts, or entirely original and complex visualizations.

Documentation is available here.

A gallary of examples is available here.

Features

The library provides components for several common chart types:

bar charts
line charts
scatter charts
strip charts
quantile charts / box plots
heat maps
set / Venn diagrams
upset diagrams
schedule / Gant charts

The core library and add-on packages also provide additional elements to supplement the base charts:

legends
animated counters
animated lines
styled text labels
text labels beside an interval line, bracket, or brace
symbols
block arrows
highlighting
themes
chart state
milestone animation
...

Example

The animation below shows a custom bar chart. The recording starts with an empty surface, and parts of the chart enter into view in stages. Later, the dataset is updated and the bars readjust to display the new information.

All data in the animation are synthetic. A live version of the chart is available here.

Install

To start using the library, install package @chsk/core and any add-on packages from npm.

# required
npm install @chsk/core
# optional (pick any subset of add-on packages)
npm install @chsk/annotation @chsk/band @chsk/matrix @chsk/set @chsk/themes @chsk/xy

Credits

Thanks to all the maintainers and contributors of the packages listed in packages.json.

Key dependencies include react for managing state, lodash for general data processing, d3 for data processing related to visualization, and framer-motion for managing animations.

Special thanks also to charting libraries recharts and nivo, which are important influences.

Contributing