Pie Chart

Pie Chart Layout
Pie Chart App Methods
Pie Chart Parameters
Pie Chart Methods & Properties
Pie Chart Events

DOM Events
App and Pie Chart Instance Events

Examples

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:

Parameter	Type	Default	Description
el	HTMLElement string		Pie Chart element. HTMLElement or string with CSS selector of Pie Chart element. Generated SVG will be inserted into this element
datasets	array	[]	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;`
size	number	320	Generated SVG image size (in px)
tooltip	boolean	false	Enables tooltip on hover
datasets	array	[]	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;`
formatTooltip	function(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;`
on	object		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.app	Link to global app instance
pieChart.el	Pie Chart HTML element
pieChart.$el	Dom7 instance with Pie Chart HTML element
pieChart.svgEl	Pie Chart generated SVG HTML element
pieChart.$svgEl	Dom7 instance with generated SVG HTML element
pieChart.params	Pie 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

Event	Target	Description
piechart:select	Pie Chart Element<div class="pie-chart">	Event will be triggered (when tooltip enabled) on chart hover
piechart:beforedestroy	Pie 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.

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

Examples

<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-title">Simple Pie Chart</div>
      <div class="block block-strong">
        <div class="pie-chart pie-chart-1"></div>
      </div>

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

      <div class="block-title">Custom Format Tooltip</div>
      <div class="block block-strong">
        <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>