Filling Date Gaps

A demo for using fillDateGapsInterval and fillDateGapsValue.

See the guide on Filling Date Gaps.

fillDateGapsInterval: null (default)

Chart

Loading...

show code

JS

import { race } from "racing-bars";

const options = {
  fillDateGapsInterval: null,
  dataTransform: function multiplyBy1000(data) {
    return data.map((d) => ({
      ...d,
      value: Number(d.value) * 1000,
    }));
  },
};

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

Open in playground

TS

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

const options: Options = {
  fillDateGapsInterval: null,
  dataTransform: function multiplyBy1000(data) {
    return data.map((d) => ({
      ...d,
      value: Number(d.value) * 1000,
    }));
  },
};

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",
    fillDateGapsInterval: null,
    dataTransform: function multiplyBy1000(data) {
      return data.map((d) => ({
        ...d,
        value: Number(d.value) * 1000,
      }));
    },
  };

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

Open in playground

Vue

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

  const options = {
    dataUrl: "/data/population.csv",
    fillDateGapsInterval: null,
    dataTransform: function multiplyBy1000(data) {
      return data.map((d) => ({
        ...d,
        value: Number(d.value) * 1000,
      }));
    },
  };
</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 = {
    fillDateGapsInterval: null,
    dataTransform: function multiplyBy1000(data) {
      return data.map((d) => ({
        ...d,
        value: Number(d.value) * 1000,
      }));
    },
  };

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

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

Open in playground

fillDateGapsInterval, "month", fillDateGapsValue: "interpolate"

Chart

Loading...

show code

JS

import { race } from "racing-bars";

const options = {
  fillDateGapsInterval: "month",
  fillDateGapsValue: "interpolate",
  dataTransform: function multiplyBy1000(data) {
    return data.map((d) => ({
      ...d,
      value: Number(d.value) * 1000,
    }));
  },
};

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

Open in playground

TS

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

const options: Options = {
  fillDateGapsInterval: "month",
  fillDateGapsValue: "interpolate",
  dataTransform: function multiplyBy1000(data) {
    return data.map((d) => ({
      ...d,
      value: Number(d.value) * 1000,
    }));
  },
};

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",
    fillDateGapsInterval: "month",
    fillDateGapsValue: "interpolate",
    dataTransform: function multiplyBy1000(data) {
      return data.map((d) => ({
        ...d,
        value: Number(d.value) * 1000,
      }));
    },
  };

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

Open in playground

Vue

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

  const options = {
    dataUrl: "/data/population.csv",
    fillDateGapsInterval: "month",
    fillDateGapsValue: "interpolate",
    dataTransform: function multiplyBy1000(data) {
      return data.map((d) => ({
        ...d,
        value: Number(d.value) * 1000,
      }));
    },
  };
</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 = {
    fillDateGapsInterval: "month",
    fillDateGapsValue: "interpolate",
    dataTransform: function multiplyBy1000(data) {
      return data.map((d) => ({
        ...d,
        value: Number(d.value) * 1000,
      }));
    },
  };

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

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

Open in playground

fillDateGapsInterval, "month", fillDateGapsValue: "last"

Chart

Loading...

show code

JS

import { race } from "racing-bars";

const options = {
  fillDateGapsInterval: "month",
  fillDateGapsValue: "last",
  dataTransform: function multiplyBy1000(data) {
    return data.map((d) => ({
      ...d,
      value: Number(d.value) * 1000,
    }));
  },
};

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

Open in playground

TS

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

const options: Options = {
  fillDateGapsInterval: "month",
  fillDateGapsValue: "last",
  dataTransform: function multiplyBy1000(data) {
    return data.map((d) => ({
      ...d,
      value: Number(d.value) * 1000,
    }));
  },
};

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",
    fillDateGapsInterval: "month",
    fillDateGapsValue: "last",
    dataTransform: function multiplyBy1000(data) {
      return data.map((d) => ({
        ...d,
        value: Number(d.value) * 1000,
      }));
    },
  };

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

Open in playground

Vue

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

  const options = {
    dataUrl: "/data/population.csv",
    fillDateGapsInterval: "month",
    fillDateGapsValue: "last",
    dataTransform: function multiplyBy1000(data) {
      return data.map((d) => ({
        ...d,
        value: Number(d.value) * 1000,
      }));
    },
  };
</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 = {
    fillDateGapsInterval: "month",
    fillDateGapsValue: "last",
    dataTransform: function multiplyBy1000(data) {
      return data.map((d) => ({
        ...d,
        value: Number(d.value) * 1000,
      }));
    },
  };

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

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

Open in playground