RacingBars

Bar chart race made easy 🎉

_RacingBars_ is an open-source, light-weight (~45kb gzipped), easy-to-use, and feature-rich javascript library for bar chart race, based on D3.js.

_RacingBars_ is available for JavaScript, TypeScript, React, Vue and Svelte.


🎡 Try it now on the online playground.

📖 Documentations

Features

- Easy to use.
- Light-weight (~45kb gzipped).
- Highly configurable, with sensible defaults.
- Available for vanilla JavaScript,TypeScript, React, Vue and Svelte.
- Responsive / configurable chart size.
- Light and dark themes.
- Good looking default colors, also configurable with color maps or palettes.
- Customizable title, sub-title, caption and date counter. They all allow displaying calculated/dynamic values.
- Flexible handling for various data shapes and formats.
- Data manipulation for data transformation, cumulative sums and filling date gaps.
- Icons.
- Labels on the bars or outside.
- Groups with filters.
- Bar highlight and selection.
- Autorun or start manually.
- Allows looping.
- Optional fixed scale.
- Custom start/end dates.
- Allows changing speed.
- Controls for play/pause/skip-back/skip-forward (chart controls).
- Overlays for play/repeat (chart controls).
- Keyboard and mouse controls (chart controls).
- Multiple charts can be inserted in the same page.
- API to control the chart.
- Emits custom DOM events.
- Comprehensive documentation, with usage guides, examples gallery and an online playground.
- Open-source (MIT License).

Getting Started

Usage options include:

$3

Install from npm

``shell
npm install racing-bars
`

then you can import it:

`js
import { race } from "racing-bars";

const options = {
title: 'My Racing Bars',
// ... other options
};

race("/data.json", "#race", options);
`

Open in LiveCodes

$3

#### ESM

`html




`

Open in LiveCodes

#### UMD

`html





``

Open in LiveCodes

Please refer to documentation website for usage, data preparation, chart options, API and more.

Examples Gallery

See gallery for usage examples.

Playground

Go to the online playground to try out the library.

Contribution

Contributions are welcome and highly appreciated.

Before contributing, please read the code of conduct.

Please open an issue to discuss your ideas before creating a pull request.

License

MIT License © Hatem Hosny.

Sponsor 💚

Please consider sponsoring the project to support its maintenance and continued development.