⚡️ Black Friday ends in 1 day - 50% off CodyHouse Pro Lifetime →

Projects

Progress value is 30%

Pie Chart

Data visualisation using SVG Radial Chart

View Demo

Dependencies

All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How To

Use this component to create radial charts to represent your data.

Initialization #

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

new PieChart({
  element: pieCharts, // your pie chart element
  type: 'pie', // could be pie or donut
  animate: 'off' // could be 'off' or 'on'
});

The plugin will search for items with a class of .js-pie-chart__value and use their content to create the chart. You can use both integers or percentage values:

<div class="pie-chart js-pie-chart">
  <div class="pie-chart__area block flex-shrink-0 js-pie-chart__area">
    <!-- svg will be created here using javascript -->
  
    <div class="pie-chart__tooltip is-hidden js-pie-chart__tooltip"></div> <!-- tooltip element -->
  </div>

  <ul class="grid gap-xs">
    <li class="flex items-center">
      <span>Set 1 <i class="sr-only js-pie-chart__value" data-pie-chart-style="fill: var(--color-primary);">43%</i></span>
    </li>

    <li class="flex items-center">
      <span>Set 2 <i class="sr-only js-pie-chart__value" data-pie-chart-style="fill: var(--color-contrast-low);">28%</i></span>
    </li>

    <!-- other data items here -->
  </ul>
</div>

Each .js-pie-chart__value element can have a data-pie-chart-style attribute that will be added to the corresponding element in the chart (e.g., used to set a fill color).

Options #

There are some options you can use to customize your radial chart:

  • Type: this could be either pie or donut (default is pie). To change this value, add a data-pie-chart-type to the .js-pie-chart element (or use the type option of the PieChart object);
  • Animation: animate the chart data when it enters the viewport (default is off). You can modify it adding a data-pie-chart-animation="on" to the .js-pie-chart element (or using the animate option of the PieChart object).

Project duplicated

Project created

Globals imported

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