Missing StripLines

[Caleb]

I am updating an older Xamarin app to MAUI. I cannot find a way to implement DateTimeStripLines. Have these been dropped from MAUI? If so, is there a recommended way to implement the same feature?

In my case, I want bars that show alternating days. Or, at the very least, a horizontal line that shows "midnight" on each day.

Thanks!

[Raja Ramalingam]

Hi Caleb,

We have already considered Striplines support in MAUI charts to our list of requested features. You can check on the status of this request through the following feedback portal link: https://www.syncfusion.com/feedback/39278/provide-support-for-striplines-in-net-maui-cartesian-chart.

We prioritize features for each release based on demand, and at this time we do not have immediate plans to implement this feature as we have already committed to other planned work. If you would like to show your support for this feature, you can vote for it through the feedback portal. Additionally, you can leave comments in the feedback portal if you have any further specifications or suggestions for this feature request.

In the meantime, we have achieved your requirement using our plot area background view support. Please see the attached sample for reference.

. . .

<chart:SfCartesianChart.XAxes>

    <local:DateTimeAxisExt ShowMajorGridLines="False" IntervalType="Days"

                                               RangeColor="LightSteelBlue" Minimum="2000/01/01"

                                               Maximum="2000/01/08" Interval="1"

                                               GraphicsView="{x:Reference view}"  

                                               x:Name="dateTimeAxis">

    </local:DateTimeAxisExt>

</chart:SfCartesianChart.XAxes>

 

<chart:SfCartesianChart.YAxes>

    <chart:NumericalAxis Minimum="0" Maximum="30"         

                                            ShowMajorGridLines="False">

    </chart:NumericalAxis>

</chart:SfCartesianChart.YAxes>

 

<chart:SfCartesianChart.PlotAreaBackgroundView>

    <GraphicsView  InputTransparent="False" Drawable="{x:Reference dateTimeAxis}"

                                 x:Name="view">

    </GraphicsView>

</chart:SfCartesianChart.PlotAreaBackgroundView>

.   .   .

public class DateTimeAxisExt : DateTimeAxis , IDrawable

{

    . . .

 

    void IDrawable.Draw(ICanvas canvas, RectF dirtyRect)

    {

        DateTime startDate = (DateTime)this.Minimum;

        DateTime endDate = (DateTime)this.Maximum;

 

        int i = 0;

        while (startDate <= endDate)

        {

            var start = startDate.ToOADate();

            var end = (startDate.AddDays(1).AddTicks(-1)).ToOADate();

 

            if (i % 2 == 0)

            {

                var yStart = ValueToPoint(start);

                var yEnd = ValueToPoint(end);

 

                Rect rect = new Rect(yStart, 0, yEnd - yStart, dirtyRect.Height);

 

                ChartAxisLabelStyle chartAxisLabelStyle = new ChartAxisLabelStyle();

                chartAxisLabelStyle.FontSize = 15;

                chartAxisLabelStyle.TextColor = Colors.Black;

 

                canvas.SaveState();

                canvas.FillColor = RangeColor;

                canvas.FillRectangle(rect);

                canvas.RestoreState();

            }

 

            i++;

 

            startDate = DateTime.FromOADate(end);

 

        }

    }

    . . .

}

Output image:

Plot area customization: https://help.syncfusion.com/maui/cartesian-charts/appearance#plotting-area-customization

Regards,

Raja.

[Caleb]

I appreciate the code snippet, but there are several compile-time errors, and once I worked around those,

a) the bars extend beyond the limits of the chart, and

b) pan/zoom/scroll of the chart no longer works.

I'll follow up in the feedback portal.

[Raja Ramalingam]

Hi Caleb,

Query: The bars extend beyond the limits of the chart.

To resolve this issue set the "dirtyRect" as a parameter in the "ClipRectangle" method of the "canvas", as shown in the code snippet below. And please ensure that you are invalidating the "Graphics" while drawing the axis. Please refer to the attached sample for guidance.

public class DateTimeAxisExt : DateTimeAxis , IDrawable

{

    . . .

 

   void IDrawable.Draw(ICanvas canvas, RectF dirtyRect)

   {

         .  .  .

 

         while (startDate <= endDate)

         {

            .  .  .

            canvas.SaveState();

            canvas.ClipRectangle(dirtyRect);

            canvas.FillColor = RangeColor;

            canvas.FillRectangle(rect);               

            canvas.RestoreState();

 

          }

           .  .  .

      

   }

 

    protected override void DrawAxis(ICanvas canvas, Rect arrangeRect)

    {

        base.DrawAxis(canvas, arrangeRect);

 

        if (GraphicsView != null)

        {

            GraphicsView.Invalidate();

        }

    }
}

Query: Pan/zoom/scroll of the chart no longer works.

To resolve this issue, please set the "InputTransparent" property of the "GraphicsView" to "True".

<chart:SfCartesianChart.PlotAreaBackgroundView>

    <GraphicsView InputTransparent="True" Drawable="{x:Reference dateTimeAxis}" x:Name="view">

    </GraphicsView>

</chart:SfCartesianChart.PlotAreaBackgroundView>

Please note that the InputTransparent may function depending on the platform. As we said before, please vote for the strip lines feature request.

Best Regards,

Raja.

Attachment: DateTimeBars_86975dc6.zip