Pie Chart Svelte 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
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

<script>
  import { Page, Navbar, BlockTitle, Block, PieChart } from 'framework7-svelte';
</script>


  
<Page>
  <Navbar title="Pie Chart" />
  <BlockTitle>Simple Pie Chart</BlockTitle>
  <Block strong>
    <!-- prettier-ignore -->
    <PieChart
      datasets={[
        {
          value: 100,
          color: '#f00',
        },
        {
          value: 200,
          color: '#0f0',
        },
        {
          value: 300,
          color: '#00f',
        },
      ]}
    />
  </Block>

  <BlockTitle>With Tooltip</BlockTitle>
  <Block strong>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>