Go to homepage

Projects /

Radial Bar Chart

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

View Demo

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 -->

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

    <!-- other % values -->

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).


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.