# ChartJS

The ChartJS Class provides properties, methods, and events to interface with the HTML tags generated by the [silk:Chart](/tags/chart.md) component. This object extends the functionality of the popular Chart.js library (<https://www.chartjs.org>).

### Data Source

The data is provided by a **silk:DataProvider**, which should contain two columns: one with labels and another with values.

```xml
<silk:Chart id="chart" dataSource="dataDP" labelColumn="state" dataColumn="population" />
<silk:DataProvider id="dataDP" servicePath="..." />
```

### JavaScript Object

SilkBuilder also creates a companion JavaScript object using the [ChartJS](https://github.com/silkbuider/documentation/blob/master/js_object/ChartJS.js.md) class to provide JavaScript programmatic interaction. This object will have the same name as the component's ID.

```xml
<silk:JQcode>
	chart.on("click", function(index, value, label){
		silk.alert(label+":"+value);
  });	
</silk:JQcode>
```

**Kind**: global class

## Properties

| Name         | Type     | Description                                              |
| ------------ | -------- | -------------------------------------------------------- |
| $target      | `Object` | jQuery object referencing the HTMLtag wraping the chart. |
| $canvas      | `Object` | jQuery object referencing chart's canvas.                |
| $title       | `Object` | jQuery object referencing chart's title.                 |
| $chartObject | `Object` | jQuery object referencing chart's object.                |
| config       | `Object` | Object containing the chart configuration.               |

## Constructor

### new ChartJS(id, option)

Returns a ChartJS instance.

| Param                     | Type     | Default   | Description                                                                                                                            |
| ------------------------- | -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| id                        | `String` |           | Unique identifier.                                                                                                                     |
| option                    | `Object` |           | Object containing the configuration.                                                                                                   |
| \[option.chartType]       | `String` | `bar`     | Types: bar, line, pie, and doughnut. The default value is "bar". The chart type is from <https://www.chartjs.org/docs/latest/charts/>. |
| \[option.dataSource]      | `String` |           | Unique identifier of the dataProvider used to fill the Chart.                                                                          |
| \[option.labelColumn]     | `String` |           | The name of the column that defines the characters' labels.                                                                            |
| \[option.dataColumn]      | `String` |           | The name of the column that defines the char's data.                                                                                   |
| \[option.backgroundColor] | `String` | `#1886C1` | The chart's background color.                                                                                                          |
| \[option.showGrid]        | `String` | `true`    | Defines if the chart will show a grid.                                                                                                 |
| \[option.showLegend]      | `String` | `false`   | Defines if the chart will show the legend.                                                                                             |
| \[option.indexAxis]       | `String` | `x`       | Sets the chart's index axis.                                                                                                           |
| \[option.tooltip]         | `String` | `true`    | Defines if the chart will show the tooltips.                                                                                           |
| \[option.dataLabels]      | `String` | `true`    | Defines if the chart will show data labels.                                                                                            |

## Methods

### hide()

Hides the chart.

**Kind**: instance method of [`ChartJS`](#ChartJS)<br>

### load()

Loads the data from the dataSource, a **silk:DataProvider**, and generates the chart graphic.

**Kind**: instance method of [`ChartJS`](#ChartJS)<br>

### on

Load events to respond to the chartJS's interactions. To set an event, use this code: `ChartJS.on(<eventName>, function(){<code>})`.

**Kind**: instance property of [`ChartJS`](#ChartJS)

| Param         | Type       | Description                   |
| ------------- | ---------- | ----------------------------- |
| eventName     | `String`   | The event's name.             |
| eventFunction | `function` | The function to be triggered. |

### setTitle(title)

Sets the Chart's title.

**Kind**: instance method of [`ChartJS`](#ChartJS)

| Param | Description        |
| ----- | ------------------ |
| title | The chart's title. |

### show()

Shows the chart from being hidden.

**Kind**: instance method of [`ChartJS`](#ChartJS)<br>

### toggle(mode)

Hides or shows the chart based on the provided parameter. If the parameter is not provided, it will invert the current display status. If shown, it will be hidden; if hidden, it will be displayed.

**Kind**: instance method of [`ChartJS`](#ChartJS)

| Param | Description                 |
| ----- | --------------------------- |
| mode  | True shows and false hides. |

## Events

### on:afterLoad

This event is triggered after ChartJS has loaded the data and generated the graphic. Created with the `ChartJS.on("afterLoad", function(){})` method.

**Kind**: event emitted by [`ChartJS`](#ChartJS)<br>

### on:beforeLoad

This event is triggered before ChartJS loads the data and generates the graphic. Created with the `ChartJS.on("beforeLoad", function(){})` method.

**Kind**: event emitted by [`ChartJS`](#ChartJS)<br>

### on:click (index, value, label)

This event is triggered when a ChartJS data segment is clicked. Created with the `ChartJS.on("click", function(index,value,label){})` method.

**Kind**: event emitted by [`ChartJS`](#ChartJS)

| Param | Type      | Description                                                   |
| ----- | --------- | ------------------------------------------------------------- |
| index | `Integer` | The dataSource index providing data for the selected element. |
| value | `Numeric` | The numeric value of the selected element.                    |
| label | `String`  | The label of the selected element.                            |

### on:resize (size)

This event is triggered when a ChartJS gets resized. Created with the `ChartJS.on("resize", function(size){})` method.

**Kind**: event emitted by [`ChartJS`](#ChartJS)

| Param | Type     | Description           |
| ----- | -------- | --------------------- |
| size  | `Object` | The chart's new size. |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.silkbuilder.com/js_object/chartjs.js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.