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.
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 🚀
This content originally appeared on DEV Community and was authored by Hatem Hosny
Hatem Hosny | Sciencx (2024-08-19T14:02:01+00:00) Introducing RacingBars 📊. Retrieved from https://www.scien.cx/2024/08/19/introducing-racingbars-%f0%9f%93%8a/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.