# `Fude.Components`
[🔗](https://github.com/hattoriai/fude/blob/v0.1.0/lib/fude/components.ex#L1)

The function component of Fude: `<.chart>`.

    import Fude.Components

    <.chart id="revenue" chart={Fude.bar(@sales, x: :region, y: :revenue)} />

A saved spec draws with its data given again:

    <.chart id="revenue" spec={@report.chart} data={@sales} />

The chart needs the `Fude` hook in the LiveSocket and the Fude CSS (see
the README). The server writes the chart's title, its words, a single
number (`Fude.number/2`) and a table of the data; the hook draws the
plot, and draws it again in place when the chart or its data change,
moving its marks to their new places.

Before the hook mounts (and with JavaScript off), the chart is its words
and its table.

A chart that cannot draw (a field that is not in the data, a spec that
is not valid) shows why, in place of the plot, and does not raise.

# `chart`

Renders a chart.

Give it a chart (`chart`, from the functions of `Fude`), or a spec
(`spec`, from `Fude.Spec.dump/1`) with its data (`data`).

## Attributes

* `id` (`:string`) (required) - the id of the chart, unique on the page.
* `chart` (`Fude.Chart`) - the chart, from the functions of `Fude`. Defaults to `nil`.
* `spec` (`:map`) - a spec of the chart (`Fude.Spec.dump/1`), with `data`. Defaults to `nil`.
* `data` (`:any`) - the chart's data, for a spec or a chart made without it; a map of names for a chart of several. Defaults to `nil`.
* `height` (`:integer`) - the height of the plot in pixels; the chart's own, or 320. Defaults to `nil`.
* `locale` (`:string`) - the locale that writes numbers and dates; the browser's unless given. Defaults to `nil`.
* `table` (`:boolean`) - whether the data table is on the page (under a toggle). Defaults to `true`.
* `export` (`:boolean`) - whether the chart has buttons that save it as SVG and PNG (see also `Fude.Live.export/3`). Defaults to `false`.
* `issho` (`:string`) - the Issho document of a shared chart (`Fude.Issho`): the people of its room see each other's pointers on its marks. Defaults to `nil`.
* `class` (`:any`) - classes for the chart's element. Defaults to `nil`.
* Global attributes are accepted.

---

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