Introducing RacingBars 📊

This content originally appeared on DEV Community and was authored by Hatem Hosny

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:

Option 1: Using a bundler

Install from npm

npm install racing-bars

then you can import it:

import { race } from "racing-bars";

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

const data = 'https://racing-bars.hatemhosny.dev/data/population.json';

race(data, "#race", options);

Option 2: Load from CDN

ESM

<div id="race" style="height: 80vh"></div>
<script type="module">
  import { race } from "https://cdn.jsdelivr.net/npm/racing-bars";

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

  const data = 'https://racing-bars.hatemhosny.dev/data/population.json';

  race(data, "#race", options);
</script>

UMD

<div id="race" style="height: 80vh"></div>
<script src="https://https://cdn.jsdelivr.net/npm/racing-bars/racing-bars.umd.js"></script>
<script>
  const options = {
    title: 'My Racing Bars',
    // ... other options
  };


  const data = 'https://racing-bars.hatemhosny.dev/data/population.json';

  // the UMD version provides the global object `racingBars`
  racingBars.race(data, "#race", options);
</script>

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.

License

MIT License © Hatem Hosny.

Let’s Get Started

Get started now!

This content originally appeared on DEV Community and was authored by Hatem Hosny