Pre loader

The default green label on the X-axis AxisLabel has not been fully modified and still remains at the bottom.

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

SciChartOne and sciChartTwo are bound to each other through AxisTitle.

However, I now need to display only the modified AxisLabelContainerStyle and AxisLabelTemplate when the mouse cursor is on SciChartOne. I noticed that besides the XAxis setting’s Style, there is also a default Style present, resulting in an orange label with a default green label underneath.

Could you please advise on how to completely override the green label when the mouse cursor is selected on this chart for SciChartOne?

Additionally, if the mouse cursor is not selected on this chart, I would like the XAxis to display a blue label.

Chart Code:(Both are the same)

                <Style x:Key="CursorLineStyle" TargetType="Line">
                    <Setter Property="StrokeThickness" Value="2"></Setter>
                    <Setter Property="Stroke" Value="Red"></Setter>
                    <Setter Property="StrokeDashArray" Value="2 2"></Setter>
                </Style>
                <Style x:Key="CursorModAxisLabelStyle" TargetType="s:AxisLabelControl">
                    <Setter Property="Background" Value="#AAFF6600"></Setter>
                    <Setter Property="BorderBrush" Value="#FFFF6600"></Setter>
                    <Setter Property="BorderThickness" Value="1"></Setter>
                </Style>
                <DataTemplate x:Key="CursorModAxisLabelTemplate" DataType="s:AxisInfo">
                    <StackPanel>
                        <TextBlock Foreground="White" FontFamily="Arial" FontSize="11" Margin="2" Text="{Binding DataValue, StringFormat='{}{0:0.00}'}"></TextBlock>
                    </StackPanel>
                </DataTemplate>


            <s:SciChartSurface.XAxis>
                <s:NumericAxis AxisTitle="{Binding XAxisTitle}" s:CursorModifier.AxisLabelContainerStyle="{StaticResource CursorModAxisLabelStyle}" s:CursorModifier.AxisLabelTemplate="{StaticResource CursorModAxisLabelTemplate}" VisibleRange="{Binding SharedXVisibleRange, Mode=TwoWay}"></s:NumericAxis>
            </s:SciChartSurface.XAxis>
            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}" s:MouseManager.MouseEventGroup="myCustomGroup">
                    <s:RubberBandXyZoomModifier IsEnabled="{Binding EnableZoom}"></s:RubberBandXyZoomModifier>
                    <s:ZoomPanModifier IsEnabled="{Binding EnablePan}" ClipModeX="None"></s:ZoomPanModifier>
                    <s:ZoomExtentsModifier></s:ZoomExtentsModifier>
                    <s:LegendModifier ShowLegend="True" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center"></s:LegendModifier>
                    <s:RolloverModifier ShowTooltipOn="MouseHover"></s:RolloverModifier>
                    <s:CursorModifier LineOverlayStyle="{StaticResource CursorLineStyle}"></s:CursorModifier>
                    <s:XAxisDragModifier DragMode="Pan"></s:XAxisDragModifier>
                    <s:YAxisDragModifier DragMode="Scale"></s:YAxisDragModifier>
                    <s:MouseWheelZoomModifier></s:MouseWheelZoomModifier>
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>
        </s:SciChartSurface>
Version
v8.0.0.27737
Attachments
Images
  • Lex
    • Lex
    • 5 months ago
    Hi Allen, Thanks for your inquiry. Unfortunately, the reported issue is not clear enough. Could you please prepare a small sample project reproducing the described behavior and send us for investigation? Please also provide us with detailed steps to reproduce this issue. Thanks in advance, Lex, SciChart Technical Support Engineer
  • allen chuang
    Hello, I have updated the program.
  • Lex
    • Lex
    • 4 months ago
    Hello Allen, Hope you are doing well. I am sorry for the late response. I managed to reproduce the reported issue in the shared sample project and logged it in our tracking system for further investigation. We’ll get back to you as soon as we have an update. Kind regards, Lex, SciChart Technical Support Engineer
  • You must to post comments
0
0

Hello, I have updated the program.

Attachments
  • You must to post comments
0
0

Hello Allen Chuang,

I have investigated your inquiry and here are some results:

[0] Correct me if I’m wrong, you’re trying to achieve a Crosshair(on chart) + Labels(on X and Y axes). While trying to achieve so, you were using two modifiers CursorModifier + RolloverModifier which is not correct way of using, and may cause variety of issues.

