DEV Community

Cover image for Introducing RacingBars 📊
Hatem Hosny
Hatem Hosny

Posted on

Introducing 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

Getting Started

Usage options include:

Option 1: Using a bundler

Install from npm

npm install racing-bars
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)