Request for Custom Chart Design

[Usman Irshad]

Dear Syncfusion Team,

I am working on a project that requires a custom-designed chart. I am impressed with the capabilities of Syncfusion and would like to request your assistance in designing a chart that meets the specific requirements of my project.

I have attached an image of a chart similar to what I am envisioning for reference. Please use this as a guideline to understand the design and layout I am aiming for.

Please help me in design the same chart like below in .net maui.

looking forward for your response

Thank you

[Arul Jenith Berkmans]

Hi Usman Irshad,

 

We are pleased to inform you that your requirement can be met using Syncfusion .NET MAUI charts. Our team is actively working on your request to ensure the solution is both efficient and easy to implement.

 

At the moment, we are in the process of simplifying and customizing the code samples to meet your specific needs. We will provide the sample by tomorrow (17/05/2024). In the meantime, please refer to the attached output image for a preview of what to expect.

 

If you have any further questions or need additional assistance, please don't hesitate to reach out. We appreciate your patience and look forward to delivering a solution that exceeds your expectations.

 

Regards,

Arul Jenith.B

[Usman Irshad]

Thank you so much Arul Jenith. I feel relaxed now that you have done most of the task. I'm so excited to see the final version! 

[Arul Jenith Berkmans]

Hi Usman Irshad,

 

We are excited to inform you that the sample you requested is now available! You can download the sample from the attachment provided.

To customize the series color using PaletteBrushes, please refer to the user guide document: Applying PaletteBrushes for Series.

The default axis is rendered with 0 as the origin. You can customize the axis origin using the CrossesAt property. For detailed information on axis crossing, please refer : Axis Crossing.

To add multiple axes to the chart and customize axis labels using the label created event, please refer to the corresponding documents:

• Multiple Axes: Adding Multiple Axes.
• Label Created Event: Customizing Axis Labels.

We also utilized Axis visible label support to customize the axis labels. For further details on this functionality, we encourage you to consult the guide document provided for your reference: Adding Custom Labels.

We hope this sample fulfills your requirements. If you have any questions or require further assistance, please feel free to reach out to us.

 

Regards,

Arul Jenith.

Attachment: CustomChartSample_dba43302.zip

[Usman Irshad]

Hi Arul,I really appreciate the effort you are putting in. I am almost done except for one thing. As you can see in the image below, I am struggling with the x-axis labels. I want to display all labels on the x-axis, even if they overlap, but they are not all showing.

[Dhanaraj Rajendran]

Hi Usman,

Thank you for your feedback. The x-axis labels are shown based on the available space, which can result in some labels being hidden if there isn't enough space to display them all. To address this, we have implemented a smart axis label alignment feature. You can track the status of this feature request through the feedback portal link provided below.

Feedback Link: Smart Axis Labels Alignment Support in .NET MAUI SfCartesianChart

This feature will allow us to display all the axis labels, and we plan to include it in the upcoming Volume 2 main release, which is scheduled to roll out in mid-June 2024.

If you need any further assistance, please don't hesitate to ask. We're here to help.

 

Regards,

Dhanaraj Rajendran.

[Dhanaraj Rajendran]

Hi Usman,

We are glad to announce that our Essential Studio 2024 Volume 2 Main Release v26.1.35 is rolled out and is available for download under the following link.

Essential Studio 2024 Volume 2 Main Release v26.1.35 is available for download | Announcements Forums | Syncfusion

Now, you can display all the axis labels by setting None to LabelIntersectAction property in the Axis. Here we provided code snippet to illustrate this for your reference.

<chart:SfCartesianChart.XAxes>

 

    <chart:DateTimeAxis LabelsIntersectAction="None">

    </chart:NumericalAxis>

</chart:SfCartesianChart.XAxes>

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Dhanaraj Rajendran.

[Usman Irshad]

Hi Dhanaraj, thank you so much for your response. I added the code you provided, but I'm facing an issue with the x-axis labels overlapping. Please see the screenshot and suggest any solutions.

[Dhanaraj Rajendran]

Hi Usman,

We reviewed the issue with the overlapping x-axis labels that you mentioned.

It seems that the labels might be positioned incorrectly, possibly due to the way they are being generated. The DateTimeAxis  is designed to plot data based on date and time values, with customizable intervals (e.g., days, hours). From the screenshot you shared, it appears that the labels might be plotted based on the hour values in your data, which could be causing the overlap.

Output:

To help you further, please ensure that the axis labels are being placed correctly according to your label position. We’ve provided knowledge base link below with guidance on how to customize the visibility of axis labels:

KB link: https://support.syncfusion.com/kb/article/13678/how-to-customize-axis-visible-labels-in-net-maui-sfcartesianchart

If this doesn’t resolve the issue, could you please share the specific changes you made to the sample we previously provided? This will allow us to better understand the problem and offer a more targeted solution.

Thank you for your understanding and cooperation.

Regards,

Dhanaraj Rajendran.

[Usman Irshad]

Hi, I want to hide the toolbar in Windows when hovering or moving the mouse over the chart, but I still want to show the tooltip when the user taps or clicks on the chart.

[Nitheeshkumar Thangaraj]

Hi Usman,

We would like to inform you that it is possible to show the tooltip on tap or click instead of mouse hover in Windows by extending the tooltip behavior. You can override methods in the tooltip to hide it during mouse hover or movement, ensuring that the tooltip is only shown on tap or click. We have attached the code snippet and demo for your reference.

public class TooltipExt : ChartTooltipBehavior

{

    protected override void OnTouchDown(ChartBase chart, float pointX, float pointY)

    {

        Hide();

    }

    protected override void OnTouchMove(ChartBase chart, float pointX, float pointY)

    {

    }

    protected override void OnTouchUp(ChartBase chart, float pointX, float pointY)

    {

        Hide();

    }

}

<chart:SfCartesianChart.TooltipBehavior>

     <local:TooltipExt/>

 </chart:SfCartesianChart.TooltipBehavior>

We hope this solution helps! Please try it and let us know if you need further assistance.

Regards,

Nitheeshkumar.

Attachment: Tooltip_On_Tap_f9c28476.zip