*** To achieve Crosshair(on chart) + Labels(on X and Y axes) I can recommend you to create a custom modifier as there is no such feature out of the box. SciChart is pretty flexible and can easy extend it’s functionality.

[1] You’ll have to create a custom modifier based on SciChart -> CursorModifier.

public class MyCursorModifier : CursorModifier
{
}

You’re using two synchronized charts. All SciChart modifiers provides two virtual methods that grants you control on both ‘Master’ and ‘Slave’ charts. Master is the ‘actual’ chart and slave is ‘synchronized’ chart.
For example: you have charts A and B, when your mouse is on an [A] chart then [A] chart is ‘master’ and [B] is ‘slave’, and if your mouse is on a [B] chart, then [B] chart is master and [A] is slave.

    protected override void HandleMasterMouseEvent(Point mousePoint)
{
    base.HandleMasterMouseEvent(mousePoint);
}

protected override void HandleSlaveMouseEvent(Point mousePoint)
{
     base.HandleSlaveMouseEvent(mousePoint);
}

[2] In your case you don’t need to change handling of Master chart, as it’s already behaving as Cursor modifier -> Crosshair(on chart) + Labels(on axes). So we need to override HandleSlaveMouseEvent

I can suggest you the following handle slave event:

   protected override void HandleSlaveMouseEvent(Point mousePoint)
 {
     // Added just for more clear readability, you can make these two as DependencyProperties for this custom modifier
     var showHorizontalLine = true;
     var showVerticalLine = true;

     // Drawing the CrosshairCursor which is really just two lines
     ShowCrosshairCursor(mousePoint, showHorizontalLine, showVerticalLine);

     // Place labels on axes
     if (ShowAxisLabels)
     {
         // Handling if chart is vertical [e.g. XAxis is left and YAxis is bottom]
         var isVerticalChart = !XAxis.IsHorizontalAxis;

         var showYLabels = isVerticalChart ? showVerticalLine : showHorizontalLine;
         var showXLabels = isVerticalChart ? showHorizontalLine : showVerticalLine;

         // In case you need labels just on one Axis
         if (showXLabels)
         {
             // call a base method from CursorModifier
             UpdateXAxesOverlay(mousePoint);
         }

         if (showYLabels)
         {
             // call a base method from CursorModifier
             UpdateYAxesOverlay(mousePoint);
         }
     }
 }

The code is pretty selfdescribed, you can modify it to whatever you need, and handle different use cases.
Note: I’m calling update X and Y axes Overlay methods from the base class which a referred to handling redndering of the labels on axes.

[3] To achieve changing color you’ve asked before(on the slave chart) you can override Update XAxesOverlay method like this

    protected override void UpdateXAxesOverlay(Point mousePoint)
{
    var xAxisLabel = base.GetCachedAxisLabel((AxisBase)this.XAxis);
    if (xAxisLabel != null)
    {
        xAxisLabel.Background = _isMaster ? _masterXAxisLabelBackground : _slaveXAxisLabelBackground;
    }
    base.UpdateXAxesOverlay(mousePoint);
}

[4] Next you have to override ShowCrosshairCursor method that allows you to add anything you need to a modifier surface(which is canvas)

   protected override void ShowCrosshairCursor(Point mousePoint, bool drawHorizontalLine, bool drawVerticalLine)
{
    // In this method you can add whatever you want
    // But don't forget to remove\delete it in ClearAll() override
    var modifierRect = ModifierSurface.GetBoundsRelativeTo(RootGrid);

    if (drawHorizontalLine)
    {
        ShowCrosshairLine(ref _horizontalLine, 0d, mousePoint.Y, modifierRect.Width - 1, mousePoint.Y);
    }
    if (drawVerticalLine)
    {
        ShowCrosshairLine(ref _verticalLine, mousePoint.X, 0d, mousePoint.X, modifierRect.Height - 1);
    }
}

     private void ShowCrosshairLine(ref Line line, double x1, double y1, double x2, double y2)
 {
     if (line == null)
     {
         line = new Line { Style = _isMaster ? LineOverlayStyle : SlaveLineOverlayStyle, IsHitTestVisible = false };

         ModifierSurface.Children.Add(line);
     }

     line.X1 = x1;
     line.X2 = x2;
     line.Y1 = y1;
     line.Y2 = y2;
 }

And that should be it. I’ve also modified one of our examples to meet your needs Which I’m going to attach here as well.

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.