Pie Chart Vue Component

Pie Chart Components
Pie Chart Properties
Pie Chart Events
Examples

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

Pie Chart Components

There are following components included:

f7-pie-chart

Pie Chart Properties

Prop	Type	Default	Description
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;`
format-tooltip	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;`

Pie Chart Events

Event	Arguments	Description
select	(index, item)	Event will be triggered (when tooltip enabled) on chart hover

Examples

<template>
<f7-page>
  <f7-navbar title="Pie Chart" />
  <f7-block-title>Simple Pie Chart</f7-block-title>
  <f7-block strong>
    <f7-pie-chart
      :datasets="[
        {
          value: 100,
          color: '#f00',
        },
        {
          value: 200,
          color: '#0f0',
        },
        {
          value: 300,
          color: '#00f',
        },
      ]"
    />
  </f7-block>

  <f7-block-title>With Tooltip</f7-block-title>
  <f7-block strong>
    <f7-pie-chart
      tooltip
      :datasets="[
        {
          label: 'JavaScript',
          value: 150,
          color: '#ff0',
        },
        {
          label: 'Vue.js',
          value: 150,
          color: '#0f0',
        },
        {
          label: 'TypeScript',
          value: 400,
          color: '#00f',
        },
      ]"
    />
  </f7-block>

  <f7-block-title>Custom Format Tooltip</f7-block-title>
  <f7-block strong>
    <f7-pie-chart
      tooltip
      :datasets="[
        {
          label: 'JavaScript',
          value: 1000,
          color: '#ff0',
        },
        {
          label: 'Vue.js',
          value: 100,
          color: '#0f0',
        },
        {
          label: 'TypeScript',
          value: 200,
          color: '#00f',
        },
      ]"
      :format-tooltip="
        ({ color, value, label }) =>
          `You have <span style='color: ${color}'>${value} points</span> for ${label}`
      "
    />
  </f7-block>
</f7-page>
</template>