Chart

component

Charts drawn with Symfony UX Chart.js in the theme's colors, light and dark, each with its data as a table.

Install

php bin/console ux:install chart \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: assets/ → assets/
templates/ → templates/
Recipes: theme
Composer: symfony/ux-chartjs:^3.5
twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0
Importmap: chart.js

Examples (5)

Default

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:Chart
        id="chart-revenue"
        title="Revenue by month"
        labelsHeader="Month"
        :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
        :datasets="[{label: '2025', data: [12, 19, 14, 17, 22, 24]}, {label: '2026', data: [15, 21, 18, 25, 28, 31]}]"
    />
</div>

A color of your own

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:Chart
        id="chart-signups"
        type="line"
        title="Sign-ups"
        description="Sign-ups grew every week."
        labelsHeader="Week"
        :labels="['W1', 'W2', 'W3', 'W4', 'W5']"
        :datasets="[{label: 'Sign-ups', data: [40, 52, 61, 70, 84], borderColor: 'var(--color-fg-success)', backgroundColor: 'var(--color-fg-success)'}]"
        :options="{scales: {y: {beginAtZero: true}}}"
    />
</div>

Doughnut

Light

Dark

Code

<div class="w-full max-w-md p-4">
    <twig:Chart
        id="chart-traffic"
        type="doughnut"
        title="Traffic sources"
        labelsHeader="Source"
        :labels="['Search', 'Direct', 'Social', 'Email']"
        :datasets="[{label: 'Visits', data: [540, 310, 180, 90]}]"
    />
</div>

Horizontal bars

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:Chart
        id="chart-tickets"
        title="Open tickets by team"
        labelsHeader="Team"
        size="sm"
        :labels="['Billing', 'Platform', 'Mobile', 'Web']"
        :datasets="[{label: 'Open', data: [7, 12, 4, 9]}, {label: 'Urgent', data: [1, 3, 0, 2]}]"
        :options="{indexAxis: 'y'}"
    />
</div>

In a card with its table shown

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:Card class="max-w-none">
        <twig:Chart
            id="chart-orders"
            type="line"
            title="Orders"
            labelsHeader="Day"
            table="visible"
            size="sm"
            :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"
            :datasets="[{label: 'Orders', data: [18, 24, 21, 30, 27]}]"
        />
    </twig:Card>
</div>