Skip to main content

Changing Options

Chart options can be changed during runtime using the API method changeOptions().

Example​

Click the links to change the number of bars:

Add Bar - Reset Bars

Code​

<a href="#" id="addBar">Add Bar</a> -
<a href="#" id="resetBars">Reset Bars</a>
<div id="race">Loading...</div>

<script type="module">
  import { race } from 'https://cdn.jsdelivr.net/npm/racing-bars';

  let topN = 5;
  const options = {
    dataType: 'csv',
    title: 'Number of Bars: ' + topN,
    topN,
  };

  const racer = await race('/data/population.csv', '#race', options);

  function addBar(e) {
    topN += 1;
    racer.changeOptions({
      title: 'Number of Bars: ' + topN,
      topN,
    });
    e.preventDefault();
  }

  function resetBars(e) {
    topN = 5;
    racer.changeOptions({
      title: 'Number of Bars: ' + topN,
      topN,
    });
    e.preventDefault();
  }

  document.getElementById('addBar').addEventListener('click', addBar);
  document.getElementById('resetBars').addEventListener('click', resetBars);
</script>