ChartJs

component

A chart of Symfony UX Chart.js in a figure, with its caption and the table of its values.

Preview

Light

This example needs the context of a page to render; its code is below.

Code

Dark

This example needs the context of a page to render; its code is below.

Code

Usage

This example needs the context of a page to render; its code is below.

Code

<twig:ChartJs :chart="chart" label="Visits in the first quarter" tableLabel="The values" />

Installation

php bin/console ux:install chart-js --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

Prop	Type	Default	Description
`tableLabel`	`string\|null`	`null`	The summary of a disclosure showing the table of the values; without it, the table is read by screen readers alone.

Accessibility

The canvas is hidden from screen readers, which read the table of the same values instead: the labels in its first column, a column per data set. With tableLabel, the table shows to everyone in a disclosure.

Files to copy

templates/components/ChartJs.html.twig

{#-
 # A chart of Symfony UX Chart.js, in a figure: its caption, the canvas the controller of Chart.js draws, hidden from
 # screen readers, and the table of the same values, read from the chart's data. Chart.js, its options and its plugins
 # stay those of the application; the recipe adds the caption, the table and the classes of phil-ux.
 #}
{%- props
    ## object The chart, a `Symfony\UX\Chartjs\Model\Chart` built by the application.
    chart,
    ## string What the chart shows, written as its caption.
    label,
    ## string|null The summary of a disclosure showing the table of the values; without it, the table is read by screen readers alone.
    tableLabel = null
-%}
{%- set _data = chart.data ?? {} -%}
{%- set _labels = (_data.labels ?? [])|slice(-366) -%}
{%- set _series = (_data.datasets ?? [])|slice(0, 6) -%}
<figure data-slot="chart" data-type="chart-js"{{ attributes.defaults({class: 'isChart hasChartJs'}) }}>
    <figcaption class="isChartCaption">{{ label }}</figcaption>
    <div class="isChartCanvas">{{ render_chart(chart, {'aria-hidden': 'true'}) }}</div>
    {%- set _table -%}
        <table class="isChartTable">
            <thead><tr><td></td>{%- for _one in _series -%}<th scope="col">{{ _one.label ?? '' }}</th>{%- endfor -%}</tr></thead>
            <tbody>
                {%- for _name in _labels -%}
                    {%- set _row = loop.index0 -%}
                    <tr><th scope="row">{{ _name }}</th>{%- for _one in _series -%}<td>{{ (_one.data ?? [])[_row] ?? '' }}</td>{%- endfor -%}</tr>
                {%- endfor -%}
            </tbody>
        </table>
    {%- endset -%}
    {%- if tableLabel is not null -%}
        <details class="isChartData"><summary>{{ tableLabel }}</summary>{{ _table }}</details>
    {%- else -%}
        <div class="isVisuallyHidden">{{ _table }}</div>
    {%- endif -%}
</figure>