Radial Bar Chart

A Radial SVG graph used to display a list of percentage values.

How to

Use this component to create a radial chart to represent a list of percentage values.

Initialization #

By default, each element with a class .js-radial-bar will be initialized. Alternatively, you can use the RadialBar object to initialize your chart dynamically.

new RadialBar({
  element: radialChart, // your radial chart element
  animate: 'off' // could be 'off' or 'on'
});

The plugin will search for items with a class of .js-radial-bar__value and use their content to create the chart (you should provide % values).

<div class="radial-bar js-radial-bar">
  <div class="radial-bar__area js-radial-bar__area" aria-hidden="true">
    <!-- radial bars are created in JS -->
  </div>

  <ul>
    <li>
      <span class="text-sm">Label 1 (<i class="js-radial-bar__value" data-radial-bar-color="color-primary">43%</i>)</span>
    </li>

    <!-- other % values -->
  </ul>
</div>

Each .js-radial-bar__value element can have a data-radial-bar-color attribute that will be used to add a custom class to the corresponding element in the chart (e.g., use a color utility class).

Animation #

You can animate the chart data when it enters the viewport (by default, the animation is off).
Add a data-radial-bar-animation="on" to the .js-radial-bar element (or use the animate option of the RadialBar object).

Categories

• Data Display > Chart

Bug report & feedback

Component Github page ↗