PictogramChart

Live preview

Loading example…

Isotype pictogram: every icon stands for perUnit of something (clients, services, bottles) and the last icon of a category is cut to its remainder. Icons grow to the largest size that fits the box, up to unitSize.

Import

import { PictogramChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/pictogram-chart.

Usage

<PictogramChart
  title="Clientes atendidos hoy"
  data={visitsBySegment}
  perUnit={1}
  icon="person"
  layout="grid"
  unitSize={28}
  gap={0.25}
  height={200}
  unitLabel="clientes"
  valueFormat="integer"
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`
`description`	`string`
`data` *	`readonly UnitCategory[]`
`perUnit`	`number`	`1`	Value one icon stands for. The last icon of a category is clipped to its remainder.
`icon`	`UnitIcon`	`"person"`	Built-in icon name, a 24 x 24 path, or a `UnitShape`.
`layout`	`"grid" \| "rows"`	`"grid"`	“grid”: categories flow one after the other; “rows”: each category starts a new row.
`columns`	`number`		Fixed number of columns; by default the largest icons that fit the box decide.
`total`	`number`		Capacity drawn as empty icons after the data (grid layout), e.g. 120 seats a day.
`unitSize`	`number`	`32`	Largest icon side in pixels.
`gap`	`number`	`0.25`	Gap between icons, as a fraction of the icon size.
`height`	`number \| "fill"`	`200`
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width when `height` is not “fill”.
`valueFormat`	`ValueFormat`	`"integer"`
`unitLabel`	`string`	`"units"`	What the values count, for the key and the tooltip (“clientes”).
`showKey`	`boolean`		Shows “icon = N unitLabel” under the chart. Defaults to on when `perUnit` is not 1.
`legend`	`boolean \| "top" \| "bottom"`	`true`
`tooltip`	`boolean`	`true`
`animate`	`boolean`	`true`
`loading`	`boolean`	`false`
`initialHidden`	`readonly string[]`
`labels`	`Partial<ChartLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/pictogram-chart/pictogram-chart.tsx