v6.3.17
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
Improve this Doc

Pie Chart Vue Component

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

PropTypeDefaultDescription
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;
format-tooltipfunction(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

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