search

ProgressNS / nativescript-ui-feedback

This repository is used for customer feedback regarding Telerik UI for NativeScript. The issues system here is used by customers who want to submit their feature requests or vote for existing ones.
Other
115 stars 21 forks source link

Chart axis styling don't apply if the axis are set to the series (not to the chart) #1298

Closed Natalia-Hristova closed 4 years ago

Natalia-Hristova commented 4 years ago

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Tell us about the problem

Setting styling (font-size) to the <GridLayout> that wraps the chart (see the playground project at the bottom) doesn't apply to the axis labels if the axis are set to the series e.g. 

<chart:LineSeries.horizontalAxis>
    <chart:CategoricalAxis />
</chart:LineSeries.horizontalAxis>
<chart:LineSeries.verticalAxis>
    <chart:LinearAxis />
</chart:LineSeries.verticalAxis>

NOTE: If the axis are set to the chart - styling applies

Which platform(s) does your issue occur on?

both

Please provide the following version numbers that your issue occurs with:

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

Here's a playground app that reproduces the issue - Styling is applied in the Bubble chart but not in the Line chart https://play.nativescript.org/?template=play-tsc&id=aAt0BP&v=2

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

        <GridLayout rows="*" xmlns:chart="nativescript-ui-chart"
                height="1000px" class="chart">
                <chart:RadCartesianChart row="0">
                    <chart:RadCartesianChart.verticalAxis>
                        <chart:LinearAxis />
                    </chart:RadCartesianChart.verticalAxis>
                    <chart:RadCartesianChart.horizontalAxis>
                        <chart:CategoricalAxis verticalLocation="Bottom"
                            labelFitMode="Rotate" labelRotationAngle="1.2" />
                    </chart:RadCartesianChart.horizontalAxis>
                    <chart:RadCartesianChart.series>
                        <chart:BubbleSeries items="{{ highDataModel }}"
                            bubbleScale="5" categoryProperty="Year"
                            valueProperty="Amount"
                            bubbleSizeProperty="Impact" />
                        <chart:BubbleSeries items="{{ middleDataModel }}"
                            bubbleScale="5" categoryProperty="Year"
                            valueProperty="Amount"
                            bubbleSizeProperty="Impact" />
                        <chart:BubbleSeries items="{{ lowDataModel }}"
                            bubbleScale="5" categoryProperty="Year"
                            valueProperty="Amount"
                            bubbleSizeProperty="Impact" />
                    </chart:RadCartesianChart.series>
                </chart:RadCartesianChart>
            </GridLayout>

            <GridLayout rows="*" xmlns:chart="nativescript-ui-chart"
                height="1000px" class="chart">
                <chart:RadCartesianChart row="0">
                    <chart:RadCartesianChart.series>
                        <chart:LineSeries items="{{ categoricalSource }}"
                            categoryProperty="Country" valueProperty="Amount">
                            <chart:LineSeries.horizontalAxis>
                                <chart:CategoricalAxis />
                            </chart:LineSeries.horizontalAxis>
                            <chart:LineSeries.verticalAxis>
                                <chart:LinearAxis />
                            </chart:LineSeries.verticalAxis>
                        </chart:LineSeries>
                    </chart:RadCartesianChart.series>
                </chart:RadCartesianChart>
            </GridLayout>