SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components


I want to paint my time axis like this:
Chessboard ruler
Or just highlight last week, day, hour.
Is there way to apply style only on part of axis?

  • You must to post comments

I’ve done something. Share it here.

public partial class RulerAnnotation : CompositeAnnotation {

    private new const float Height = 0.003f;
    private const int Count = 24 / 3;

    private static readonly TimeSpan Duration = new TimeSpan( 24, 0, 0 ); // 24 hours

    private static readonly Brush[] Brushes = new Brush[Count] {
        new SolidColorBrush( Color.FromRgb(63 * 1, 0, 0) ),
        new SolidColorBrush( Color.FromRgb(63 * 2, 0, 0) ),
        new SolidColorBrush( Color.FromRgb(63 * 3, 0, 0) ),
        new SolidColorBrush( Color.FromRgb(63 * 4, 0, 0) ),

        new SolidColorBrush( Color.FromRgb(0, 63 * 1, 0) ),
        new SolidColorBrush( Color.FromRgb(0, 63 * 2, 0) ),
        new SolidColorBrush( Color.FromRgb(0, 63 * 3, 0) ),
        new SolidColorBrush( Color.FromRgb(0, 63 * 4, 0) ),

    public RulerAnnotation() {
        this.Loaded += OnLoaded;

    private void OnLoaded(object sender, RoutedEventArgs routedEventArgs) {
        if (DesignerProperties.GetIsInDesignMode( this )) return;

        var max = (DateTime) XAxis.DataRange.Max;
        var time = max.AddHours( -max.Hour ).AddMinutes( -max.Minute ).AddSeconds( -max.Second );

        CoordinateMode = AnnotationCoordinateMode.RelativeY;
        X1 = time;
        X2 = time.Add( Duration );
        Y1 = 1 - Height;
        Y2 = 1f;

        foreach (var item in GetBoxes()) {
            Annotations.Add( item );

    private static IEnumerable<BoxAnnotation> GetBoxes() {
        for (int i = 0; i < Count; i++) {
            yield return new BoxAnnotation() {
                Background = Brushes[i],

                CoordinateMode = AnnotationCoordinateMode.Relative,
                X1 = (float) i / Count,
                X2 = (float) (i + 1) / Count,
                Y1 = 0,
                Y2 = 1

  • You must to post comments

Wow, your image looks like a crime scene đŸ˜€

Do you have a slightly clearer explanation of what you are trying to achieve and why?

  • Denis Denis
    I want to paint even/odd days on time axis in yellow/black colors.
  • You must to post comments

I’m afraid what you want to do is not possible without a source-code license, or without deep customisation of axis templates.

In the axis class we have three methods for drawing.

  1. AxisBase.OnDraw(IRenderContext2D renderContext, IRenderPassData renderPassData)
  2. AxisBase.DrawGridLines(IRenderContext2D renderContext, Style gridLineStyle, IEnumerable coordsToDraw)
  3. AxisBase.DrawBands(IRenderContext2D renderContext, double[] ticks, float[] ticksCoords)

These draw the gridlines and the bands on the main render surface itself, so the RenderContext is the same one shared with the chart.

The ticks are drawn on the axis itself. In AxisPanel.DrawTicks. This is where we create a Rendercontext and draw ticks on the axis.

So the only way to do this is to either modify the source code for AxisPanel.DrawTicks, or substitute your own class for AxisPanel in the template for the axis and to modify how it draws ticks. Either way doing this without a source-code license will be very difficult.

Sorry I can’t be more help,

Best regards,

  • Denis Denis
    Bad. I’m always misunderstanding what the period of time I watch. But I can paint it on chart surface. Just add translucent column chart. It’s better than nothing.
  • Andrew
    Yes, good idea. It’s much easier to paint it on the chart with custom series, or annotations
  • You must to post comments

Ok, I added a few box annotations on chart surface. And I want my boxes to be between background and series. So, I used AnnotationCanvas.BelowChart.
And I see something not good ?
Is it ok?

Also, can I use AnnotationCanvas.XAxis to paint annotations on time axis?
Now if I use AnnotationCanvas.XAxis then I can’t see my annotations.

  • Andrew
    Hi Denis, the annotations are appearing below the Axis Bands. If you set Axis.DrawMajorBands = false they will appear correctly.
  • Denis Denis
    I still don’t lose hope. What is ModifierAxisCanvas? Can I use it to draw on time axis? Are there examples with ModifierAxisCanvas? Or as you said without sources I can’t do it?
  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.