Skip to main content

Chart Controls

The chart behaviour can be contolled by:

Options​

  • If autorun option is set to true (default), the chart runs automatically when loaded.

  • When the current date is the last date in the dataset, if loop option is set to true, the chart replays from the start, otherwise it stops.

Control Buttons​

controlButtons option shows/hides buttons that control the chart (play/pause/skip-back/skip-forward).

  • The value "all" shows all buttons.
  • The value "play" shows one button (play or pause).
  • The value "none" hides all buttons.

Overlays​

overlays option shows/hides semi-transparent overlays that cover the chart and shows buttons that control it.
There are 2 overlays: "play" (at the beginning) and "repeat" (at the end).

  • The value "all" shows both overlays.
  • The value "play" shows an overlay at the beginning of the race with a play button.
  • The value "repeat" shows an overlay at the end of the race with a repeat button.
  • The value "none" hides both overlays.

Mouse Controls​

If mouseControls option is set to true, the chart can be controlled by mouse clicks.

  • Single-click toggles play/pause.
  • Double-click triggers skip-forward.
  • Triple-click triggers skip-back.

Keyboard Controls​

If keyboardControls option is set to true, the chart can be controlled by the keyboard.

  • The key A triggers skip-back.
  • The key S and spacebar toggle play/pause.
  • The key D triggers skip-forward.

If the currently active element is an input or a textarea (i.e. the user is typing), the keyboard events are ignored.

Note that if there are multiple charts in the page, all the charts with the option keyboardControls enabled, will be affected.

API​

The race method returns an object that allows interaction with the chart. See API section for details.

Example​

API command:

Code​

<div class="apiControl">
  <span>API command: </span>
  <button disabled>Play/Pause</button>
</div>
<div id="race"></div>

<script type="module">
  import { race } from 'https://cdn.jsdelivr.net/npm/racing-bars';
  const options = {
    dataType: 'csv',
    title: 'Chart Controls Demo',
    autorun: false,
    loop: false,
    controlButtons: 'all',
    overlays: 'all',
    mouseControls: true,
    keyboardControls: true,
  };

  const racer = await race('/data/population.csv', '#race', options);
  const button = document.querySelector('.apiControl button');
  button.disabled = false;
  button.addEventListener('click', () => {
    racer.toggle();
  });
</script>