Legend

Names the series of a chart or a progress bar: a colored dot, a label and an optional value. Requires Tabler 1.6+.

<twig:Tabler:Legend:List>
    <twig:Tabler:Legend variant="blue" label="Allowed" value="339.0k" />
    <twig:Tabler:Legend variant="red" label="Denied" value="1.2k" />
    <twig:Tabler:Legend variant="yellow" label="Rate limited" value="842" />
</twig:Tabler:Legend:List>

<div class="legend-list">
    <span class="legend legend-blue">
        <span class="legend-dot"></span>
        Allowed
        <span class="legend-value">339.0k</span>
    </span>
    <span class="legend legend-red">
        <span class="legend-dot"></span>
        Denied
        <span class="legend-value">1.2k</span>
    </span>
    <span class="legend legend-yellow">
        <span class="legend-dot"></span>
        Rate limited
        <span class="legend-value">842</span>
    </span>
</div>

Use the label prop rather than the tag content: the dot, the label and the value all render inside the content block, and the tag content replaces it (see Composed).

Large

size="lg" puts the label on top and a big value below. unit adds a small unit after the value:

<twig:Tabler:Legend:List divided="{{ true }}">
    <twig:Tabler:Legend variant="primary" size="lg" label="P99" value="124" unit="ms" />
    <twig:Tabler:Legend variant="azure" size="lg" label="P95" value="76" unit="ms" />
    <twig:Tabler:Legend variant="teal" size="lg" label="P50" value="31" unit="ms" />
</twig:Tabler:Legend:List>

<div class="legend-list legend-list-divided">
    <span class="legend legend-lg legend-primary">
        <span class="legend-dot"></span>
        P99
        <span class="legend-value">
            124
            <span class="legend-unit">ms</span>
        </span>
    </span>
    <span class="legend legend-lg legend-azure">
        <span class="legend-dot"></span>
        P95
        <span class="legend-value">
            76
            <span class="legend-unit">ms</span>
        </span>
    </span>
    <span class="legend legend-lg legend-teal">
        <span class="legend-dot"></span>
        P50
        <span class="legend-value">
            31
            <span class="legend-unit">ms</span>
        </span>
    </span>
</div>

Colors

variant takes the theme colors and the palette colors. Signal and Sparkline accept the same list.

Kind	Colors
Theme	`primary` `secondary` `success` `danger` `warning` `info` `dark` `light` `muted`
Palette	`blue` `azure` `indigo` `purple` `pink` `red` `orange` `yellow` `lime` `green` `teal` `cyan`

<twig:Tabler:Legend:List>
    {% for color in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'muted'] %}
        <twig:Tabler:Legend variant="{{ color }}" label="{{ color }}" />
    {% endfor %}
