@brightyard/wappler-chartjs
Advanced tools
+1
-1
| { | ||
| "name": "@brightyard/wappler-chartjs", | ||
| "version": "0.0.3", | ||
| "version": "0.0.4", | ||
| "type": "module", | ||
@@ -5,0 +5,0 @@ "description": "ChartJs", |
+8
-8
| # GraphJS Extension for Wappler | ||
| # ChartJS Extension for Wappler | ||
| The GraphJS 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. | ||
| 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. | ||
@@ -16,10 +16,10 @@ > **Note:** This extension is not ready for production and is exposed for other Wapplers to review and suggest improvements. | ||
| You can add the custom GraphJS component to your Wappler project by following these steps: | ||
| You can add the custom ChartJS component to your Wappler project by following these steps: | ||
| 1. **Include the GraphJS Component:** | ||
| 1. **Include the ChartJS Component:** | ||
| In Wappler's App Structure panel, add the GraphJS component to your page: | ||
| In Wappler's App Structure panel, add the ChartJS component to your page: | ||
| ```html | ||
| <dmx-graphjs id="chart1" type="bar" dmx-bind:data="serverConnect1.data.chartData" dmx-bind:labels="['January', 'February', 'March']"></dmx-graphjs> | ||
| <dmx-chartjs id="chart1" type="bar" dmx-bind:data="serverConnect1.data.chartData" dmx-bind:labels="['January', 'February', 'March']"></dmx-chartjs> | ||
| ``` | ||
@@ -44,3 +44,3 @@ | ||
| ```html | ||
| <dmx-graphjs | ||
| <dmx-chartjs | ||
| id="chart1" | ||
@@ -51,3 +51,3 @@ type="bar" | ||
| 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-graphjs> | ||
| ></dmx-chartjs> | ||
| ``` | ||
@@ -54,0 +54,0 @@ |