We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

CategoryAxis for SecondaryAxis

Thread ID:

Created:

Updated:

Platform:

Replies:

142424 Feb 3,2019 02:06 PM UTC Mar 5,2019 09:56 AM UTC Xamarin.Forms 8
loading
Tags: SfChart
Reihaneh Khaksaran
Asked On February 3, 2019 02:06 PM UTC

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 [Syncfusion]
Replied On February 4, 2019 09:31 AM UTC

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; 
            } 
        } 
 
 
Please refer our online help document to know more about LabelCreated event. 
 
Thanks, 
Bharathiraja.  


Reihaneh Khaksaran
Replied On February 10, 2019 08:23 AM UTC

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 [Syncfusion]
Replied On February 11, 2019 08:59 AM UTC

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. 
 
 
Please refer the below UG link for more details: 
 
Please let us know if you need any further assistance. 
 
Regards, 
Devakumar 


Reihaneh Khaksaran
Replied On February 24, 2019 01:33 PM UTC

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
Replied On February 24, 2019 01:34 PM UTC

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 [Syncfusion]
Replied On February 25, 2019 07:03 AM UTC

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: 
 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Bharathi. 


Reihaneh Khaksaran
Replied On March 2, 2019 07:12 AM UTC

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 [Syncfusion]
Replied On March 5, 2019 09:56 AM UTC

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; 
            } 
        } 
 
Please try the above sample and let us know that whether your problem is resolved at your end. 
 
Regards, 
Bharathi. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;