Date Counter (data function)

This example shows the use of data functions.
The dateCounter uses a function to show "[count] of [total]"

Chart

Loading...

show code

JS

import { race } from "racing-bars";

const options = {
  dateCounter: (currentDate, dateSlice, allDates) =>
    `${allDates.indexOf(currentDate) + 1} of ${allDates.length}`,
};

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

Open in playground

TS

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

const options: Options = {
  dateCounter: (currentDate, dateSlice, allDates) =>
    `${allDates.indexOf(currentDate) + 1} of ${allDates.length}`,
};

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",
    dateCounter: (currentDate, dateSlice, allDates) =>
      `${allDates.indexOf(currentDate) + 1} of ${allDates.length}`,
  };

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

Open in playground

Vue

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

  const options = {
    dataUrl: "/data/population.csv",
    dateCounter: (currentDate, dateSlice, allDates) =>
      `${allDates.indexOf(currentDate) + 1} of ${allDates.length}`,
  };
</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 = {
    dateCounter: (currentDate, dateSlice, allDates) =>
      `${allDates.indexOf(currentDate) + 1} of ${allDates.length}`,
  };

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

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

Open in playground