Groups

A demo for groups (showGroups).

Chart

show code

JS

import { race } from "racing-bars";

const options = {
  title: "World Population",
  showGroups: true,
};

race("/data/population.csv", "#race", options);

Open in playground

TS

import { race, type Options } from "racing-bars";

const options: Options = {
  title: "World Population",
  showGroups: true,
};

race("/data/population.csv", "#race", options);

Open in playground

React

import RacingBars from "racing-bars/react";

export default function App() {
  const options = {
    dataUrl: "/data/population.csv",
    title: "World Population",
    showGroups: true,
  };

  return <RacingBars {...options}>Loading...</RacingBars>;
}

Open in playground

Vue

<script setup>
import RacingBars from "racing-bars/vue";

const options = {
  "dataUrl": "/data/population.csv",
  "title": "World Population",
  "showGroups": true
};
</script>

<template>
  <RacingBars v-bind="options">Loading...</RacingBars>
</template>

Open in playground

Svelte

<script>
import { onMount } from "svelte";
import { race } from "racing-bars";

const options = {
  "title": "World Population",
  "showGroups": true
};

onMount(() => {
  race("/data/population.csv", "#race", options);
});
</script>

<div id="race">Loading...</div>

Open in playground

Without groups

Chart

show code

JS

import { race } from "racing-bars";

const options = {
  dataType: "csv",
  showGroups: false,
};

race("/data/population.csv", "#race", options);

Open in playground

TS

import { race, type Options } from "racing-bars";

const options: Options = {
  dataType: "csv",
  showGroups: false,
};

race("/data/population.csv", "#race", options);

Open in playground

React

import RacingBars from "racing-bars/react";

export default function App() {
  const options = {
    dataUrl: "/data/population.csv",
    dataType: "csv",
    showGroups: false,
  };

  return <RacingBars {...options}>Loading...</RacingBars>;
}

Open in playground

Vue

<script setup>
import RacingBars from "racing-bars/vue";

const options = {
  "dataUrl": "/data/population.csv",
  "dataType": "csv",
  "showGroups": false
};
</script>

<template>
  <RacingBars v-bind="options">Loading...</RacingBars>
</template>

Open in playground

Svelte

<script>
import { onMount } from "svelte";
import { race } from "racing-bars";

const options = {
  "dataType": "csv",
  "showGroups": false
};

onMount(() => {
  race("/data/population.csv", "#race", options);
});
</script>

<div id="race">Loading...</div>

Open in playground