Nativescript-ui-feedback: [Bug] Chart - setting 'minimum' > 0 on LinearAxis will hide the x-axis labels on iOS

Created on 16 May 2017 · 12Comments · Source: ProgressNS/nativescript-ui-feedback

Setting the minimum property of a LinearAxis to a value > 0 will hide the labels on the x-axis as those are drawn off canvas.

Which platform(s) does your issue occur on?

Versions

Progress NativeScript UI version: 2.0.1
CLI: 3.0.1
Cross-platform modules: 3.0.0
Runtime(s): 3.0.0

Please tell us how to recreate the issue in as much detail as possible.

Add a graph like this to an Angular app (not that this is Angular related):

  <RadCartesianChart tkExampleTitle tkToggleNavButton>
    <DateTimeCategoricalAxis tkCartesianHorizontalAxis dateFormat="dd/MM"></DateTimeCategoricalAxis>
    <LinearAxis minimum="74" maximum="90" tkCartesianVerticalAxis></LinearAxis>
    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Date" valueProperty="Weight"></LineSeries>
  </RadCartesianChart>

With the minimum set to 74, the value 0 is not drawn, so the labels of the x-axis (dates in this case) are not shown (image on the left, on the right is after my change, below).

issue

What's the cause?

Check nativescript-telerik-ui-pro/chart/visualization/views/chart-axis.ios.js (I don't have access to the TypeScript sources). The function LinearAxis.prototype.onMinimumChanged never updates the offset / baseline properties which is where the x-axis labels are rendered. So on a local copy I've changed it to this to make the labels appear nicely (not sure you need to change both, this just worked on the first try so I didn't look back):

    LinearAxis.prototype.onMinimumChanged = function (oldValue, newValue) {
        if (!isNaN(+newValue)) {
            if (this.ios.range) {
                this.ios.range.minimum = newValue;
            }
            else {
                this.ios.range = TKRange.rangeWithMinimumAndMaximum(newValue, newValue * 2);
            }

            this.ios.offset = newValue; // added this
            this.ios.baseline = newValue; // .. and this

            this.update();
        }
    };

backlog bug chart new PR ios high

Source

EddyVerbruggen

👍1

Most helpful comment

I believe it is still relevant. I have an exact same issue in latest version Nativescript Angular chart

DanielRitvas on 17 Dec 2018

👍3

All 12 comments

Thanks @EddyVerbruggen, we're reviewing the case and will include a fix in the next verion of NS-UI.

ginev on 16 May 2017

👍1

@EddyVerbruggen,
We've investigated the case a bit more and have come to the conclusion that the fix suggested here is not an ultimate solution as there are cases in which it does not work as expected. The case needs to be handled at native level in the iOS Chart implementation. For the time being our suggestion is to simply set the .ios.offset and .ios.baseline properties in your particular scenario.

Is that alright with you?

ginev on 29 May 2017

Of course. The further upstream this is fixed the better 👍

EddyVerbruggen on 29 May 2017

🎉1

I happened to have a repro of the problem in the Playground, so posting it here for reference: https://play.nativescript.org/?id=9FxDMN2aIw0LzMcDiq100&template=play-ng