Can I display the X Axis label on chart Axis major tick left-aligned?

Hello,

currently the label in my chart is put in the middle between two major ticks.

Is there a possibility to put it below every major tickmark? I set MajorTickSpacing="1" but I only achieved as shown in the image attached.

=> What I wanted to achieve was that every bar has a major tick mark and a label as the red line should symbolize. => I searched in the forum, but I didn't figure it out.

Cu Maik

Hello Maik

You can line up all the labels with the tick marks by setting The LabelLayout and the TickLayout properties of the X axis to be "Inside". In order for each bar to have a tick mark, I'll need to know a little more about how your chart and data is set up. If you need help with having a tick mark for each bar, please send me a simple project and I'll work out what properties you need to set.

Jason Fauchelle

Hello Jason,

I played a bit around and now I can explain what puzzled me.

First things first, here is the XAML code:

  <ms:BarSeries 
                x:Name="BarSeries1"
                Cursor="Arrow"
                IsHitTestVisible="True"
                ItemsSource="{Binding Series1}" 
                BarStyle="{StaticResource MetroBarStyle}"
                ZeroLineStyle="{x:Null}"
                XBinding="{Binding Day}" YBinding="{Binding Value}" SelectionMode="Single" 
                HighlightMode="{Binding HighlightMode, Mode=TwoWay}"
                AlwaysShowYAxisZero="True"
                >
                   <i:Interaction.Triggers>
                    <i:EventTrigger EventName="SelectedDataPointChanged">
                        <cal:ActionMessage MethodName="UpdateTimeRange">
                            <cal:Parameter Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type ms:BarSeries}}}" />
                        </cal:ActionMessage>
                    </i:EventTrigger>

                </i:Interaction.Triggers>

            </ms:BarSeries>
            <!--BarStyle="{StaticResource MetroBarStyle}"-->
            <ms:LineSeries 
                Name="LineSeries2" 
                ItemsSource="{Binding Series2}"
                XBinding="{Binding Day}" YBinding="{Binding Value}" 
                HighlightMode="{Binding HighlightMode}"
                LineStyle="{StaticResource LineStyle}"
                AlwaysShowYAxisZero="True"
                                 >
                <!--<i:Interaction.Triggers>
                    <i:EventTrigger EventName="SelectedDataPointChanged">
                        <cal:ActionMessage MethodName="UpdateTimeRange">
                            <cal:Parameter Value="{Binding ElementName=BarSeries1}" />
                        </cal:ActionMessage>
                    </i:EventTrigger>
                </i:Interaction.Triggers>-->
            </ms:LineSeries>

            <ms:BarSeries 
                Cursor="Arrow"
                IsHitTestVisible="True"
                ItemsSource="{Binding Series3}" 
                BarStyle="{StaticResource MetroBarStyle}"
                ZeroLineStyle="{x:Null}"
                XBinding="{Binding Day}" YBinding="{Binding Value}" SelectionMode="Single" 
                HighlightMode="{Binding HighlightMode, Mode=TwoWay}"
                AlwaysShowYAxisZero="True"
                >
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="SelectedDataPointChanged">
                        <cal:ActionMessage MethodName="UpdateTimeRange">
                            <cal:Parameter Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type ms:BarSeries}}}" />
                        </cal:ActionMessage>
                    </i:EventTrigger>

                </i:Interaction.Triggers>

            </ms:BarSeries>

            <ms:Chart.BackgroundElements>
                <ms:ChartGrid VerticalGridLineBrush="Transparent" HorizontalGridLineBrush="Transparent" MinorHorizontalGridLineBrush="{x:Null}" />
            </ms:Chart.BackgroundElements>
            <!--<ms:Chart.ForegroundElements>
                <views:TrackingElement ValueDisplayTemplate="{StaticResource ValueDisplayTemplate}" />
            </ms:Chart.ForegroundElements>-->
            <ms:Chart.XAxis>
                <!--<ms:ChartAxis Title="Monat" LabelFormat="{}{0:MMM yyyy}" LabelRotation="290" Visibility="Visible"/>-->
                <ms:ChartAxis Title="Monat" LabelRotation="290" Visibility="Visible"
                              LabelLayout="Inside" 
                              TickLayout="Inside"
                              AllowMajorTickSpacingZoomAdjustment="False"
                              TickMarkOffset="1"
                              MajorTickSpacing="1"
                              Minimum="{Binding ShowFrom, Mode=OneWay}" 
                              Maximum="{Binding ShowTo, Mode=OneWay}"
                              LabelFormat="{}{0:MMM yyyy}"
                              ValueConverter="{Binding AxisValueConverter}"/>
            </ms:Chart.XAxis>
            <ms:Chart.YAxis>
                <ms:ChartAxis LabelFormat="{}{0:C}" FontFamily="Segoe UI" 
                              TickMarkMode="Movable" MinorTickMarkVisibility="Visible"
                              Minimum="{Binding Min, Mode=OneWay}" 
                              Maximum="{Binding Max, Mode=OneWay}"
                              ClipToBounds="False"/>
            </ms:Chart.YAxis>
        </ms:Chart>

