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

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

<Page>
  <Navbar title="Pie Chart" />
  <Block strongIos outlineIos>
    <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 strongIos outlineIos>
    <!-- prettier-ignore -->
    <PieChart
      datasets={[
        {
          value: 100,
          color: '#f00',
        },
        {
          value: 200,
          color: '#0f0',
        },
        {
          value: 300,
          color: '#00f',
        },
      ]}
    />
  </Block>

  <BlockTitle>With Tooltip</BlockTitle>
  <Block strongIos outlineIos>
    <!-- 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 strongIos outlineIos>
    <!-- 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>

Improve this Doc

On this page

Pie Chart Components
Pie Chart Properties
Pie Chart Events
Examples