Fixed Scale (invisible labels!)

A demo for using fixedScale.

Notice that initially most of the bar labels are not visible. To avoid such problem, consider setting labelsPosition to 'outside' (demo).

Chart

Loading...

show code

JS

import { race } from "racing-bars";

const options = {
  dataType: "csv",
  title: "Covid-19 Confirmed Cases",
  fixedScale: true,
};

race("/data/covid-19.csv", "#race", options);

Open in playground

TS

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

const options: Options = {
  dataType: "csv",
  title: "Covid-19 Confirmed Cases",
  fixedScale: true,
};

race("/data/covid-19.csv", "#race", options);

Open in playground

React

import RacingBars from "racing-bars/react";

export default function App() {
  const options = {
    dataUrl: "/data/covid-19.csv",
    dataType: "csv",
    title: "Covid-19 Confirmed Cases",
    fixedScale: true,
  };

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

Open in playground

Vue

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

  const options = {
    dataUrl: "/data/covid-19.csv",
    dataType: "csv",
    title: "Covid-19 Confirmed Cases",
    fixedScale: 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 = {
    dataType: "csv",
    title: "Covid-19 Confirmed Cases",
    fixedScale: true,
  };

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

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

Open in playground