The ChartJS extension integrates Chart.js charts into Wappler. Use this component to display data in various chart formats, including line, bar, and pie charts. It supports dynamic data binding and customizable chart configurations.

Note: This extension is not ready for production and is exposed for other Wapplers to review and suggest improvements.

Installation

1. Install the Package

Follow this guide to copy the necessary files to your Wappler project's extensions folder.

2. Add the Component to Wappler

You can add the custom ChartJS component to your Wappler project by following these steps:

Include the ChartJS Component:

In Wappler's App Structure panel, add the ChartJS component to your page:
```
<dmx-chartjs id="chart1" type="bar" dmx-bind:data="serverConnect1.data.chartData" dmx-bind:labels="['January', 'February', 'March']"></dmx-chartjs>
```

Features

Multiple Chart Types

Supports various chart types such as line, bar, pie, doughnut, radar, and more.
Dynamic Data Binding

Bind data directly from Wappler’s data sources for real-time updates.
Customizable Appearance

Adjust colors, labels, legends, and other chart properties for a fully customized look.

Example Usage

<dmx-chartjs
  id="chart1"
  type="bar"
  dmx-bind:data="serverConnect1.data.chartData"
  dmx-bind:labels="['January', 'February', 'March']"
  dmx-bind:options="{     backgroundColor: [       'rgba(255, 99, 132, 0.2)',       'rgba(54, 162, 235, 0.2)',       'rgba(255, 206, 86, 0.2)',       'rgba(75, 192, 192, 0.2)',       'rgba(153, 102, 255, 0.2)',       'rgba(255, 159, 64, 0.2)'     ],     borderColor: [       'rgba(255,99,132,1)',       'rgba(54, 162, 235, 1)',       'rgba(255, 206, 86, 1)',       'rgba(75, 192, 192, 1)',       'rgba(153, 102, 255, 1)',       'rgba(255, 159, 64, 1)'     ],     borderWidth: 1   }"
></dmx-chartjs>