CandlestickSeries questions

Hey Lance,

1). I've tried your mentioned before. It works if we selected a point, but how can I get point when we slide into it? like ToolTipBehavior, when moves to a point, it shows us point info? like below screenshot 

2). Yes, It works when I set Palette, but it modified all stroke color, Actually I want to set color by true or false, if it's true then a color, otherwise another color.

3). Great, it works. 

Thanks

one more thing, can we show more info in ToolTip? like Date? or Chnages?

Hi Allen, 

In short, what you want requires custom development. Let me try to get to the topics I can here to give you a head start if you decide to pursue custom native development further.

#1 - Tooltip Events

It seems like you're trying to get SelectionChanged-like functionality out of the TooltipBehavior? Maybe the TrackballBehavior is better, but fundamentally this is not possible at this time because only the SelectionBehavior has an event which does require the user to make a distinct selection.

If you're really just trying to customize the tooltip, you need to override the native control's tooltip UI elements and build your own. Inside the Windows platform's App.xaml file, you can define WinUI native DataTemplates.

Then when reaching down into the native platform controls via the .NET MAUI handler, you can assign that native DataTemplate:

Then at runtime, you should see this DataTemplate being used on Windows. Here's a couple screenshots of the value converter returning different colors to the custom template:

I have attached this demo to give you a headstart. If you have any questions about this, please open a  Support Ticket as the forums are not suitable for deep dive discussions on a custom implementation. The support team may be able to help, but I can't give you a 100% guarantee on this because it is custom business logic implementation.

#2. Individual DataPoint Styling Based on Conditional Logic.

It's helpful to step back and understand that the chart is not a .NET Maui XAML control, it is a native platform control with a .NET Maui handler. so, when you define your desired settings in XAML, we take those values and apply them to the specific native platform control at instantiation.

So, yes, you can programmatically add and remove a PaletteItem to the chart according to a set of rules... but this is not a per datapoint rendering setup. For example, this will make all the series data points green or red based on a bool:

If you want per-datapoint rendering, you'll need to develop a custom native code approach that overrides the settings of our native controls. I do not have any examples of this being done in .NET Maui for OHLC as it's quite advanced custom implementation.

• I do have some examples of it being done for a BarSeries that you can get a head start from, please see https://docs.telerik.com/devtools/maui/knowledge-base/chart-palette-mvvm 
  
• You can also take the behavior approach to access the native PlatformView, see this KB https://docs.telerik.com/devtools/maui/knowledge-base/chart-dash-series

Outside of those custom native control development approaches, I don't have a way for you to dynamically change the colors of a data point as it is being rendered. All of the series datapoints use the same PaletteItem defined in the .NET Maui layer, for anything above this, it must be done natively.

Important Note: Every platform has a different native chart control, so you will need to write the specific code using that platform's native control, so you can use the native control's documentation for some guidance on the available properties. On Windows, it is a WinUI3 ChartView. For Android see RadChartView Overview.  For iOS/MacCatalyst see TKChart Overview.

For WinUI development, please study this article where we describe the PointTemplateSeries templates (OHLC uses point template) PointTemplateSeries Class - WinUI Chart - Series - Telerik UI for WinUI. We describe the information you'll need to understand before defining your own custom point templates, for example:

you can find the source code for the Candlestick point template container visual factory here => UI-For-UWP/ContainerVisualsFactory.cs at fbf9d9e5fce787098d026e5d62cc3b7bf7d620d3 · telerik/UI-For-UWP (github.com).

Combining Concepts

One tip I can give you is to consider using both of the above ideas into one approach. you can define a native WinUI DataTemplate for the PointTemplate, then use a windows-specific IValueConverter that returns a different brush based on the DataContext's values.

For example, here's the Windows-native IValueConverter that I used in the example above to return different colors based on some conditions:

You may have noticed that I added conditions for different incoming data types. This is so that I can use the same converter for multiple DataTemplates. You're not forced to have to write a separate converter for everything, its up to you.

Additional Tips:

• Use breakpoints in your converters/behaviors/helpers to understand the lifecycle and what data types are passed around
• Use temporary placeholder values to understand the UI layout (for example a Red background)
• This is going to take some experimentation on your part, there's no path laid before you to take as it's new custom development specifically designed for your needs in that specific application. Use my last two tips to help get you through it.

