Pie Chart React Component

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

Pie Chart Components

There are following components included:

PieChart

Pie Chart Properties

Prop	Type	Default	Description
id	string		Chart element ID attribute
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;`

Pie Chart Events

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

Examples

pie-chart.jsx

import React from 'react';
import { Page, Navbar, BlockTitle, Block, PieChart } from 'framework7-react';

export default () => {
  return (
    <Page>
      <Navbar title="Pie Chart" backLink />
      <Block strong inset>
        <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>
      </Block>
      <BlockTitle>Simple Pie Chart</BlockTitle>
      <Block strong inset>
        <PieChart
          datasets={[
            { value: 100, color: '#f00' },
            { value: 200, color: '#0f0' },
            { value: 300, color: '#00f' },
          ]}
        />
      </Block>

      <BlockTitle>With Tooltip</BlockTitle>
      <Block strong inset>
        <PieChart
          tooltip
          datasets={[
            { label: 'JavaScript', value: 150, color: '#ff0' },
            { label: 'Vue.js', value: 150, color: '#0f0' },
            { label: 'TypeScript', value: 400, color: '#00f' },
          ]}
        />
      </Block>

      <BlockTitle>Custom Format Tooltip</BlockTitle>
      <Block strong inset>
        <PieChart
          tooltip
          datasets={[
            { label: 'JavaScript', value: 1000, color: '#ff0' },
            { label: 'Vue.js', value: 100, color: '#0f0' },
            { label: 'TypeScript', value: 200, color: '#00f' },
          ]}
          formatTooltip={({ color, value, label }) =>
            `You have <span style="color: ${color}">${value} points</span> for ${label}`
          }
        />
      </Block>
    </Page>
  );
};

Improve this Doc

On this page

Pie Chart Components
Pie Chart Properties
Pie Chart Events
Examples