@brightyard/wappler-chartjs

ChartJS Extension for Wappler

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>

License

MIT License. Please feel free to use and modify this component as needed.