BarSeries Label Style issues

7 posts, 0 answers
  1. Marcello
    Marcello avatar
    8 posts
    Member since:
    Mar 2017

    Posted 25 Apr Link to this post

    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>
  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 26 Apr Link to this post

    Hello Marcello,

    I create sample NativeScript Angular 2 sample app with "nativescript-telerik-ui-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 (tns --version)
    • tns-core-modules version 
    • nativescript-telerik-ui version 

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



    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Marcello
    Marcello avatar
    8 posts
    Member since:
    Mar 2017

    Posted 17 May Link to this post

    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.

  4. Marcello
    Marcello avatar
    8 posts
    Member since:
    Mar 2017

    Posted 17 May Link to this post

    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>
  5. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 18 May Link to this post

    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 tns-core-modules 3.0.0 and nativescript-telerik-ui-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.json 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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  6. Marcello
    Marcello avatar
    8 posts
    Member since:
    Mar 2017

    Posted 30 Jun in reply to nikolay.tsonev Link to this post

    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

  7. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 03 Jul Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top