CategoryAxis for SecondaryAxis

[Reihaneh Khaksaran]

Hello,

I want my secondary axis to be CategoryAxis, but I realized that I can not apply CategoryAxis to secondaryAxis, is there any way to do so?

Best regards,

Reihaneh

[Bharathiraja K]

Hi Reihaneh, 

 

Greetings from Syncfusion. We have created simple sample based on your requirement using secondaryAxis LabelCreated event as you see in the below code snippet.  

 

Code Snippet [C#]: 

        public MainPage() 

        { 

            InitializeComponent(); 

            //Trigger label created event to change the axis label 

            this.numericalAxis.LabelCreated += NumericalAxis_LabelCreated; 

        } 

 

        private void NumericalAxis_LabelCreated(object sender, ChartAxisLabelEventArgs e) 

        { 

            string label = e.LabelContent; 

 

            //Changing the axis label 

            switch (label) 

            { 

                case "1": 

                    e.LabelContent = "One"; 

                    break; 

                case "2": 

                    e.LabelContent = "Two"; 

                    break; 

                case "3": 

                    e.LabelContent = "Three"; 

                    break; 

                case "4": 

                    e.LabelContent = "Four"; 

                    break; 

                case "5": 

                    e.LabelContent = "Five"; 

                    break; 

                case "6": 

                    e.LabelContent = "Six"; 

                    break; 

            } 

        } 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/142424/ze/Chart_GettingStarted-1497991800.zip  

 

Please refer our online help document to know more about LabelCreated event. 

UG link: https://help.syncfusion.com/xamarin/sfchart/axis#event 

 

Thanks, 

Bharathiraja.  

[Reihaneh Khaksaran]

Hi Bharathiraja,

Thank you for your reply, it kinda worked, I mean at first it was OK, but when I addded "StackingBarSeries" to my chart, then my PrimaryAxis got the values instead of my SecondaryAxis!!

I want to have a chart like the image I have attached, could you please help me to achieve that?

Thanks in advance,

Reihaneh

Attachment: DesiredChart_4ebb5cd.zip

[Devakumar Dhanapoosanam]

Hi Reihaneh, 

 

We would like to let you know that the primary axis in bar type (bar, stacking bar, transposed column etc..) series will be positioned vertically and secondary axis will be positioned horizontally. So, you can set the category axis to primary axis and numerical axis to secondary axis to achieve your requirement. We have created a simple sample to demonstrate this, please download it from the following location. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/142424/ze/1424241635354521.zip  

 

Please refer the below UG link for more details: 

Link: https://help.syncfusion.com/xamarin/sfchart/charttypes#stacked-bar-chart  

 

Please let us know if you need any further assistance. 

 

Regards, 

Devakumar 

[Reihaneh Khaksaran]

Hi Devakumar,

Thank you for your reply and the sample, I have another question, in the sample you provided, a DataMarker is set for the series which is exactly what I want, but I want my chart height to be set to 100, and when I do this, I noticed that the data merkers' height remains the same so I browsed a little and found MarkerHeight property on the data marker but whatever number I set for my MarkerHeight, it doesn't change at all, kind of like that the property doesn't work.

I have attached a screenshot of the chart in which I have set MarkerHeight for my markers

                                                                                                                                                                                                           

could you please help me with this?

Best regards,

Reihaneh

Attachment: DataMarkerHeight_14264ca6.zip

[Reihaneh Khaksaran]

This is also the XAML I have in my app:

    <StackLayout >

        <chart:SfChart  x:Name="chart"

                        HorizontalOptions="FillAndExpand" 

                        HeightRequest="100">

            <chart:SfChart.PrimaryAxis>

                <chart:CategoryAxis IsInversed="True"/>

            </chart:SfChart.PrimaryAxis>

            <chart:SfChart.SecondaryAxis>

                <chart:NumericalAxis/>

            </chart:SfChart.SecondaryAxis>

            <chart:SfChart.BindingContext>

                <local:ViewModel x:Name="viewModel"/>

            </chart:SfChart.BindingContext>

            <chart:SfChart.Series>

                <chart:StackingBarSeries ItemsSource="{Binding Data}" 

                                      XBindingPath="XValue" YBindingPath="YValue">

                    <chart:StackingBarSeries.DataMarker>

                        <chart:ChartDataMarker ShowMarker="False" MarkerHeight="0"/>

                    </chart:StackingBarSeries.DataMarker>

                </chart:StackingBarSeries>

                

                <chart:StackingBarSeries ItemsSource="{Binding Data1}" 

                                      XBindingPath="XValue" YBindingPath="YValue" 

                                      >

                    <chart:StackingBarSeries.DataMarker>

                        <chart:ChartDataMarker ShowMarker="False"/>

                    </chart:StackingBarSeries.DataMarker>

                </chart:StackingBarSeries>

            </chart:SfChart.Series>

        </chart:SfChart>

        <Label Text="k" FontSize="5" Margin="10"/>

    </StackLayout>

[Bharathiraja K]

Hi Reihaneh, 

 

We have analysed your query and we would like to let you know that, we are having two things inside the ChartDataMarker, one is Label, and another is Marker. You can enable or disable Label by using ShowLabel property in the data marker and enable or disable the Marker using the ShowMarker property. 

In your sample, you have set ShowMarker property to false and set the MarkerHeight to some value and Marker does nothing in the above scenario because you have set ShowMarker property to false.  

 

Solution1:  

If you want to customize the marker appearance, you have to set ShowMarker property as true and customize the Marker using the properties mentioned in the following link - https://help.syncfusion.com/xamarin/sfchart/datamarker#customizing-marker-shapes 

 

Solution2: 

We suspect that, you may need to resize the data marker label and it can be achieved by setting FontSize property in LabelTemplate property in the ChartDataMarker class. Also you can customize the Label appearance using the properties mentioned in the following link - https://help.syncfusion.com/xamarin/sfchart/datamarker#customizing-labels  

 

 

Code Snippet [XAML]: 

 <chart:StackingBarSeries ItemsSource="{Binding Data}" 
                                      XBindingPath="XValue" YBindingPath="YValue">
                    <chart:StackingBarSeries.DataMarker>
                        <chart:ChartDataMarker LabelContent="DataMarkerLabel" LabelTemplate="{StaticResource dataTemplate}" ShowMarker="true" MarkerHeight="10" MarkerWidth="10">
                            <chart:ChartDataMarker.LabelStyle>
                                <chart:DataMarkerLabelStyle LabelPosition="Outer" />
                            </chart:ChartDataMarker.LabelStyle>
                        </chart:ChartDataMarker>
                    </chart:StackingBarSeries.DataMarker>
 </chart:StackingBarSeries>  

 

 

<ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="dataTemplate">
                <StackLayout>
                    <Label Text="{Binding Data.YValue}" FontSize="9" BackgroundColor="{Binding BackgroundColor}" TextColor="White"/>
                </StackLayout>
            </DataTemplate>
        </ResourceDictionary>
</ContentPage.Resources>  

 

 

Screenshot: 

 

 

Sample: http://www.syncfusion.com/downloads/support/forum/142424/ze/ChartDataMarkerSample-203169094.zip   

 

Please let us know if you need further assistance on this. 

 

Regards, 

Bharathi. 

[Reihaneh Khaksaran]

Hello Bharathiraja,

Thank you for your reply, I got it, thanks for the explanation.

But there's another issue I'm facing, I have attached a project in which there is the functionality that I want to achieve, I mean as for the series I want bar series, and I want my secondory axis (which, as you mentioned, is primary axis in bar series) to get labels but act as a numerical axis, I mean the list/observable collection that I assign to the ItemSource property of my series should get numbers as input, something like this : "list.Add(new ChartDataPoint(0.5, 1))"

In the sample you provided, the first argument of the Data list is of type string, but I want the chart to act as a numerical chart but gets labels on the YAxis, I don't know if that's possible with sfchart, I'd appreciate if you could help me with this

Best regards,

Reihaneh

Attachment: Test_ae8e95d4.zip

[Bharathiraja K]

Hi Reihaneh, 

 

Thanks for your update. We have checked your sample. In that, you have wrongly added range in PrimaryAxis and SecondaryAxis. So, series segment was not visible. It is possible to show the category text in Numerical axis (Primary Axis) of Bar series by using label created event.  

 

Label will be created based on the range given in the sample or automatically generated from the given points. So, we need to set Category string in LabelCreated event based on the requirement and remove the unwanted labels. We have modified the samples. Please find the code snippet and sample below here. 

 

Code Snippet [XAML] 

<chart:SfChart x:Name="binaryChart" HeightRequest="170" Margin="0,5,5,0"> 

        <chart:SfChart.PrimaryAxis> 

            <chart:NumericalAxis x:Name="binaryChartSecondaryAxis" Minimum="0" Interval="0.1" Maximum="0.7"> 

                    <chart:NumericalAxis.MajorTickStyle> 

                        <chart:ChartAxisTickStyle StrokeWidth="0"/> 

                    </chart:NumericalAxis.MajorTickStyle>      

            </chart:NumericalAxis> 

        </chart:SfChart.PrimaryAxis> 

        <chart:SfChart.SecondaryAxis> 

            <chart:NumericalAxis x:Name="yAxisVoltage" Minimum="0.00" Maximum="1.30"> 

                <chart:NumericalAxis.Title> 

                    <chart:ChartAxisTitle Text="t/s" TextColor="Black" FontSize="10"/> 

                </chart:NumericalAxis.Title> 

            </chart:NumericalAxis> 

        </chart:SfChart.SecondaryAxis> 

        <chart:SfChart.Series> 

            <chart:BarSeries x:Name="vc1PlusSeries"/> 

        </chart:SfChart.Series> 

    </chart:SfChart> 

 

Code Snippet [C#] 

private void BinaryChartSecondaryAxis_LabelCreated(object sender, ChartAxisLabelEventArgs e) 

        { 

            string label = e.LabelContent; 

            //Changing the axis label  

            switch (label) 

            { 

                case "0.2": 

                    e.LabelContent = "AUX Open"; 

                    break; 

                case "0.5": 

                    e.LabelContent = "AUX Close"; 

                    break; 

                default: 

                    e.LabelContent = ""; 

                    break; 

            } 

        } 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/142424/ze/Test1275785215.zip  

Please try the above sample and let us know that whether your problem is resolved at your end. 

 

Regards, 

Bharathi.