BarSeries Label Style issues

[Marcello]

Hi, I'm trying to style some labels on Bar Charts but most of the properties doesn't seem to work.

I've attached an image generated with the code ahead.

The properties fillColor, textColor, strokeColor, fontStyle are not working properly.

Any workarounds?


<BarSeries tkCartesianSeries seriesName="income"

    [items]="income" categoryProperty="description"

    valueProperty="value" selectionMode="none" showLabels="true">

    <PointLabelStyle tkBarLabelStyle fillColor="red" textColor="red" strokeColor="red" fontStyle="Italic" textSize="18"></PointLabelStyle>

</BarSeries>

[Nikolay Tsonev]

Hello Marcello,

I create sample NativeScript Angular 2 sample app with "---pro" and test the case with applying the fillColor, textColor, strokeColor, fontStyle to the Chart labels. 
However, everything seems to work as expected and all those styles are applied. 
For you convenience, I am attaching the sample project, could you review it and make the needed changes, which will allow us to debug the case on our side.

Also, it would help if you could provide some more info about your environment:

• NativeScript CLI ( --version)
• -core-modules version 
• -- version 

and information about the device or emulator, which is used for testing.

Regards,
nikolay.tsonev
Telerik by Progress

[Marcello]

Hi Nikolay, sorry I forgot to add info about my environment and for taking this long to answer back.

Here are my current versions:

NativeScript CLI: 3.0.0-2017-03-17-8305
"tns-core-modules": "^3.0.0",

"tns-android": "3.0.0",

"nativescript-telerik-ui-pro": "2.0.1",

Emulator: Nexus 5 API 25,

Device: Moto G Android 6

I've recently updated the project dependencies but the problem persists. Before the update I was using the exact same dependencies as your example("nativescript-telerik-ui-pro": "^1.6.1", "tns-core-modules": "2.5.2").

Your example works fine here but I couldn't find out what's wrong with my template. Also I've tested it on "tns-ios": 3.0.0 and it seems to work fine.

Here is my template:

Also there was a strange issue with the bar colors not being set correctly but it was fixed with the "workaround for colors".

01.<ScrollView *ngIf="hasContent" orientation="horizontal">
02.    <StackLayout class="summary-content">
03.        <RadCartesianChart height="300" width="600" allowAnimation="true" seriesSelectionMode="none">
04.            <CategoricalAxis tkCartesianHorizontalAxis labelSize="14" lineColor="#ccc"></CategoricalAxis>
05.            <LinearAxis tkCartesianVerticalAxis hidden="true"></LinearAxis>
06.
07.            <BarSeries tkCartesianSeries seriesName="income"
08.                [items]="income" categoryProperty="description"
09.                valueProperty="value" selectionMode="none" showLabels="true">
10.                <PointLabelStyle tkBarLabelStyle textSize="15" textColor="black"></PointLabelStyle>
11.            </BarSeries>
12.            <BarSeries tkCartesianSeries seriesName="available"
13.                [items]="available" categoryProperty="description"
14.                valueProperty="value" selectionMode="none" showLabels="true">
15.                <PointLabelStyle tkBarLabelStyle textSize="15" textColor="black"></PointLabelStyle>
16.            </BarSeries>
17.            <BarSeries tkCartesianSeries seriesName="inbound"
18.                [items]="inbound" categoryProperty="description"
19.                valueProperty="value" selectionMode="none" showLabels="true">
20.                <PointLabelStyle tkBarLabelStyle textSize="15" textColor="black"></PointLabelStyle>
21.            </BarSeries>
22.
23.
24.            <Palette tkCartesianPalette seriesName="income">
25.                <PaletteEntry tkCartesianPaletteEntry fillColor="#6F8EAA" strokeColor="Transparent"></PaletteEntry>
26.            </Palette>
27.            <Palette tkCartesianPalette seriesName="available">
28.                <PaletteEntry tkCartesianPaletteEntry fillColor="#6CED92" strokeColor="Transparent"></PaletteEntry>
29.            </Palette>
30.            <Palette tkCartesianPalette seriesName="inbound">
31.                <PaletteEntry tkCartesianPaletteEntry fillColor="#F4BB57" strokeColor="Transparent"></PaletteEntry>
32.            </Palette>
33.            <!-- workaround for colors -->
34.            <Palette tkCartesianPalette seriesName="fix">
35.                <PaletteEntry tkCartesianPaletteEntry fillColor="Transparent" strokeColor="Transparent"></PaletteEntry>
36.            </Palette>
37.            <!-- workaround for colors -->
38.
39.        </RadCartesianChart>
40.    </StackLayout>
41.</ScrollView>