</twig:Tabler:Legend:List>
<twig:Tabler:Legend:List class="mt-3">
    {% for color in ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan'] %}
        <twig:Tabler:Legend variant="{{ color }}" label="{{ color }}" />
    {% endfor %}
</twig:Tabler:Legend:List>

<div class="legend-list">
    <span class="legend legend-primary">
        <span class="legend-dot"></span>
        primary
    </span>
    <span class="legend legend-secondary">
        <span class="legend-dot"></span>
        secondary
    </span>
    <span class="legend legend-success">
        <span class="legend-dot"></span>
        success
    </span>
    <span class="legend legend-danger">
        <span class="legend-dot"></span>
        danger
    </span>
    <span class="legend legend-warning">
        <span class="legend-dot"></span>
        warning
    </span>
    <span class="legend legend-info">
        <span class="legend-dot"></span>
        info
    </span>
    <span class="legend legend-dark">
        <span class="legend-dot"></span>
        dark
    </span>
    <span class="legend legend-light">
        <span class="legend-dot"></span>
        light
    </span>
    <span class="legend legend-muted">
        <span class="legend-dot"></span>
        muted
    </span>
</div>
<div class="legend-list mt-3">
    <span class="legend legend-blue">
        <span class="legend-dot"></span>
        blue
    </span>
    <span class="legend legend-azure">
        <span class="legend-dot"></span>
        azure
    </span>
    <span class="legend legend-indigo">
        <span class="legend-dot"></span>
        indigo
    </span>
    <span class="legend legend-purple">
        <span class="legend-dot"></span>
        purple
    </span>
    <span class="legend legend-pink">
        <span class="legend-dot"></span>
        pink
    </span>
    <span class="legend legend-red">
        <span class="legend-dot"></span>
        red
    </span>
    <span class="legend legend-orange">
        <span class="legend-dot"></span>
        orange
    </span>
    <span class="legend legend-yellow">
        <span class="legend-dot"></span>
        yellow
    </span>
    <span class="legend legend-lime">
        <span class="legend-dot"></span>
        lime
    </span>
    <span class="legend legend-green">
        <span class="legend-dot"></span>
        green
    </span>
    <span class="legend legend-teal">
        <span class="legend-dot"></span>
        teal
    </span>
    <span class="legend legend-cyan">
        <span class="legend-dot"></span>
        cyan
    </span>
</div>

Links and buttons

With href, the legend renders an <a>, with button a <button type="button">, for example to toggle a chart series. active keeps the hover background, off dims a hidden series:

<twig:Tabler:Legend:List>
    <twig:Tabler:Legend variant="green" label="Passed" value="128" href="?status=passed" active="{{ true }}" />
    <twig:Tabler:Legend variant="red" label="Failed" value="4" href="?status=failed" />
    <twig:Tabler:Legend variant="yellow" label="Skipped" value="12" button="{{ true }}" off="{{ true }}" data-series="skipped" />
</twig:Tabler:Legend:List>

<div class="legend-list">
    <a href="?status=passed" class="legend legend-green active">
        <span class="legend-dot"></span>
        Passed
        <span class="legend-value">128</span>
    </a>
    <a href="?status=failed" class="legend legend-red">
        <span class="legend-dot"></span>
        Failed
        <span class="legend-value">4</span>
    </a>
    <button type="button" class="legend legend-yellow legend-off" data-series="skipped">
        <span class="legend-dot"></span>
        Skipped
        <span class="legend-value">12</span>
    </button>
</div>

Lists

Legend:List lays the items out in a row. vertical stacks them in a column, divided draws a line between them:

<twig:Tabler:Legend:List vertical="{{ true }}">
    <twig:Tabler:Legend variant="primary" label="This week" value="2.4M" />
    <twig:Tabler:Legend variant="secondary" label="Last week" value="2.1M" />
</twig:Tabler:Legend:List>
<twig:Tabler:Legend:List vertical="{{ true }}" divided="{{ true }}" class="mt-3">
    <twig:Tabler:Legend variant="green" label="2xx" value="98.1%" />
    <twig:Tabler:Legend variant="orange" label="4xx" value="1.6%" />
    <twig:Tabler:Legend variant="red" label="5xx" value="0.3%" />
</twig:Tabler:Legend:List>

<div class="legend-list legend-list-vertical">
    <span class="legend legend-primary">
        <span class="legend-dot"></span>
        This week
        <span class="legend-value">2.4M</span>
    </span>
    <span class="legend legend-secondary">
        <span class="legend-dot"></span>
        Last week
        <span class="legend-value">2.1M</span>
    </span>
</div>
<div class="legend-list legend-list-vertical legend-list-divided mt-3">
    <span class="legend legend-green">
        <span class="legend-dot"></span>
        2xx
        <span class="legend-value">98.1%</span>
    </span>
    <span class="legend legend-orange">
        <span class="legend-dot"></span>
        4xx
        <span class="legend-value">1.6%</span>
    </span>
    <span class="legend legend-red">
        <span class="legend-dot"></span>
        5xx
        <span class="legend-value">0.3%</span>
    </span>
</div>

Composed

The tag content replaces the content block: place Legend:Dot, the label and Legend:Value yourself. Put Legend:Unit inside the value, or pass unit to Legend:Value:

<twig:Tabler:Legend variant="indigo" button="{{ true }}">
    <twig:Tabler:Legend:Dot />
    Memory
    <twig:Tabler:Legend:Value>
        3.2 <twig:Tabler:Legend:Unit>GB</twig:Tabler:Legend:Unit>
    </twig:Tabler:Legend:Value>
</twig:Tabler:Legend>

<button type="button" class="legend legend-indigo">
    <span class="legend-dot"></span>
    Memory
    <span class="legend-value">
        3.2
        <span class="legend-unit">GB</span>
    </span>
</button>

Dot alone

Legend:Dot takes the color of its legend. On its own, give it a variant, for example to mark a series in a sentence or a table cell:

<p class="mb-0">
    <twig:Tabler:Legend:Dot variant="azure" class="me-1" /> api-eu-1 is the reference region.
</p>

<p class="mb-0">
    <span class="legend-dot legend-azure me-1"></span>
    api-eu-1 is the reference region.
</p>

Blocks

Override the dot, label or value block and keep the others:

<twig:Tabler:Legend variant="danger" label="Errors" value="0.3" unit="%">
    <twig:block name="label"><strong>Errors</strong></twig:block>
</twig:Tabler:Legend>

<span class="legend legend-danger">
    <span class="legend-dot"></span>
    <strong>Errors</strong>
    <span class="legend-value">
        0.3
        <span class="legend-unit">%</span>
    </span>
</span>

Props

Prop	Type	Default	Description
`variant`	string?	`null`	Color of the dot, see Colors
`size`	string	`'md'`	`md`, or `lg`: label on top, big value below (`legend-lg`)
`label`	string?	`null`	The series name
`value`	string?	`null`	Rendered with `Legend:Value`, when set
`unit`	string?	`null`	Unit after the value, rendered with `Legend:Unit`
`href`	string?	`null`	Renders an `<a href>` instead of a `<span>`
`button`	bool	`false`	Renders a `<button type="button">` instead of a `<span>` (ignored with `href`)
`active`	bool	`false`	Keeps the hover background (`active`)
`off`	bool	`false`	Dims the item, for a hidden series (`legend-off`)

Other attributes go to the root element.

Legend:List

Prop	Type	Default	Description
`vertical`	bool	`false`	Stacks the items in a column (`legend-list-vertical`)
`divided`	bool	`false`	Draws a line between the items (`legend-list-divided`)

Legend:Dot

Prop	Type	Default	Description
`variant`	string?	`null`	Color, see Colors. Not needed inside a legend, which colors it

Legend:Value

Prop	Type	Default	Description
`unit`	string?	`null`	Unit after the content, rendered with `Legend:Unit`

Sub-components

Component	Renders
`Legend:List`	`<div class="legend-list">`, around the legend items
`Legend:Dot`	`<span class="legend-dot">`, the colored marker
`Legend:Value`	`<span class="legend-value">`, the muted value next to the label
`Legend:Unit`	`<span class="legend-unit">`, a small unit after the value (ms, GB…)

Blocks

Block	Default
`dot`	`Legend:Dot`
`label`	The `label` prop, when set
`value`	`Legend:Value` with the `value` and `unit` props, when `value` is set
`content`	`dot`, `label` and `value`: replace it to compose freely