Go to homepage

Projects /

Pie Chart

Data visualisation using SVG Radial Chart

View Demo

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

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

    <!-- other data items here -->

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


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.