# `Xenia.Adapters.Chartjs`
[🔗](https://github.com/uzaydurdu/xenia/blob/v0.1.1/lib/xenia/adapters/chartjs.ex#L1)

`<.chartjs>`: a Chart.js chart, through Xenia's official Chart.js adapter.

## Setup

Install Chart.js in your app, and pass it to the adapter:

    npm install chart.js --prefix assets

```js
// assets/js/app.js
import { createChartjs } from "xenia/chartjs"

const chartjs = createChartjs({ load: () => import("chart.js/auto") })

hooks: { ...colocatedHooks, ...createHooks({ ChartJS: chartjs }) },
```

Then `import Xenia.Adapters.Chartjs` in `html_helpers`, and:

    <.chartjs id="sales" type="bar" data={@sales} on_point_click="clicked" style="height: 300px" />

`data` and `options` are Chart.js's own, so every chart type and option
works. The chart follows the app's theme (`consumes: ["theme"]`); set
`theme="light"` to pin one, or `theme={false}` for Chart.js's plain
colors.

## Commands

    Xenia.push_to(socket, "sales", "highlight", %{index: 2})

`highlight` (`%{dataset_index, index}`), `clear_highlight`,
`toggle_dataset` (`%{index, visible}`), `reset`, and `download_image`
(`%{filename}`). A command with wrong arguments sends `error`.

## Configuring and extending

`createChartjs` takes `plugins`, default `options`, a `palette`, and a
`setup(chart, %{Chart, ctx})` callback. It returns a plain adapter
object, so you can spread it and add your own commands, props or events;
in a handler, `instance.chart` is the Chart.js chart. See the "Official
adapters" section of the README.

The tag uses the adapter name `"ChartJS"`. To register the adapter under
another name, render it with `<.xenia adapter="...">` or declare your own
tag.

# `chartjs`

A Chart.js chart (Xenia's official adapter).
## Attributes

* `id` (`:string`) (required) - Stable DOM id used for adapter commands.
* `type` (`:string`) - the chart type; changing it rebuilds the chart. Defaults to `"bar"`.
* `data` (`:map`) (required) - Chart.js data: %{labels: [...], datasets: [...]}.
* `options` (`:map`) - Chart.js options, merged over the themed defaults.
* `theme` (`:any`) - "light" or "dark" to pin one, false for no themed colors.
* `on_point_click` (`:string`) - LiveView event triggered when the adapter emits :point_click. Defaults to `nil`.
* `on_legend_click` (`:string`) - LiveView event triggered when the adapter emits :legend_click. Defaults to `nil`.
* `on_hover` (`:string`) - LiveView event triggered when the adapter emits :hover. Defaults to `nil`.
* `on_error` (`:string`) - LiveView event triggered when the adapter emits :error. Defaults to `nil`.
* `shortcuts` (`:map`) - Key combination => LiveView event, while focus is inside (see Xenia.Shortcuts). Defaults to `%{}`.
* `on_crash` (`:string`) - LiveView event sent if the adapter throws (see Xenia.Component). Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `loading` - Shown until the island's first mount finishes.
* `error` - Shown if the adapter throws; data-xenia-retry starts it again.

---

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