# `PhiaUi.Components.PictogramChart`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/pictogram_chart.ex#L1)

Pictogram chart — pure SVG, zero JS.

Grid of repeated symbols representing proportional values.
Each symbol represents a unit fraction of the total. Categories
are distinguished by color, filling the grid left-to-right,
bottom-to-top.

## Examples

    <.pictogram_chart
      data={[
        %{label: "Completed", value: 72},
        %{label: "Remaining", value: 28}
      ]}
    />

    <.pictogram_chart
      data={[
        %{label: "Chrome", value: 65},
        %{label: "Firefox", value: 20},
        %{label: "Safari", value: 15}
      ]}
      symbol={:square}
      cols={10}
      total={100}
      colors={["oklch(0.60 0.20 240)", "oklch(0.70 0.18 145)", "oklch(0.65 0.22 30)"]}
    />

# `pictogram_chart`

## Attributes

* `data` (`:list`) - Category data: `[%{label, value}]`. Defaults to `[]`.
* `colors` (`:list`) - Override default palette. CSS color strings. Defaults to `[]`.
* `total` (`:integer`) - Total number of symbols in the grid. Defaults to `100`.
* `cols` (`:integer`) - Number of columns in the grid. Defaults to `10`.
* `symbol_size` (`:integer`) - Size of each symbol in pixels. Defaults to `16`.
* `symbol_gap` (`:integer`) - Gap between symbols in pixels. Defaults to `4`.
* `symbol` (`:atom`) - Symbol shape. Defaults to `:circle`. Must be one of `:circle`, `:square`, or `:person`.
* `animate` (`:boolean`) - Enable entrance animations. Defaults to `true`.
* `animation_duration` (`:integer`) - Animation duration in ms. Defaults to `600`.
* `theme` (`:map`) - Chart theme overrides (see ChartTheme). Defaults to `%{}`.
* `id` (`:string`) - Unique ID for the chart (auto-generated if not provided). Defaults to `nil`.
* `title` (`:string`) - Chart title rendered above the visualization. Defaults to `nil`.
* `description` (`:string`) - Chart description for context (rendered below title). Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*