Pre loader

Tag: AxisLabelTemplate

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 votes

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 x:Key="CursorModAxisLabelStyle" TargetType="s:AxisLabelControl">
                    <Setter Property="Background" Value="#AAFF6600"></Setter>
                    <Setter Property="BorderBrush" Value="#FFFF6600"></Setter>
                    <Setter Property="BorderThickness" Value="1"></Setter>
                <DataTemplate x:Key="CursorModAxisLabelTemplate" DataType="s:AxisInfo">
                        <TextBlock Foreground="White" FontFamily="Arial" FontSize="11" Margin="2" Text="{Binding DataValue, StringFormat='{}{0:0.00}'}"></TextBlock>

                <s:NumericAxis AxisTitle="{Binding XAxisTitle}" s:CursorModifier.AxisLabelContainerStyle="{StaticResource CursorModAxisLabelStyle}" s:CursorModifier.AxisLabelTemplate="{StaticResource CursorModAxisLabelTemplate}" VisibleRange="{Binding SharedXVisibleRange, Mode=TwoWay}"></s:NumericAxis>
                <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: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>
1 vote

Hey, how would I go about adding a custom template for the cursor axis labels using the Javascript 2D chart API?

I’d like the x-axis to not just have a date in MM/DD/YYYY format but a date and time displayed. The current implementation is below, and below that is the desired implementation.



I have looked through the documentation but I may have missed something. If I have, please point me in the right direction, thanks!

0 votes

Is there any way to provide custom axis label for cursor modifier or at least change label size? I could find only axis label stroke & fill properties in cursor modifier API.

0 votes

Dear sir,

I’m trying SciChartSurface.
I wanna have a Chart updating per minute,
X-Axis means time, Y-Axis means products,
and every product has a multi-color bar which I can build it in the viewmodel.
Every product’s name should be the position between two lines.
Can SciChart do that…? Cause I’m using surface with numericAxis, but the product name is always next to the line, not between two lines.

  • Wade Yao asked 3 years ago
  • last active 3 years ago
0 votes

Is it possible to set different color to axis ticks and axis title.
In 2D-Chart i did it by changing the style of DefaultTickLabel:

<Style x:Key="NumericAxisForMvvm" TargetType="axis:NumericAxisForMvvm">

  <Setter Property="FontSize" Value="12" />
  <Setter Property="FontFamily" Value="Arial" />
  <Setter Property="FontWeight" Value="Bold" />
  <Setter Property="TickTextBrush" Value="Red" />

  <Setter Property="TickLabelStyle">
      <Style TargetType="s:DefaultTickLabel">

        <Setter Property="FontSize" Value="16" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="FontFamily" Value="Courier New" />
        <Setter Property="Foreground" Value="Blue" />

        <Setter Property="Template">
            <ControlTemplate TargetType="s:DefaultTickLabel">
              <ContentControl Content="{Binding}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Foreground="{TemplateBinding Foreground}" 
                              FontFamily="{TemplateBinding FontFamily}"
                              FontSize="{TemplateBinding FontSize}"
                              FontWeight="{TemplateBinding FontWeight}"/>

Same procedure seems doesn’t work for 3D-Charts.
How can i achieve this?
Is that currently possible?

Best Regards

0 votes


I have a chart where the Axis Title is truncated because the title is too long. Is there a way to wrap or put an ellipsis in the Axis Title? The height of my chart should be fix, so I have to do something about the title instead.


1 vote


I want to override the default AxisLabelTemplate for a DateTimeAxis beyond the normal circumstances.
Setting the AxisLabelTemplate to a StaticResource is easy enough, but all I have inside the Template is the CursorFormattedDataValue and I want to be able to send in something more then a simple string.

<ControlTemplate x:Key="RolloverModifierAxisLabelTemplateDefault">
    <Border Background="LightGray" 
            Visibility="{Binding IsXAxis, Converter={StaticResource BoolToVisibilityConverter}}">
        <TextBlock Text="{Binding CursorFormattedDataValue}" />

Extending the LabelProviderBase gives me the opportunity to override the FormatCursorLabel method, but it only returns a string and not an object and therefore I can not pass my own data structure to be used inside the AxisLabelTemplate.

How can we solve this issue? Is there a workaround, or is this something you need to implement?

Showing 7 results