Chart Pie

The Chart.Pie component renders a proportional breakdown of one value set as a circle of slices. It uses inline SVG for geometry and regular HTML for text, so labels, legends, and tooltips stay fully styleable.

Usage

Give the chart a data array. Each item is a series, and each series holds the points to plot. A pie shows one series, so its points become the slices.

data is reactive: feed it from a signal and the chart updates with it.

index.tsx

import Chart from '@components/Feedback/Chart/Chart';
import { createSignal } from 'solid-js';

const App = () => {
    const [stats, setStats] = createSignal([
        {
            label: 'Loadout',
            points: [
                { type: 'strength', value: 13 },
                { type: 'agility', value: 9 },
                { type: 'stamina', value: 16 },
                { type: 'intellect', value: 6 },
            ],
        },
    ]);

    return (
        <Chart.Pie data={stats()} style={{ height: '20rem' }}>
            <Chart.Labels placement="outside" />
            <Chart.Legend position="bottom" />
        </Chart.Pie>
    );
};

Caution

The chart fills its container, so the container must have a size. A Chart.Pie inside an element with no height renders nothing.

Colours

Each slice takes its colour from the built-in categorical palette, assigned by index. You can override that in three places: the full palette, a series color, or a point color.

// point.color  ??  series.color  ??  palette[index % palette.length]
<Chart.Pie data={stats()} palette={['#e5484d', '#30a46c', '#3987e5']} />

The palette ships with eight colours, arranged so neighbouring slices stay distinguishable for colourblind viewers. Beyond eight slices the colours repeat, which makes them less reliable as identifiers. Prefer fewer slices or group the tail into an “other” entry.

Animation

Pass an animation object and the chart tweens between data sets. Without it, there is no animation and no per-frame work.

<Chart.Pie data={stats()} animation={{ duration: 300, easing: 'ease-out' }} />

Values are interpolated and the geometry is rebuilt each frame, so a slice that appears grows outward instead of popping in. If you change the data mid-animation, the chart continues from its current state instead of snapping back.

Interactivity

Interactivity is off by default. A chart with no interactive prop attaches no listeners and lets pointer input pass straight through to the game. Turn it on with interactive:

<Chart.Pie data={stats()} interactive onPointClick={(e) => select(e.point.type)}>
    <Chart.Tooltip content={(e) => <div>{e.point.label}: {e.point.value}</div>} />
</Chart.Pie>

Value	Behaviour
omitted / false	No listeners. The SVG is set to pointer-events: none.
true	Native SVG pointer events on each slice. The hit area is the arc itself.
"svg"	Forces native SVG pointer events.
"overlay"	Resolves the hovered slice mathematically from a single transparent overlay. One listener handles all slices, and it does not depend on SVG hit-testing.

Caution

Native SVG hit-testing requires Gameface 3.1.1 or newer. On older versions, use interactive="overlay", which works on any version. It is also the better choice for very large datasets, since native mode attaches listeners per slice.

API

Props

Takes the shared chart props, plus:

Prop Name	Type	Default	Description
startAngle	number	0	Degrees, clockwise from 12 o’clock.
endAngle	number	360	Degrees. Use with startAngle for a partial pie.

data takes the usual ChartSeries[], but a pie renders only the first series; each of its points is a slice. See Types for the shared data and event types.

Behaviour notes

• Negative values have no meaning in a pie. They are treated as 0, and the slice is not drawn even though the category remains in the legend.
• Missing categories count as 0 when one series declares a category that another does not.
• An all-zero or empty dataset renders no slices instead of throwing an error.
• Extra series are ignored. A pie draws only the first series. Use one chart per series.

Slots

Chart.Pie.Slice

Styles the slice geometry.

Prop Name	Type	Default	Description
class	string	""	CSS classes applied to every slice.
style	JSX.CSSProperties	{}	Inline styles applied to every slice.
padAngle	number	0	Degrees of gap between slices.
cornerRadius	ChartLength	0	Rounds the slice corners.
hoverOffset	ChartLength	0	How far the hovered slice pops outward. Requires interactive.

Chart.Legend, Chart.Tooltip, Chart.Labels

Shared with every chart type. See Shared slots for their props. On a pie, the legend lists slices: hiding one allows the remaining slices to grow and fill the circle.

Outside labels and leader lines

Chart.Labels uses placement="inside" by default, or placement="outside" on a pie.

Thin neighbouring slices place labels at nearly the same angle, so outside labels are pushed apart vertically to avoid stacking on top of one another. Each half of the circle is spaced independently, so a label never moves to the wrong side.

Once a label moves away from its slice, it becomes harder to tell which slice it belongs to. That is why leaderLines exists: the connector runs out along the slice radius, turns, and meets the label where it ended up.

<Chart.Labels placement="outside" leaderLines />