Is it possible to select a SFChart - ColumnSeries segment programatically ?

[Santhosh Kumar Bathruswamy]

I would like to keep a few segments of a few series in my SfChart selected when I render them. Is it possible to bind the `isSelected` state of each segment to the ViewModel ?

[Dhanaraj Rajendran]

Hi Santhosh Kumar,

Thank you for reaching out.

We have validated your query. Yes, you can keep specific segments of a series selected when the chart is initially rendered. This can be achieved by using the SegmentColorPath property of the series. You can define an IsSelected property in your model and use it to determine the segment’s color. The color can then be assigned to the Fill property of the model, which is bound to the SegmentColorPath of the series.

Below is a code snippet to demonstrate this approach:

public class Model : INotifyPropertyChanged

{

    bool isSelected;

    private Brush fill = Brushes.Blue;

 

    public Brush Fill

    {

        get { return fill; }

        set

        {

            fill = value;

            OnPropertyChanged(nameof(Fill));

        }

    }

 

    public bool IsSelected

    {

        get { return isSelected; }

        set

        {

            if (value != isSelected)

            {

                isSelected = value;

                Fill = isSelected ? Brushes.LightPink : Brushes.Blue;

                OnPropertyChanged(nameof(IsSelected));

            }

        }

    }

}

<chart:SfChart>

  

    . . .

    <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" SegmentColorPath="Fill"/>

</chart:SfChart>

<chart:SfChart SelectionChanging="SfChart_SelectionChanging">

 

    <chart:SfChart.Behaviors>

        <chart:ChartSelectionBehavior EnableSegmentSelection="True"/>

    </chart:SfChart.Behaviors>

 

    . . .

    <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" SegmentColorPath="Fill" ListenPropertyChange="True"/>

</chart:SfChart>

By following this approach, you can preselect specific segments during load time.

To bind the selection state of each segment using a ViewModel property, you can enable segment selection, set the ListenPropertyChange property of the series to True, and handle the SelectionChanging event of the chart. In the SelectionChanging event, you can access the selected segment and update the IsSelected property of the corresponding data model. Updating this property will trigger a change in the Fill property, which will automatically update the segment color. Additionally, you can cancel the built-in selection behavior by setting e.Cancel to true.

Below is the code snippet for this approach:

private void SfChart_SelectionChanging(object sender, ChartSelectionChangingEventArgs e)

{

    if (e.SelectedSegment.Item is Model model)

    {

        model.IsSelected = !model.IsSelected;

    }

 

    e.Cancel = true;

}

By implementing this, you can bind the selection state of each segment to the IsSelected property in your model and manage the selection state through your ViewModel's data collection.

For your convenience, we have attached a prepared sample demonstrating this functionality.

If you have further questions or need additional assistance, please don’t hesitate to reach out. We’re here to help!

Regards,

Dhanaraj Rajendran.

Attachment: SF195475_89dea05.zip

[Santhosh Kumar Bathruswamy]

Thank you Dhanaraj Rajendran , It works as expected. However, when we render a chart with selected segments, it alters the chart legend color to the selected state color instead of the segment's original color.

[Dhanaraj Rajendran]

Hi Santhosh Kumar,

 

We have reviewed your query and attempted to reproduce the scenario you reported. We were able to replicate the behavior you’re experiencing when setting true to IsSelected property for the first item of the collection at load time.

We would like to clarify that this is not an issue. When the Interior property for the series is not specified, the legend icon color is determined by the first color in the palette brush or the color of the first segment. This behavior is by design and is expected.

Currently, we are exploring a possible workaround to meet your requirement without affecting the legend color. We will investigate further and provide you with more details within two business days (17th December 2024).

Thank you for your understanding and patience.

 

Regards,

Dhanaraj Rajendran.

[Santhosh Kumar Bathruswamy]

Hi Dhanaraj Rajendran,
    I have manually set 'LegendIconTemplate' for each ChartSeries of my SFChart to get my expected behaviour. Thank you.

[Dhanaraj Rajendran]

Hi Santhosh Kumar,

 

Thank you for sharing your solution and for confirming that setting the LegendIconTemplate for each ChartSeries helped you achieve the expected behavior.

We’re glad you were able to resolve the issue. If you have any further questions or need assistance with any other features, please feel free to reach out. We’re always here to help!

 

Regards,

Dhanaraj Rajendran.