Chart.js

Chart.js for WireBootstrap

Chart.js is simple yet flexible JavaScript charting for designers & developers. Chart.js supports bar, line, area, pie, and other chart types.

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.

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.

npm install @wirebootstrap/wire-chartjs

Chart.js for WireBootstrap will load Chart.min.js from a CDN if it's not found on the page.

Class

Chart.js for WireBootstrap extends the 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.

const myChart = new wire.chartjs();

Render

Render the component using an HTML div element.

JavaScript

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

Web Component

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

React

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

Vue

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

Angular

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