Mouse Controls

A demo for using mouseControls. See the guide on chart controls.

Click on the chart to toggle play/pause, double-click to trigger skip-forward and triple-click to trigger skip-back.

Notice that this does not interfere with click/double-click/triple-click on group legends as documented in showGroups

Chart

Loading...

show code

JS

import { race } from "racing-bars";

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

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

Open in playground

TS

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

const options: Options = {
  dataType: "csv",
  mouseControls: true,
  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",
    dataType: "csv",
    mouseControls: true,
    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",
    dataType: "csv",
    mouseControls: true,
    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 = {
    dataType: "csv",
    mouseControls: true,
    showGroups: true,
  };

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

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

Open in playground