How to highlight a candle bar?

Question

Hi,So far i do not use Char control. But i saw a sample that is a candle char. What i want to do is that select a candle bar by clicking. I guess i can do it. i can handle click event, calculate client coordinate and calculate coordinate of  every candle bar then i should know which bar was clicked. But it is not convenient. So is there any easier way to do it?

Yuvaraj Palanisamy · Answer

Hi UMLer,You can hghlight the candle bar while click on the segment with the help of ChartRegionClick event of Chart control as per the below code example.  
 
CodeSnippet: 




 
this.chartControl1.ChartRegionClick += ChartControl1_ChartRegionClick; 
 
private void ChartControl1_ChartRegionClick(object sender, ChartRegionMouseEventArgs e) 
{ 
    var series = this.chartControl1.Series[0]; 
    series.ConfigItems.FinancialItem.PriceDownColor = Color.Empty; 
    series.ConfigItems.FinancialItem.PriceUpColor = Color.Empty; 
 
    // Returns whether its click the candle segment 
    if (e.Region.IsChartPoint) 
    { 
        //Get the series index in the chart 
        int seriesIndex = e.Region.SeriesIndex; 
 
        //Get the series datapoint index 
        int datapointIndex = e.Region.PointIndex; 
 
        for(int i = 0; i < series.Points.Count; i++) 
        { 
            var values = series.Points[i].YValues; 
             
            if (i == datapointIndex) 
            { 
                series.Styles[i].Interior = new Syncfusion.Drawing.BrushInfo(Color.Blue); 
            } 
            else 
            { 
                if (values[2] < values[3]) 
                { 
                    series.Styles[i].Interior = new Syncfusion.Drawing.BrushInfo(Color.Green); 
                } 
                else 
                { 
                    series.Styles[i].Interior = new Syncfusion.Drawing.BrushInfo(Color.Red); 
                } 
            } 
        } 
        this.chartControl1.Redraw(true); 
    } 
} 
 
 
Also, we have attached the sample for your reference. Please find the sample from the below the link and let us know if you any other queries. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/173083/ze/Candle_Hightlight764244300  
 
Output: 
  
 
Please let us know if you have any further assistance. 
 
Regards, 
Yuvaraj.

UMLer · Answer

thanks, very good sample. but there is a problem. if i click on the blank area of chart, background color of all candle bars changed. how to do not change

background  color?

Yuvaraj Palanisamy · Answer

Hi OMLer, 
 
You can resolve the reported problem by setting the PriceDownColor & PriceUpColor as empty when candle bar segment is click as like below code example. 
 
CodeSnippet: 




private void ChartControl1_ChartRegionClick(object sender, ChartRegionMouseEventArgs e) 
{ 
    var series = this.chartControl1.Series[0]; 
     
    // Returns whether its click the candle segment 
    if (e.Region.IsChartPoint) 
    { 
        series.ConfigItems.FinancialItem.PriceDownColor = Color.Empty; 
        series.ConfigItems.FinancialItem.PriceUpColor = Color.Empty; 
 
        //Get the series index in the chart 
        int seriesIndex = e.Region.SeriesIndex; 
 
        //Get the series datapoint index 
        int datapointIndex = e.Region.PointIndex; 
 
        for(int i = 0; i < series.Points.Count; i++) 
        { 
            var values = series.Points[i].YValues; 
 
            if (i == datapointIndex) 
            { 
                series.Styles[i].Interior = new Syncfusion.Drawing.BrushInfo(Color.Blue); 
            } 
            else 
            { 
                if (values[2] < values[3]) 
                { 
                    series.Styles[i].Interior = new Syncfusion.Drawing.BrushInfo(Color.Green); 
                } 
                else 
                { 
                    series.Styles[i].Interior = new Syncfusion.Drawing.BrushInfo(Color.Red); 
                } 
            } 
        } 
        this.chartControl1.Redraw(true); 
    } 
} 
 
 
Also, we have attached the modified sample for your reference. Please find the sample from the below link 
 
Sample: https://www.syncfusion.com/downloads/support/forum/173083/ze/Candle_Selection_Updated1146602228  
 
Please let us know if you have any further assistance. 
 
Regards, 
Yuvaraj.

UMLer · Answer

Nice!!!

Yuvaraj Palanisamy · Answer

Hi OMLer, 
 
Thanks for your update. We are glad to know that the solution works at your end. 
 
Regards, 
Yuvaraj