🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Radial Bar Chart

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

Copy: View demo

Dependencies

All components are based on CodyFrame.

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

✅ Project duplicated

✅ Project created

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