Skip to content

Latest commit

 

History

History
152 lines (106 loc) · 6.59 KB

README.md

File metadata and controls

152 lines (106 loc) · 6.59 KB

Ceasefire_Now-techforpalestine.org

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.

racing-bars: npm version racing-bars: npm downloads racing-bars: jsdelivr downloads license - MIT racing-bars: GitHub repo

🎡 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

then you can import it:

import { race } from "racing-bars";

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

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

Open in LiveCodes

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
  };

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

Open in LiveCodes

UMD

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

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

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.