These are the values I played with:

LabelLayout="Inside" 
                              TickLayout="Inside"
                              AllowMajorTickSpacingZoomAdjustment="False"
                              TickMarkOffset="1"
                              MajorTickSpacing="1"

TickMarkOffset="1" made ticks for each X-Value appear. Series1 contains the data of interest. This series is composed like this:

foreach (DaySum x in incomeOutcome)
                    {
                        if (x.Day < ShowFrom || x.Day > ShowTo)
                        {
                            continue;
                        }

                        // Create a new instance of DataPoint
                        BarDataPoint dataPoint = new BarDataPoint();

                        // Set YValue for a DataPoint
                        dataPoint.Value = x.Sum;
                        dataPoint.Day = x.Day;
                        dataPoint.Color = (x.Sum > 0) ? Colors.Orange : Colors.Gray;
                        Series1.Add(dataPoint);
                        index = (++index) % palette.Count;
                    }

Just a date and a amount as a datapoint.

Now I come to the point, which confused me on the visual, but I didn't realize in the first place. Let me show you two images of the same data in the same chart with two different zoom levels.

I'd expected in both cases that the red lines (I drew of course to illustrate) hit the bar in the middle. But you can see that it deviates from case to case.

So, the Tickmark are not fully aligned with the bars.

Did I configure something wrong or is this on purpose or is it a bug?

Hello Maik

By looking at the images, I think you can resolve this by setting TickMarkMode to Movable on the X axis. By default the TickMarkMode is Stationary. This means that at any zoom level, the first tick mark is always aligned to the left edge. The labels simply change based on the tick mark positions. If you set this property to Movable, the tick marks and labels will slide as the chart is zoomed or panned. If this does not fully solve this issue, let me know.

Jason Fauchelle

Hi Jason,

TickMarkMode="Movable" stabilizes the tickmark postion. But it doesn't solve my issue completely. Now the tickmark is at the end of the bar not centered as I'd like to have it.

  <ms:ChartAxis Title="Monat" LabelRotation="290" Visibility="Visible"
                              LabelLayout="Inside" 
                          TickLayout="Inside"
                          AllowMajorTickSpacingZoomAdjustment="False"
                          TickMarkOffset="1"
                          MajorTickSpacing="1"
                              TickMarkMode="Movable"
                              Minimum="{Binding ShowFrom, Mode=OneWay}" 
                              Maximum="{Binding ShowTo, Mode=OneWay}"
                              LabelFormat="{}{0:MMM yyyy}"
                              ValueConverter="{Binding AxisValueConverter}"/>

Can I have a Bar offset to the right like bar-Width/2. Then the tickmark is in the middle of the bar.

Ciao Maik

Hello Maik

To resolve this final alignment, I need to know a little more. You have 2 bar series in your chart. It looks like one is to display values above the baseline, and the other displays values below the baseline. By default, multiple bar series cause the bars to be rendered side-by-side. The width of the bars are calculated by taking the total space available to a single bar, and dividing it by the number of bar series. In your case, there are 2 bar series. With 2 bars side by side, the tick marks would line up directly between the 2 bars, which is what it looks like is happening in your scenario. But in your images, the bars are not side-by-side. Somehow they are stacked, but are still only taking up half the available space for a single bar. This would be why the ticks are aligned at the end of each bar. By looking at your code, I'm not sure how you achieved this stacking. Is there a render transform or something that you are applying in the MetroBarStyle to force the bars to be positioned in the same place? If I add an option to BarSeries to tell the bars to overlap rather than be positioned side-by-side, then each bar would take up all the available space for a single bar, the ticks would be aligned in the center of these bars, and you wouldn't need to write code to force the second bar series to be aligned under the first bar series. Does this sound like the solution to your scenario? If I have misunderstood how you are setting up the chart, please send a repro project an I'll find the solution.

Jason Fauchelle