🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!
SponsorsBecome a sponsor

Pie Chart

Framework7 comes with simple Pie Chart component. It produces nice looking fully responsive SVG charts.

Pie Chart Layout

Because Pie Chart SVG is generated by JavaScript its HTML layout is as simple as possible:

<!-- Pie chart element -->
<div class="pie-chart"></div>

Pie Chart App Methods

Now we need to create/initialize the Pie Chart. Let's look at related App methods to work with it:

app.pieChart.create(parameters)- create Pie Chart instance

  • parameters - object. Object with Pie Chart parameters

Method returns created Pie Chart's instance

app.pieChart.destroy(el)- destroy Pie Chart instance

  • el - HTMLElement or string (with CSS Selector) or object. Pie Chart element or Pie Chart instance to destroy.

app.pieChart.get(el)- get Pie Chart instance by HTML element

  • el - HTMLElement or string (with CSS Selector). Pie Chart element.

Method returns Pie Chart's instance

app.pieChart.update(parameters)- update/rerender Pie Chart SVG according to passed parameters

  • parameters - object. Object with Pie Chart parameters

Method returns Pie Chart's instance

Pie Chart Parameters

Now let's look at list of available parameters we need to create Pie Chart:

ParameterTypeDefaultDescription
elHTMLElement
string		Pie Chart element. HTMLElement or string with CSS selector of Pie Chart element. Generated SVG will be inserted into this element
datasetsarray[]Chart data sets. Each object in datasets array has the following properties:
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
sizenumber320Generated SVG image size (in px)
tooltipbooleanfalseEnables tooltip on hover
datasetsarray[]Chart data sets. Each object in datasets array has the following properties:
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
formatTooltipfunction(data)Custom render function that must return tooltip's HTML content. Received data object has the following properties:
index: number;
value: number;
label: string;
color: string;
percentage: number;
onobject

Object with events handlers. For example:

var pieChart = app.pieChart.create({
  el: '.pie-chart',
  on: {
    beforeDestroy: function () {
      console.log('Pie Chart will be destroyed')
    }
  }
})

Pie Chart Methods & Properties

So to create Pie Chart we have to call:

var pieChart = app.pieChart.create({ /* parameters */ })

After that we have its initialized instance (like pieChart variable in example above) with useful methods and properties:

Properties
pieChart.appLink to global app instance
pieChart.elPie Chart HTML element
pieChart.$elDom7 instance with Pie Chart HTML element
pieChart.svgElPie Chart generated SVG HTML element
pieChart.$svgElDom7 instance with generated SVG HTML element
pieChart.paramsPie Chart parameters
Methods
pieChart.update(parameters)Update/rerender Pie Chart SVG element according to passed parameters. It accepts object with same parameters required for Pie Chart initialization. You can pass only parameters that needs to be updated, e.g.
var pieChart = app.pieChart.create({
  datasets: datasetsA,
  // ...
});

// and when we need to update rendered SVG based on new datasets:
pieChart.update({
  datasets: datasetsB,
});
pieChart.destroy()Destroys Pie Chart instance
pieChart.on(event, handler)Add event handler
pieChart.once(event, handler)Add event handler that will be removed after it was fired
pieChart.off(event, handler)Remove event handler
pieChart.off(event)Remove all handlers for specified event
pieChart.emit(event, ...args)Fire event on instance

Pie Chart Events

Pie Chart will fire the following DOM events on Pie Chart element and events on app and Pie Chart instance:

DOM Events

EventTargetDescription
piechart:selectPie Chart Element<div class="pie-chart">Event will be triggered (when tooltip enabled) on chart hover
piechart:beforedestroyPie Chart Element<div class="pie-chart">Event will be triggered right before Pie Chart instance will be destroyed

App and Pie Chart Instance Events

Pie Chart instance emits events on both self instance and app instance. App instance events has same names prefixed with pieChart.

EventArgumentsTargetDescription
select(pieChart, index, dataset)pieChartEvent will be triggered (when tooltip enabled) on chart hover
pieChartSelect(pieChart, index, dataset)app
beforeDestroy(pieChart)pieChartEvent will be triggered right before Pie Chart instance will be destroyed. As an argument event handler receives Pie Chart instance
pieChartBeforeDestroy(pieChart)app

Examples

pie-chart.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Pie Chart</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>Framework7 comes with simple to use and fully responsive Pie Chart component.</p>
        <p>Pie Chart generates SVG layout which makes it also compatible with SSR (server side rendering).</p>
      </div>
      <div class="block-title">Simple Pie Chart</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="pie-chart pie-chart-1"></div>
      </div>

      <div class="block-title">With Tooltip</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="pie-chart pie-chart-2"></div>
      </div>

      <div class="block-title">Custom Format Tooltip</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="pie-chart pie-chart-3"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
    let pieSimple;
    let pieTooltip;
    let pieCustomTooltip;

    $onMounted(() => {
      pieSimple = $f7.pieChart.create({
        el: '.pie-chart-1',
        datasets: [
          {
            value: 100,
            color: '#f00',
          },
          {
            value: 200,
            color: '#0f0',
          },
          {
            value: 300,
            color: '#00f',
          },
        ]
      });
      pieTooltip = $f7.pieChart.create({
        el: '.pie-chart-2',
        tooltip: true,
        datasets: [
          {
            label: 'JavaScript',
            value: 150,
            color: '#ff0',
          },
          {
            label: 'Vue.js',
            value: 150,
            color: '#0f0',
          },
          {
            label: 'TypeScript',
            value: 400,
            color: '#00f',
          },
        ]
      })
      pieCustomTooltip = $f7.pieChart.create({
        el: '.pie-chart-3',
        tooltip: true,
        datasets: [
          {
            label: 'JavaScript',
            value: 1000,
            color: '#ff0',
          },
          {
            label: 'Vue.js',
            value: 100,
            color: '#0f0',
          },
          {
            label: 'TypeScript',
            value: 200,
            color: '#00f',
          },
        ],
        formatTooltip(data) {
          const { value, label, color } = data;
          return `You have <span style="color: ${color}">${value} points</span> for ${label}`;
        }
      })
    })

    $onBeforeUnmount(() => {
      pieSimple.destroy();
      pieTooltip.destroy();
      pieCustomTooltip.destroy();
    })

    return $render;
  }
</script>
Improve this Doc
On this page