Skip to main content

Bar Labels

Bar labels are populated from the data item name field.

Position​

By default, the bar labels are positioned inside the bars.

Example:



In case some bar values are low (relative to others), or the label name are long, the labels may not be fully visible. In this case you may wish to set the labelsPosition option to 'outside'. This moves the label to the left side of the chart (outside the bars).

Example: {labelsPosition: 'outside'}



You may also adjust the width of the labels area using labelsWidth option. It sets the labels area width in pixels (default is 150).

Example: {labelsPosition: 'outside', labelsWidth: 200}

Style​

The style of the bar labels is set by CSS (see guide on themes and styles). You can override it like that:

<style>
  #race text.label {
    fill: red !important;
  }
</style>

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

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

  const options = {
    dataType: 'csv',
    title: 'World Population',
    subTitle: 'in millions',
  };
  race('/data/population.csv', '#race', options);
</script>