Chart.js Controller

Chart.js Controller is a Stimulus controller for interacting with Chart.js.

it enables you to take an existing HTML table and either add a chart or replace the table on the page with a chart, using the data of that table.

Attributes

data- Attributes

All of these attributes are prefixed with "data-" in the attribute name.

Attribute Element(s) Default Value(s) Description
controller table
canvas
 chartjs This attribute (on either element) provides the chart.js functionality.
value td
 (string) The value to use for this cell, instead of the contents of the cell.

data-chartjs- Attributes

All of these attributes are prefixed with "data-chartjs-" in the attribute name.

Attribute Element(s) Default Value(s) Description
type table
canvas
 bar bar
line
pie
polarArea
radar
 This indicates which type of chart to display.
table canvas
 (any valid selector) If data-controller is placed on the canvas element, this element will provide the selector for the table holding the data.
canvas table
 replace This can be provided as a selector to an existing canvas element on the page, or an indicator of how the controller should add the element to the page.
(any valid selector)
 The selector for an existing canvas element on the page.
before

Will add the canvas element before the table.
after

Will add the canvas element after the table.
replace The canvas element will replace the table on the page, hiding the table from display.
The table will be the back-up in case canvas is not supported.
data canvas
 (JSON string)

You can pass data directly into the controller instead of using a table as the source of data, if you like.

If "data" is passed in, it supercedes the table.

Contra-indicated except for types of "bubble" and "scatter".
(JSON string)
 a JSON representation of Chart.js Data structures.
(URL)
 A URL that returns a JSON string as above.
options canvas
table
 (JSON string)
 This will be a JSON representation of all of the Chart.js options.
The controller will just pass this data through to Chart.js, so any option supported by Chart.js is available here.
type col
th
 label

Only one "label" column can exist per Chart.js table.

This column represents the labels for the chart.

If none provided, controller will use the first column that isn't marked as "data".
data

At least one "data" column must exist.

Each "data" column represents data in the chart.

If none provided, controller will use each column that has only numeric data.
options col
th
 (JSON string)
 This will be a JSON representation of options that will be supplied in the "data" key of the dataset for this column.
ignore th
tr

Any column or row with this attribute will be ignored by the chart.
value td
 (any string)
 If provided, the controller will use this for the value of the cell, instead of what is in the cell itself (or the data-value attribute).

Events

chartjs: Events

Event Parameters Description
connected

canvas: (the canvas element on which the chart is drawn)

table: (the table element from which data is drawn)

 Called any time that the controller is connected.
disconnected

canvas: (the canvas element on which the chart is drawn)

table: (the table element from which data is drawn)

 Called any time that the controller is disconnected.
updated

canvas: (the canvas element on which the chart is drawn)

table: (the table element from which data is drawn)

 Called any time that the controller is updated.

Methods

While it is recommended to use the controller via the attributes listed above, the following methods can be called directly if needed.

Method Returns Arguments Event(s) Description
update

Causes the chart to update from the data currently in the table.