Pie Chart React 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:

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

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

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

      <BlockTitle>With Tooltip</BlockTitle>
      <Block strong>
        <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>
        <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>
      
    
  );
};