You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<b>A powerful chart / graph plugin, supporting line, bar, pie, radar, bubble, and candlestick charts as well as scaling, panning and animations.</b></br>
In 2.x most methods like `setColor`/`getColor` have been changed to properties like `color`
16
78
You can either to it manually and update them all (you should get tsc errors for removed or renamed methods), or you can use a regexp like `/set([A-Z])(\w*?)\(/` to search and replace (first group should be lowercase in the replace) with something like `\L$1$2=(`
17
79
Then use typings to fix potential name change
18
80
81
+
82
+
[](#usage)
83
+
19
84
## Usage
20
85
21
86
For gestures to work, make sure to add the following code block inside main application file (e.g. app.ts):
@@ -27,6 +92,9 @@ install();
27
92
28
93
You can also check [Wiki](https://github.com/nativescript-community/ui-chart/wiki) for any useful material.
29
94
95
+
96
+
[](#plain-nativescript)
97
+
30
98
## Plain NativeScript
31
99
32
100
<spanstyle="color:red">IMPORTANT: </span>Make sure you include `xmlns:ch="@nativescript-community/ui-chart"` on the Page element.
@@ -75,6 +143,9 @@ export function onLineChartLoaded(args) {
75
143
}
76
144
```
77
145
146
+
147
+
[](#nativescript--vue)
148
+
78
149
## NativeScript + Vue
79
150
80
151
```javascript
@@ -126,6 +197,9 @@ onChartLoaded() {
126
197
}
127
198
```
128
199
200
+
201
+
[](#nativescript--angular)
202
+
129
203
## NativeScript + Angular
130
204
Register the element in app.module.ts
131
205
```javascript
@@ -177,6 +251,9 @@ onChartLoaded(args) {
177
251
}
178
252
```
179
253
254
+
255
+
[](#about)
256
+
180
257
## About
181
258
182
259
This plugin is based on [MPAndroidChart](https://github.com/PhilJay/MPAndroidChart), a powerful & easy to use chart library. Therefore, special thanks goes to Philipp Jahoda, the creator of [MPAndroidChart](https://github.com/PhilJay/MPAndroidChart) and the rest of his team.
@@ -200,7 +277,112 @@ That is because:
200
277
- It can share the same data array between multiple datasets
201
278
- It can still use the power of native arrays to NOT marshal arrays of positions while drawing lines with [@nativescript-community/ui-canvas](https://github.com/nativescript-community/ui-canvas)
202
279
203
-
## Documentation
280
+
### Examples:
281
+
282
+
-[Basic](demo-snippets/vue/Basic.vue)
283
+
-[Basic](demo-snippets/vue/BubbleChart.vue)
284
+
-[Basic](demo-snippets/vue/CandleStickChart.vue)
285
+
-[Basic](demo-snippets/vue/CombinedChart.vue)
286
+
-[Basic](demo-snippets/vue/NSChart.vue)
287
+
-[Basic](demo-snippets/vue/PieChart.vue)
288
+
-[Basic](demo-snippets/vue/Realtime.vue)
289
+
-[Basic](demo-snippets/vue/ScatterPlot.vue)
290
+
291
+
292
+
[](#demos-and-development)
293
+
294
+
## Demos and Development
295
+
296
+
297
+
### Repo Setup
298
+
299
+
The repo uses submodules. If you did not clone with ` --recursive` then you need to call
300
+
```
301
+
git submodule update --init
302
+
```
303
+
304
+
The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.
305
+
306
+
To develop and test:
307
+
if you use `yarn` then run `yarn`
308
+
if you use `pnpm` then run `pnpm i`
309
+
310
+
**Interactive Menu:**
311
+
312
+
To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
313
+
314
+
### Build
315
+
316
+
```bash
317
+
npm run build.all
318
+
```
319
+
WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`
320
+
321
+
### Demos
322
+
323
+
```bash
324
+
npm run demo.[ng|react|svelte|vue].[ios|android]
325
+
326
+
npm run demo.svelte.ios # Example
327
+
```
328
+
329
+
Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`
330
+
Instead you work in `demo-snippets/[ng|react|svelte|vue]`
331
+
You can start from the `install.ts` of each flavor to see how to register new demos
332
+
333
+
334
+
[](#contributing)
335
+
336
+
## Contributing
337
+
338
+
### Update repo
339
+
340
+
You can update the repo files quite easily
341
+
342
+
First update the submodules
343
+
344
+
```bash
345
+
npm run update
346
+
```
347
+
348
+
Then commit the changes
349
+
Then update common files
350
+
351
+
```bash
352
+
npm run sync
353
+
```
354
+
Then you can run `yarn|pnpm`, commit changed files if any
355
+
356
+
### Update readme
357
+
```bash
358
+
npm run readme
359
+
```
360
+
361
+
### Update doc
362
+
```bash
363
+
npm run doc
364
+
```
365
+
366
+
### Publish
367
+
368
+
The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)
369
+
Simply run
370
+
```shell
371
+
npm run publish
372
+
```
373
+
374
+
### modifying submodules
375
+
376
+
The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
377
+
One easy solution is t modify `~/.gitconfig` and add
378
+
```
379
+
[url "ssh://git@github.com/"]
380
+
pushInsteadOf = https://github.com/
381
+
```
382
+
383
+
384
+
[](#questions)
385
+
386
+
## Questions
204
387
205
-
The NativeScript 'ui-chart' plugin is based on the [MPAndroidChart](https://github.com/PhilJay/MPAndroidChart) library.
206
-
In few words, its API is identical. The possibility to add API reference will be considered in the future.
388
+
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
0 commit comments