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. Image for the cookie policy date

How to show equal number of labels in x and y axis in SfChart

We have tried to create the SfChart with equal number of labels in xaxis and yaxis. But we could not plot the data’s with equal number of labels (Tick interval labels). The data points provided as ItemsSource will be dynamic data, so we cannot set the interval property for NumericAxis based on the Minimum and Maximum value of NumericAxis. The same data in UWP Toolkit chart displays equal number of labels in x and y axis. Can you please help me out on this.

Note: Already I have tried to use the MaximumLabels property also.

 

Data Values

 

"MinX": 0.0,

    "MinY": 0.0,

    "MaxX": 400,

    "MaxY": 400

 

 

"DataPoints": [

    {

      "ChartX": 10.0,

      "ChartY": 10.0

    },

    {

      " ChartX ": 50.0,

      " ChartY ": 50.0

    },

    {

      " ChartX ": 75.0,

      " ChartY ": 75.0

    },

    {

      " ChartX ": 75.0,

      " ChartY ": 75.0

    },

    {

     " ChartX ": 100.0,

      " ChartY ": 100.0

    },

    {

      " ChartX ": 200.0,

      " ChartY ": 200.0

    }

  ]

 

XAML

 

<syncfusion:SfChart

                            x:Name="Chart"

                            Width="250"

                            Height="250"

                           HorizontalAlignment="Left"

                            VerticalAlignment="Top"

                            AreaBorderThickness="0">

                            <syncfusion:SfChart.PrimaryAxis>

                                <syncfusion:NumericalAxis

                                    Minimum="{Binding MinX}"

                                    Maximum="{Binding MaxX}"

                                    ShowGridLines="False" />

                           </syncfusion:SfChart.PrimaryAxis>

                            <syncfusion:SfChart.SecondaryAxis>

                                <syncfusion:NumericalAxis

                                    ShowGridLines="False"

                                    Minimum="{Binding MinY}"

                                    Maximum="{Binding MaxY}"

                                    RangePadding="Round"/>

                           </syncfusion:SfChart.SecondaryAxis>

                            <syncfusion:SplineSeries

                               x:Name="series"

                                Interior="Black"

                                XBindingPath="ChartX"

                                YBindingPath="ChartY"

                                StrokeThickness="1"

                               

                                ItemsSource="{Binding DataPoints}">

                                <syncfusion:SplineSeries.AdornmentsInfo>

                                    <syncfusion:ChartAdornmentInfo

                                        SymbolStroke="Black"

                                        SymbolInterior="Black"

                                        SymbolWidth="5"

                                        SymbolHeight="5"

                                        Symbol="Ellipse"></syncfusion:ChartAdornmentInfo>

                                </syncfusion:SplineSeries.AdornmentsInfo>

                            </syncfusion:SplineSeries>

                        </syncfusion:SfChart>How to show equal number of labels in x and y axis in SfChart


Attachment: chart_ed8289d0.zip

1 Reply

MK Muneesh Kumar G Syncfusion Team July 10, 2019 08:50 AM UTC

Hi Satheesh,  
  
Greetings from Syncfusion.   
  
We have analysed your query and we would like to inform you that we drawn half the labels in horizontal axis compared with vertical axis.   
  
However, you can achieve the equal number of labels requirement by setting MaximumLabels to both axis, but set X-Axis to double the value of Y-Axis. (E.g: X-Axis : 3, Y-Axis – 6). Please find the code snippet below.   
  
Code snippet  
  
  <syncfusion:SfChart Grid.Row="1"  
..  
                            AreaBorderThickness="0">  
            <syncfusion:SfChart.PrimaryAxis>  
                <syncfusion:NumericalAxis MaximumLabels="6"  
..  
            </syncfusion:SfChart.PrimaryAxis>  
            <syncfusion:SfChart.SecondaryAxis>  
                <syncfusion:NumericalAxis MaximumLabels="3"  
..  
            </syncfusion:SfChart.SecondaryAxis>  
  
Please check this solution with your application and let us your confirmation.   
     
Regards,     
Muneesh Kumar G.     


Loader.
Live Chat Icon For mobile
Up arrow icon