# Chart.js

![Chart.js for WireBootstrap](https://795937403-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGjmp6bcmNAsAEW4hIY%2F-MJdoQpFIpOLNP82Z3q4%2F-MJdvBHdLPRFcUAF-Tzz%2Fimage.png?alt=media\&token=0f5cef4b-8d7a-4bfc-b7df-587d5c2a1dd0)

[Chart.js](https://www.chartjs.org) is simple yet flexible JavaScript charting for designers & developers.  Chart.js supports bar, line, area, pie, and other [chart types](https://www.chartjs.org/samples/latest).

Chart.js for WireBootstrap brings Chart.js into the WireBootstrap framework providing a powerful way of displaying data visualizations in applications developed with Bootstrap themes.

![](https://795937403-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGjmp6bcmNAsAEW4hIY%2F-MLU9VE-_O4MjvpZS7ul%2F-MLUBESjgH1-7LPqIYbV%2Fimage.png?alt=media\&token=9f17014e-a08f-4cbb-9d33-b72d5ad627af)

## Installation

The Chart.js for WireBootstrap library is located in `wire-chart.js`.  This and other other related files can be installed from the NPM package registry at`@wirebootstrap/wire-chartjs`.

```javascript
npm install @wirebootstrap/wire-chartjs
```

Chart.js for WireBootstrap will load `Chart.min.js` from a [CDN](https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js) if it's not found on the page. 

## Class

Chart.js for WireBootstrap extends the [wire.ui.component](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.ui/wire.ui.component) class.  As such, it inherits all the base functionality of that class.

To create a new instance of the Chart.js for WireBootstrap component, use the `wire.chartjs` class.

```javascript
const myChart = new wire.chartjs();
```

## Render

Render the component using an HTML `div` element.

{% tabs %}
{% tab title="JavaScript" %}

```html
<div id="chart"></div>
<script>
    new wire.chartjs().render("#chart", {});
</script>
```

{% endtab %}

{% tab title="Web Component" %}

```html
<wire-chartjs wr-config=""></wire-chartjs>
```

{% endtab %}

{% tab title="React" %}

```html
<WireComponent component="wire.chartjs" config={}>
    <div></div>
</WireComponent>
```

{% endtab %}

{% tab title="Vue" %}

```html
<div wire-component="wire.chartjs" v-wire-config=""></div>
```

{% endtab %}

{% tab title="Angular" %}

```html
<div wire-component="wire.chartjs" [config]=""></div>
```

{% endtab %}
{% endtabs %}