The graph does not display even tho the data is set as in example

[mm-psymbl]

I placed the example code in my own project and the graph does not show up :( no errors or anything, it is just blank and only thing i can see is the "change data" button..

Can you help out? I tried to set manually the height and width and still no luck.

[mm-psymbl]

I didn't import it but now that I did, i get the following:

This likely means that the library (@nativescript/ui-charts/angular) which declares UIChartsViewModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Is this not compatible with angular 10+ and {N} 7?

[mm-psymbl]

I was able to compile and run but as soon as I open the page where the chart is, the app crashes with no error. Any idea?

[shiv19]

https://github.com/NativeScript/nativescript-ui-charts/issues/7#issuecomment-791907287

Can you try this version of the plugin? Instructions on how to use it is in the comment

[mm-psymbl]

@shiv19 can i use it with npm i @imakeltd/nativescript-highcharts --save or should install the local copy?

[shiv19]

It is not on npm, so you can't install it like that. It is a private package. I just haven't gotten around to make all the changes in this private package to the @nativescript version of it.

[mm-psymbl]

@shiv19 ok thanks. never tried installing it locally, but i tried to add it in my root folder and then do tns plugin add ./nativescript-highcharts-1.0.14-npm.tgz.zip and I get npm ERR! code ENOTDIR npm ERR! syscall open npm ERR! path /Users/manuelmaestrini/Programming/psymbl/mobile/nativescript-highcharts-1.0.14-npm.tgz.zip/package.json npm ERR! errno -20 npm ERR! ENOTDIR: not a directory, open '/Users/manuelmaestrini/Programming/psymbl/mobile/nativescript-highcharts-1.0.14-npm.tgz.zip/package.json'

I tried to reference it also with absolute path but also not working :/

Any idea why?

Appreciate the help btw!

[shiv19]

Classic gotcha. You didn't extract the zip file. You can only add the plugin as a tgz file. I've mentioned that you need to extract the zip file in my github comment linked up there.

Github doesn't allow uploading tgz files here, so I had to zip it.

[mm-psymbl]

my bad, i think i could add the .zip / .tar itself without uncompressing it :D

[mm-psymbl]

ahah thanks :)

[mm-psymbl]

@shiv19 i have the same problem now tho... When i click on the page where the graph is, the app crashes without error or warning, so i find it impossible to understand what is going on. I imported UIChartsViewModule in my app.module.ts under imports... :/

[shiv19]

are you on {N} 7?

[mm-psymbl]

yes

[shiv19]

The plugin in that tgz file was written for {N} 6, plus it doesn't have the angular component that you are importing. you'd have to copy the angular part over from the version of the plugin in this repo.

The plugin in this repo has actually been updated to work for {N} 7 by Nathan Walker

The project that I'm using this plugin in, is still on {N} 6.

You can try installing the version of the plugin in this repo, then in the node_modules> @ nativescript > ui-charts folder find the angular folder.

Copy that over to the folder of the plugin that I gave you. And also update the import statements where necessary.

[mm-psymbl]

@shiv19 should I add the angular folder to your folder before running tns add or directly in the node_modules folder of your plugin?

Also the import statements to update, you mean in my own project and not in yours, right?

[shiv19]

Let me just update this repo now. This has been long overdue.. Give me an hour.

[mm-psymbl]

@shiv19 appreciate it <3

[shiv19]

@mm-psymbl try https://www.npmjs.com/package/@nativescript/ui-charts/v/0.1.0 npm i -S @nativescript/ui-charts@latest

I could not get the angular demo running on my local. But I hope you get it working with your project.

I've updated the {N} Core version of the demo, and it is working well on my local with {N} 7

I'll ask Nathan Walker's help to fix the angular demo.

The main change is that you can no longer bind the chartOptions directly in the XML,

you have to use the loaded event on the charts view and set the chart options in the loaded event handler. This is illustrated both in the updated read me, and in the demos for {N} Core.

[mm-psymbl]

hey @shiv19

It works! Thank you so much !!! Now i hope i can find out all the styling options and tips and tricks :)

[shiv19]

Another thing I forgot to mention is, in case you want to update the chart data on the fly, use updateOptions() and pass the new chart options object to it. I've demonstrated this in the basic-line chart examples in the {N} core demo app.

[mm-psymbl]

Thank you again :) You guys rock!