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

[Nitheeshkumar Thangaraj]

Hi Usman,

Thank you for reaching out. We have prepared a custom chart based on the UI you attached. Please refer to the getting started documentation for Syncfusion .NET MAUI SfCartesianChart.

To achieve this UI, we:

1. Added two column series and applied corner radius, spacing, and width to make the columns rounded.
2. Customized both X and Y axis line strokes and stroke width to make the axes hidden.
3. Applied the StrokeDashArray for MinorGridlines of the Y axis.
4. Formatted the labels for the Y axis.

We have attached a sample for your reference.

If you need further assistance or have any concerns, feel free to ask. We're here to help.

Regards,

Nitheesh

Attachment: CustomColumnSample_c6e4e4b5.zip

[Usman Irshad]

Thank you so much, Nitheesh. Can you guide me on how we can do this? I want to display a view when the user clicks on any column of a chart. When a column is clicked, I need to access the selected column in the background, either in the code-behind or view model. Then, I'll apply a filter based on the selected object and display the new data in the chart. I hope this video helps you understand my requirement more clearly.

Attachment: screenrecording20240715at32643pm_e89f4380.zip

[Nitheeshkumar Thangaraj]

Hi Usman,

 

 

Thank you for reaching out.

Based on the video you shared, it seems you are looking for drill-down functionality. To achieve your requirement of navigating from one chart to another upon tapping on a segment, you can use the SelectionChanged and SelectionChanging event which triggers when you select the segment using DataPointSelectionBehavior of charts series in .NET MAUI Chart.

 

Here’s a brief guide on how to implement it:

1. Handle SelectionChanged Event:
• In the chart, handle the SelectionChanged event to capture the selected column.
2. Access Selected Data:
• In the event handler, access the selected data and apply your filter logic.
3. Update Chart:
• Filter the data based on the selected item and update the chart accordingly.

 

For more detailed information, please refer to the provided drill-down knowledge base article.

We hope this helps. If you need further assistance, feel free to ask.

Regards,

Nitheeshkumar.

[Usman Irshad]

Hi Nitheeshkumar, thank you so much for your help.

I would like to add a tab that triggers when the user clicks on an x-axis label (e.g., Cat 1, Cat 2, Cat 3, Cat 4, etc.). Could you please guide me on how to implement this?

In short i want to show tooltip when clicking the axis label of Chart?

[Nitheeshkumar Thangaraj]

Hi Usman,

Based on your query, it seems you want to display a tooltip when clicking an x-axis label in a chart. However, since there are two series positioned side by side, it’s important to determine which series’ tooltip should be shown upon clicking. Currently, there is no direct click support for axis labels in the chart. If you provide us with more details about your exact requirement, we could suggest a potential workaround.

We understand you might want to show labels for both series simultaneously, similar to a trackball. If you could share more details or any proof of concept related to your requirement, it would help us provide a more precise and effective solution.

Regards,

Nitheeshkumar.

[Usman Irshad]

Hi Nitheeshkumar, as you can see, the bar is too short for the user to easily tab on. So, I want to provide the same tab functionality when the user tab on the axis labels, and I want to receive the same object that I get in bar tabbed event ( DataPointSelectionBehavior_SelectionChanged ). Could you help me implement this?

[Dhanaraj Rajendran]

Hi Usman,

We understand that you would like to trigger the selection event when tapping on the axis labels, as the bars are too small for easy interaction. Currently, axis label click support is not available. However, as a workaround, we suggest using the InteractiveBehavior in combination with the GetDataPointIndex method to retrieve data points based on the touch position. Once you retrieve the data point, you can programmatically select it, which will trigger the DataPointSelectionBehavior_SelectionChanged event, similar to tapping on the bars.

For your reference, we've included a helpful KB link that demonstrates how to get data points and select them in the chart.

KB Link: How to highlight selected data points in .NET MAUI Cartesian Charts? (syncfusion.com)

If you have any further questions or need additional assistance, feel free to reach out.

Thank you for your patience and understanding.

Regards,

Dhanaraj Rajendran.

[Usman Irshad]

Hi Thanks for the response. can you please provide me a sample code of axis tab workaround.

[Nitheeshkumar Thangaraj]

Hi Usman,

We would like to inform you that in our previous response, we mentioned that tapping on axis labels is not supported. However, interaction behavior is possible within the chart series bounds. We are working on providing a code example to demonstrate selecting data points using interactive behavior and will update you on or before September 9, 2024.

Regards,

Nitheeshkumar.

[Nitheeshkumar Thangaraj]

Hi Usman,

We would like to let you know that we have prepared a sample to demonstrate a workaround for tab support in the axis. In this sample, we extended the InteractionBehavior class, passed the selected rectangle, and retrieved the data points using the GetDataPoints methods. You can modify the code based on your specific requirements.

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

 {

     if (showRect && chart is SfCartesianChart cartesianChart)

     {

         var viewModel = chart.BindingContext as ViewModel;

         var rect = new Rect(startX, startY, 40, endY);

 

         var points = new List<object>();

         foreach (var series in cartesianChart.Series)

         {

             if (series is ColumnSeries columnSeries)

             {

                 var dataPoints = columnSeries.GetDataPoints(rect);

                 if (dataPoints != null)

                 {

                     for (int i = 0; i < dataPoints.Count; i++)

                     {

                         points.Add(dataPoints[i]);

                     }

                 }

             }                  

         }

         viewModel.DataPoints = points;

         showRect = false;

         Graphics.Invalidate();

     }

 }

We have attached the sample for your reference.

We hope this helps. If you need any further assistance or have any concerns, please feel free to ask.

Regards,

Nitheeshkumar.

Attachment: AxisTabSample_Custom_9f795c65.zip

[Usman Irshad]

Hi Nitheeshkumar, thank you so much for your response and for fixing my problem. I need some more help. After implementing the last changes for the x-axis click, I noticed that the first and last x-axis labels are overlapping. Could you please suggest a solution for this?

[Nitheeshkumar Thangaraj]

Hi Usman,

We would like to inform you that the EdgeLabelsDrawingMode property can be used to display the axis edge labels as needed. By default, the EdgeLabelsDrawingMode is set to "Shift," which adjusts the edge labels by shifting them either left or right to fit within the chart area.

To ensure all labels are visible and not overlapping, you can set the EdgeLabelsDrawingMode to "Center," which will position the labels center of its GridLines, avoiding any overlaps.

We have attached the relevant code snippet and an image for your reference.

<chart:CategoryAxis ShowMajorGridLines="False"

              EdgeLabelsDrawingMode="Center"                        

              Interval="1"

              LabelsIntersectAction="None"

              LabelPlacement="OnTicks"

              LabelRotation="-30">

Let us know if this resolves the issue or if you need further assistance, feel free to ask.

Regards,

Nitheeshkumar.

[Usman Irshad]

Hi Nitheeshkumar, thank you so much, This solved my problem.

[Preethi Rajakandham]

Hi Usman,

You're welcome. 

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out. 

Regards,

Preethi R