Bug in v. 0.0.10, legend is always drawn on bottom, and feature request to allow for internationalization via configuration of datetime strings

[cjohn001]

Hello @shiv19, I am currently trying to set different language strings in order for DateTime axis to appear with the language dependent labels. With highcharts I need to set the following options. I have seen, that the plugin has a function setOptions but it looks like it is just a setter for the chart options object rather than the highcharts options. Is there currently a way to achive what I am trying? Would be great if this option could be added. From what I red in the highchart docs there is no other way rather than setting the strings on the Highchart object directly. Thanks for your help.

Highcharts.setOptions({ lang: { months: [ ], weekdays: [], shortMonths: [] } });

[shiv19]

Hi @cjohn001 it is easy to add support for this. I'll just have to add support for HiLang in the options parser

[cjohn001]

@shiv19, well, this would be great. The plugin is very nice. Thanks for providing it open source. I would have one other question regarding usage. I tried to set different options to the same UIChartsView instance, hence, to show different charts in the same view. This unfortunately breaks the charts that are drawn. Is there an extra step required to reset the chart instance before setting a new chart to it? Currently I am using multiple UIChartsViews in my UI and set them visible/invisible. By means of resources this is suboptimal and I would prefer to have a single UIChartsView instance only. Is the behavior I am seeing as expected?

And could you maybe drop a line here on how to use the new feature you are currently implementing? I currently actuall only need shortMonths array. I assume, I will not have to set it as part of UIChartsView.options object?

[shiv19]

I'll get back to your query in some time. I just noticed that HiLang is not a part of HiOptions and has to be set on the chart itself. I can provide a helper that can setup this object for you. Let me build it that way.

[cjohn001]

Great, thank you very much!

[shiv19]

are you using this plugin only on Android currently?

[shiv19]

@cjohn001 Try @nativescript/ui-charts@0.0.10

the api is setLangOptions

you get the chartsView by id, and called setLangOptions on it, and pass that json that you want to pass :)

I can't test this for you right now. But if it doesn't work, let me know. I'll be back later.

[cjohn001]

Great, thanks a lot

[cjohn001]

Hello @shiv19 , setting of the parameter does not seem to work. I used the following code in the loaded event handler of the UIChartsView:

const momentLocalized = moment().locale(DeviceInfo.locale()); console.log(momentLocalized.localeData().monthsShort()); chart1a.setLangOptions({ lang: { months: momentLocalized.localeData().months(), weekdays: momentLocalized.localeData().weekdays(), shortMonths: momentLocalized.localeData().monthsShort() } });

And it seems like in 0.10 the legend is now broken. Might it be due to the change you just added? In my chart I have the following for the legend in my chart options block, which so far did show the legend on top (with plugin version 0.5). Now the legend is always showing in the bottom and I cannot change it. Could you please have another look into it. Thanks.

legend: { layout: 'horizontal', align: 'center', verticalAlign: 'top', x: 0, y: -7, floating: false, enabled: true, itemStyle: { color: '#414141', fontSize: '12px', fontWeight: 'normal' } },

[shiv19]

I'll get back at this later in the evening. Thanks

[cjohn001]

Thank you. Here it is 3 am. I will look into it tomorrow than :) Good bye.

Ok, I did not use your interface right. Code of course should be:

chart1a.setLangOptions({ months: momentLocalized.localeData().months(), weekdays: momentLocalized.localeData().weekdays(), shortMonths: momentLocalized.localeData().monthsShort() });

Than setting of the language strings works. However, the legend now seems to be broken. For completeness, attached you find my entire charts. As mentioned, legend should appear on top.