Hey Lance, Thanks for your detail explain, 

Actually I want to draw a chart with CandlestickSeries, and shows gain or lose with different color, like stocks, and when the mouse points over a DataPoint, I can get the DataPoint info to show in other place(only Mac and Win). 

And I also want to show tips when the mouse points over a DataPont, I saw your code, It is supposed to work on Windows only, How can I handle Mac version?

Thanks

Hi Allen,

Instead of trying to write custom code to individually render data points, might I suggest that you just simply split up the data and have two series? You can have one series for gains and one series for losses.

Because you have two series, you can now easily use the Chart Palette features to distinguish gain/loss data points without the need for custom datapoint renderers.

This does mean you'd split up the incoming data into two ObservableCollections (Gains and Losses), but it's a significantly less amount of work that developing custom renderers.

At runtime, this looks perfect:

Doing this has some additional benefits. It allows you to set different custom Tooltip templates based on whether the data point is a gain or loss. See my Windows Demo Update section below for details.

About Behaviors 

This is the bottom line for behaviors:

• SelectionBehavior- Requires user interaction
• Recommended --> TooltipBehavior - appears while hovering the mouse, after a short delay (~1s)
• TrackballBehavior - appears immediately

For MacCatalyst, see my code comment in the demo project.  My demo was simply a head start, not a complete solution. It's to help you see the interaction between the .NET MAUI layer and how to access the native platform layer by demonstrating the HandlerChanged event. Now that you have access to the native control, you can write that custom code to fit your scenario-specific needs.

At the bottom of my MainPage.xaml.cs, you will see a commented out code for #ELIF MACCATALYST, that shows you how to assign your own custom delegate for the iOS/MacCatalyst chart (Mac deployment uses MacCatalyst, not MacOS native, it's essentially iOS on Mac).

Please keep in mind that although there are native APIs to achieve these things using highly customized overrides, it's not available as a feature of the Telerik UI for MAUI chart right now. This custom code consulting is not something that is part of the product's technical support. We can arrange having this code written (or just consulting on how to do it) through out Professional Services partners.

I do not have any examples to share for custom delegates that does exactly what you need, you will need to write this part yourself. Fortunately,  I did however find an old KB article for Xamarin that explains how to write an iOS delegate that override the trackball/tooltip template, see https://docs.telerik.com/devtools/xamarin/knowledge-base/chart-custom-text-tooltip#custom-renderer-for-ios.

and that delegate goes here:

In your custom delegate, you can do whatever you want:

Note that the base class and the constructor is a little different for .NET MAUI than what is described in the KB article, but everything else is the same. For your convenience, you can use this as a head start:

#if MACCATALYST

public class MyChartDelegate : TelerikUI.TKChartDelegate
{
    public override void TrackballDidTrackSelection(TelerikUI.TKChart chart, TelerikUI.TKChartSelectionInfo[] selection)
    {
        ...code form article
 }
}

#endif

Two final Tips about iOS/MacCatalyst

Remember that you're working with OHLC data points, so you need to further modify the KB article's code to show OHLC values (instead of X/Y values):

For styling options, you can use what is available in the iOS API. This is very different from XAML where you can do things in a nice XAML DataTemplate, instead you must programmatically go through all the elements and set the accordingly. For example:

Windows Demo Update

I have made some improvements to the windows example for you, please study the code in my attached demo. you will now see that I only use the tooltip (instead of trackball) and apply a different DataTemplate for each series (the extra benefit for having two different series for gain/loss!).

here's the result at runtime

Further Assistance

If you have trouble writing the delegate, please open a Support Ticket instead of replying to this forum post. This is a highly specialized request and will need direct attention with your specific scenario.  This is so that you can talk to the developers or support engineers, I was not able to get the full functionality that I was hoping from the custom delegate, so I imagine you'll eventually want to talk to them..  I go to great lengths to avoid mentioning Support or Professional Services in the forums, however in this case, any further discussion to meet your low level customization needs should be done via Technical Support.

I've noticed you have started multiple trials (6 times) and have never been assigned a license. Please ask whomever is the owner of the license that you're using to assign you to the dev seat so that you can open a ticket. Go to Manage Licensed Users portal, there they can assign you to the license, which unlocks the advanced support options.