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