Pie Chart

Data visualisation using SVG Radial Chart

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

Categories

• Data Display > Chart

Bug report & feedback

Component Github page ↗