{ chart: { backgroundColor: 'rgba(0,0,0,0)', animation: false, marginTop: 17, marginBottom: 41, marginLeft: 17, marginRight: 0, borderWidth: 0, plotBorderWidth: 0, type: 'column', colors: ['#85bb2f', '#37597c', '#e63e11'], options3d: { enabled: true, alpha: 8, beta: 2, viewDistance: 15, depth: 40 } }, exporting: { enabled: false }, credits: { enabled: false }, title: { text: '' }, xAxis: { type: 'datetime', skew3d: true, labels: { enabled: true, rotation: -45 }, style: { fontSize: '12px' }, dateTimeLabelFormats: { day: '%e. %b' }, tickInterval: 24 3600 1000, // one day gridLineWidth: 0 }, yAxis: { allowDecimals: false, min: 0, minRange: 1000, gridLineWidth: 0, labels: { enabled: false }, title: { align: 'middle', text: 'kcal', rotation: 0, y: 0 }, stackLabels: { skew3d: true, enabled: true, useHTML: true, formatter: function () { return '' + this.total + ''; } } }, legend: { layout: 'horizontal', align: 'center', verticalAlign: 'top', x: 0, y: -7, floating: false, enabled: true, itemStyle: { color: '#414141', fontSize: '12px', fontWeight: 'normal' } }, plotOptions: { enableMouseTracking: false, column: { stacking: 'normal', depth: 40 } }, series: [ { name: 'Calories', stack: 's', data: [], pointStart: Date.UTC(2010, 0, 1), pointInterval: 24 3600 1000, // one day dataLabels: { enabled: false }, color: '#85bb2f', index: 1, legendIndex: 0 }, { name: 'Above Goal', data: [], stack: 's', pointStart: Date.UTC(2010, 0, 1), pointInterval: 24 3600 1000, // one day dataLabels: { enabled: false }, color: '#e63e11', index: 0, legendIndex: 1 } ] };

[cjohn001]

Ok, did some more tries. all config options for the legend are now completely ignored. Did you maybe update the hicharts version between 0.5 and 0.10, as such the bug could result from this? If so, could you downgrade to a stable version?

[shiv19]

@cjohn001 you can install any version of this plugin any time you like. I tagged 0.0.10 as "alpha" so that is not the latest version. I think the latest is 0.0.9 (in which the legend should work, if it doesn't please let me know)

I'll take a look at why legend is not working in 0.0.10

meanwhile the reason why this plugin is still in alpha is because we're waiting for a critical bug to be fixed by highcharts team. The highcharts code is OSS however, the code for the android and iOS library is not OSS, so we don't have control over fixing the bugs in the library.

Currently there is a bug in the android library where the charts height cannot be updated dynamically. This bug has been fixed by the highcharts team and it is expected to go out in Highcharts 8.2.0 library. We're waiting for that to be released. Until then this plugin will continue to stay in alpha.

If you don't have a requirement to be able to change the chart height dynamically, you should be able to use this plugin just fine.

Also meanwhile, this is a good alternative https://github.com/mhtghn/nativescript-ui-highcharts https://npm.im/nativescript-ui-highcharts

nativescript-ui-highcharts uses NativeScript's webview widget to load highcharts JS library and show charts that way.

[cjohn001]

Hello @shiv19 , thanks for the background info. I would have some further questions:

charts height cannot be updated dynamically.

Ok, I think I now understand this problem. Is my assumption correct, that the chart breaks when I update the data of the graph which lead to a recalculation of the y-Axis? I though I have a bug in my code somewhere first as the chart breaks after refreshing the data. Is there a way to fix the height of the y-Axis. I tried setting its height to 100% which should be full size of plot. But that does not help. Could you maybe also reference the highcharts issue here? That way it would be easier to check once the y-axis resize feature can be used.

To ensure that I do not have bugs in my testing code I reused your basic-line.component code in the angular-demo example for my further tries. The last officially published version seems to be 0.0.5. And in 0.0.5 the legend is at the correct position. I also tried the version 0.0.6-0.0.9, but unfortunately they seem to be completely broken. The chart does not render at all with these version of the library. It would be great if you could get the legend fixed with 0.0.10, than it would have everything I require.

I have some more questions regarding usage of the plugin:

• Do I require a highcharts license to use it? And which license would I need to purchase? There are different licenses of Highcharts available for usage on websites, but no license for usage in an app. As Highcharts seems to make even differences for the license on how the website is hosted, it would be great if you could provide some info in this regards on the main page of this plugin.

• I have seen that in the ngOnInit method you do a setTimer of 2 seconds before you update the initially set chart on the UIChartsView object. I was able to go down to 1 second with it when trying out things on IOS. However, I would be interested in what kind of initializations are done behind the scenes, that such a timeout is required, and if I could do some kind of preloading or similar in order to get rid of this initial waiting interval? Or was this timeout just an example to show asyn loading? And that case I would run into a different issue when trying to set the chart in a shorter timeinterval. This question is more because of interest. I would be able to go with the waiting interval as well.

Thanks a lot for your help

[cjohn001]

Happy new year @shiv19, I was wondering if anything new on this plugin can be expected. I am currently translating my app to different languages and cannot use plugin version larger 0.0.5 due to the bug reports I have provided. Would be great if you could give me an update.

Best regards, Christoph

[shiv19]

Hi @cjohn001, Happy New Year to you as well :) https://github.com/highcharts/highcharts-android

Looks like the HighCharts team released the 8.2.2 version of the library for Android just 6 days ago. I hope that this version should fix the dynamic height issue that I had previously mentioned. I will be updating the plugin to use this latest version of the Android lib, that dynamic height issue was the only blocker for this plugin.

I'll also test the Legend and setLangOptions API and make sure it works for you.

You will only need to buy the highcharts license if you are building a commercial app. In the project I work on, we have purchased 1 "Highcharts Developer" license. It is more of a good faith license. There is no file that has to be included in your app.

And the timeout you see in ngOninit is just to simulate a asynchronous chart load. When you want to load the chart immediately you can just hardcode the chartOptions, and the chart should load just fine.

[cjohn001]

@shiv19, thanks to let me know. I will try the new version as soon as you have updated it, could you mention the version number here once it is finished? And another question in regards to the license. Currently I am not developing a commercial app and therefore can go with the free license I think. However, I am thinking about changing this in case my app receives more interest. Therefore it would be great to know what license I than would have to purchase. Seems like one can just get developer licenses for the highcharts library to be included into webpages. Is there a special license for the mobile library you are using, or would I have to purchase the same developer license as for the web? Would be great if you could add this information to the readme of the plugin. I was searching for this info without success in the past.

[cjohn001]

Hello @shiv19, I have a question regarding the bug in the highcharts library. Might it be that it is due to the v8 engine? I today tried to switch my ios runtime from tns-ios to @nativescript/ios:7.1.0 and that lets all my charts break, even the most simple one. The following example chart is breaking due to the exporting:{} block. But the block itself seems to not be the problem, nearly all other configuration options also break the chart. Please let me know as soon as you have updated the highcharts libary. I would than join you debugging the plugin in more detail. Because I think this plugin is currently the only option to get to nice charts with nativescript. I tried the other highcharts plugins already, but say have serious limitations as well.

chartOptions: any = { chart: { backgroundColor: 'rgba(0,0,0,0)', animation: true, marginTop: 30, marginBottom: 41, marginLeft: 17, marginRight: 0, borderWidth: 0, plotBorderWidth: 0, type: 'column', options3d: { enabled: true, alpha: 8, beta: 2, viewDistance: 15, depth: 80 } }, exporting: { enabled: false } };

[shiv19]

What was the tns-ios version that you were on? 6.5.3?

[cjohn001]

Hello @shiv19, I am currently using "tns-ios": "6.5.3", with "@nativescript/ui-charts": "0.0.5" This is the only combination of modules which for me runs correctly.

I tried version "@nativescript/ios": "7.1.0", but then things crash like described previously. I was wondering if you have done tests with this new runtime. I would recommend you upgrade the plugin to the new library version and I will than start doing systematic testing and provide you with examples were things break. I think that way we get things fixed most efficiently.

[shiv19]

The current plugin demo is using rc version of NativeScript which is a v7 version. I'll have to check what broke 🤔

[cjohn001]

Hello @shiv19, I was wondering, if it might be possible to get an update of the plugin from you till end of the month. I will have holiday then and would like to look into the issues that do not allow me to use the plugin with the new V8 runtime. As I do not want to do work that you have already done, and as the recent highcharts library is not integrated yet, it would be great to get your recent sources. In case you could update the hightcharts library this would be very great. I am an absolute newbie on nativescript plugins, hence this would really help to get me setup. Thank you very much for your support!

[shiv19]

@cjohn001 Here's the latest version of this plugin that I use in the project of my day job. It has several fixes that haven't made it to the version on this repo yet. The name of this package is @imakeltd/nativescript-highcharts

To use it in your project, first extract this zip file, then you can add it like this

tns plugin add <path to tgz file>

nativescript-highcharts-1.0.14-npm.tgz.zip

this version of the plugin also fixes the issue where you can't set the chart height dynamically on Android (which was what caused this project to remain in beta),

and now that we have a solution for that, I will take some time to update the plugin in this repo soon.

[cjohn001]

@shiv19 Thank you very much!!! I will try to wait till you merged it into the repo here. Will make it easier to integrate my findings into PRs. But great to know that there already is a fix! In the meantime I will update the demo project to NS7, this will make it easier for us to discuss issues.

[shiv19]

Sure that sounds good to me!

[cjohn001]

With 0.1.0 I have seen this working.

[shiv19]

Awesome! glad that's working for you