GrChartPie

Examples 4 each with a live demo and its code

• What the storage is spent on

  The bar answers «how full», the donut answers «with what». The chart’s own legend is off, because the list on the right is the legend: v-model:active-index ties a slice and its row, so hovering either lights both. total-label signs the sum in the hole.

  Storage412 GB of 500 GB

  Chart data

  Category	Value	Share
  Attachments	186	45%
  Backups	124	30%
  Exports	58	14%
  Audit log	44	11%

  • AttachmentsFiles on invoices and receipts186 GB
  • BackupsNightly, kept for 30 days124 GB
  • ExportsCSV and PDF reports58 GB
  • Audit logKept for 2 years44 GB
  Code and props

• Statuses in the colours of their meaning

  A slice color overrides the palette with a theme role: green, amber and red say «on time, late, failed» before the legend is read. labels="share" writes the percentages, and the #center slot puts what matters into the hole — «92% on time» instead of the sum — at the cx, cy and font sizes it is given.

  Deliveries, last week92% arrived on time

  • On time1,842 · 92%
  • Late131 · 7%
  • Failed attempt27 · 1%

  Chart data

  Category	Value	Share
  On time	1,842	92%
  Late	131	7%
  Failed attempt	27	1%

  Code and props

• A slice that filters the queue

  Three parts is where a pie still reads. labels="value" writes the counts — «17 by phone» is an answer, «18%» is a hint — and slice-click narrows the list of tickets under the chart to that channel.

  Open tickets by channel

  • Email48 · 50%
  • Chat31 · 32%
  • Phone17 · 18%

  Chart data

  Category	Value	Share
  Email	48	50%
  Chat	31	32%
  Phone	17	18%

  • T-2291Invoice shows the old VAT number
  • T-2294Cannot add a second admin
  • T-2297Card declined on renewal
  Code and props

• A long tail folded into «Other»

  Ten categories would be slivers nobody compares, so the page folds the small ones into «Other» and puts it last — the chart never sorts or groups, because only the page knows where «Other» belongs. label-min-share keeps thin slices unlabelled on the picture, and the tooltip slot opens «Other» up.

  Expenses, September€278.0k in total

  • Salaries182 · 65%
  • Cloud41 · 15%
  • Office23 · 8%
  • Marketing19 · 7%
  • Other13 · 5%

  Chart data

  Category	Value	Share
  Salaries	182	65%
  Cloud	41	15%
  Office	23	8%
  Marketing	19	7%
  Other	13	5%

  Code and props

API generated from the package · cannot drift

import type { GrChartPieConfigurableProps, GrChartSize, GrChartPieTexture } from '@feugene/granularity-charts/components/GrChartPie'

const grChartPieConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrChartPie">;

interface GrChartPieConfigurableProps {
    size: GrChartSize;
    height: number;
    variant: 'pie' | 'donut';
    donutRatio: number;
    labels: 'none' | 'share' | 'value';
    showLegend: boolean;
    legendPosition: 'top' | 'bottom';
    tooltip: boolean;
    dataTable: 'hidden' | 'visible' | 'off';
    dataTableMaxRows: number | 'auto';
}

type GrChartSize = GrComponentSize;

const GR_CHART_PIE_TEXTURES: readonly ["solid", "hatch", "hatch-reverse", "grid"];

type GrChartPieTexture = typeof GR_CHART_PIE_TEXTURES[number];

function pieTextureFor(index: number): GrChartPieTexture;

function pieTexturePaths(texture: GrChartPieTexture, tile?: number): string[];

const grChartPieSafelist: string[];

interface GrChartPieSlice {
    label: string;
    value: number | null;
    color?: string;
    meta?: unknown;
}

interface GrChartPieActiveSlice {
    index: number;
    label: string;
    value: number | null;
    share: number | null;
    color: string;
}

interface GrChartPieProps {
    data: readonly GrChartPieSlice[] | readonly (number | null)[];
    variant?: 'pie' | 'donut';
    donutRatio?: number;
    height?: number;
    width?: number;
    startAngle?: number;
    labels?: 'none' | 'share' | 'value';
    labelMinShare?: number;
    showLegend?: boolean;
    legendPosition?: 'top' | 'bottom';
    tooltip?: boolean;
    activeIndex?: number | null;
    loading?: boolean;
    empty?: boolean;
    emptyText?: string;
    dataTable?: 'hidden' | 'visible' | 'off';
    interactive?: boolean;
    size?: GrChartSize;
    valueFormat?: GrChartNumberFormat;
    locale?: string;
    totalLabel?: string;
    ariaLabel?: string;
    ariaDescription?: string;
    dataTableMaxRows?: number | 'auto';
}

interface GrChartPieEmits {
    (e: 'update:activeIndex', value: number | null): void;
    (e: 'sliceClick', value: GrChartPieActiveSlice): void;
    (e: 'sliceHover', value: GrChartPieActiveSlice | null): void;
}

Accessibility

Full contract of the package: docs/keyboard.md ↗

Related the fourth question: when not this

• GrChartBarcharts

  Compare quantities with one another

• GrChartAreacharts

  Show how the composition changed over time

• GrProgressCirclefeedback

  Show the share of a single metric

• GrChartRadarcharts

  Compare the shape of a profile across several axes

• GrChartFunnelchartslinks here

• GrChartLinechartslinks here

• GrChartWaterfallchartslinks here

• GrProgressBarfeedbacklinks here

  Shows the progress of a task or a loading process.