Thanks for helping.

[Marcello]

Sorry, the example above was quite complex.

Here is one a little simpler. I'm also attaching an image with the result.

01.<Label text="Entrada de Caixa" class="revenue-header"></Label>
02.<ScrollView *ngIf="hasContent" orientation="horizontal">
03.    <StackLayout class="summary-content">
04.        <RadCartesianChart height="300" width="600" allowAnimation="true" seriesSelectionMode="none">
05.            <CategoricalAxis tkCartesianHorizontalAxis labelSize="14" lineColor="#ccc"></CategoricalAxis>
06.            <LinearAxis tkCartesianVerticalAxis hidden="true"></LinearAxis>
07.
08.            <BarSeries tkCartesianSeries seriesName="inbound"
09.                [items]="inbound" categoryProperty="description"
10.                showLabels="true"
11.                valueProperty="value" selectionMode="none">
12.                <PointLabelStyle tkBarLabelStyle fillColor="#F4BB57" textColor="white" textSize="15"></PointLabelStyle>
13.            </BarSeries>
14.
15.            <Palette tkCartesianPalette seriesName="inbound">
16.                <PaletteEntry tkCartesianPaletteEntry fillColor="#F4BB57" strokeColor="Transparent"></PaletteEntry>
17.            </Palette>
18.
19.        </RadCartesianChart>
20.    </StackLayout>
21.</ScrollView>
22.
23.<FlexBoxLayout *ngIf="hasContent" class="chart-legend">
24.    <StackLayout orientation="horizontal">
25.        <AbsoluteLayout width="10" height="10" backgroundColor="#F4BB57"></AbsoluteLayout>
26.        <Label text="Recebimento" class="legend-text"></Label>
27.    </StackLayout>
28.</FlexBoxLayout>

[Nikolay Tsonev]

Hello Marcello,
First of all, thank you for the attached code snippet. 
I reviewed the code and the given description of the CLI and modules versions, which you are using.
One thing that I notice is that you are using RC version of the CLI. At this time the latest official CLI is 3.0.1 and you could update it while using

npm install nativescript --g

I also tested the code on a sample project, while using -core-modules 3.0.0 and ---pro 2.0.1 and the style seems to be applied properly.
For your convenience, I am attaching the project, which I use for testing and screenshot from both Android and iOS simulators.

If you still have a problem please send us a sample project, which could be debugged locally or at least the package. file from the project.

In the meantime, you could upgrade all dependencies in your project to be similar to those of the attached project. Also before rebuilding delete platforms and node_modules folders, remove the app from the device or simulator and rebuild with

tns run <platform name>

Regards,
nikolay.tsonev
Telerik by Progress

[Marcello]

Hi Nikolay, I've managed to reproduce the issue.

It seems to happen when the data comes from an asynchronous source. Also seems to the be same issue that causes this: http://www.telerik.com/forums/pieseries-white-box-around-values

Since I can't attach zip files, here are the files. I've just modified the example project you uploaded, the dependencies are still the same.

item.component.ts

item.component.html

[Nick Iliev]

Hello Marcello,

Thank you for reporting this issue and providing code samples that can easily demonstrate the real problem.
I can confirm that after some local test the issue is reproduced when using any kind of asynchronously loaded data and the result is that the Label styles are not applied but the default ones are loaded instead.

We will need some additional time to investigate this one and for your convenience, I have logged this issue as a bug in the nativescript-telerik-ui feedback repository. You can keep track on this issue for information from our development team about fixes for possible workaround and any related fixes,

Regards,
Nikolay Iliev
Progress Telerik