Programmatically highlight a point in the chart

[Joseph Tan]

Hi There,

I have a scatter plot as follows.

Depending on user actions (outside the chart, like selecting something from a dropdown list) I would like to programmatically highlight or select a particular point in the chart.

How do do this without reloading the entire chart? 

[Srihari Muthukaruppan]

Hi Joseph, 

 

We can achieve your requirement using ChartSelectedDataIndexes in the chart. Based on your request we have prepared a sample in which we have modified the selected points by using dropdown values. Please find the sample, code snippet and screenshot below. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SelectedData19.1.69_-2004890062.zip 

 

Code Snippet: 

// add your additional code here 

<SfChart Title="Olympic Medals" SelectionMode="Syncfusion.Blazor.Charts.SelectionMode.Point" IsMultiSelect="true"> 

    <ChartSelectedDataIndexes> 

        <ChartSelectedDataIndex Series="0" Point="@point"> 

        </ChartSelectedDataIndex> 

        <ChartSelectedDataIndex Series="1" Point="@point1"> 

        </ChartSelectedDataIndex> 

    </ChartSelectedDataIndexes> 

 

// add your additional code here 

</SfChart> 

<div style="width: 200px"> 

    <SfDropDownList TValue="string" TItem="DropDownData" Placeholder="1" DataSource="@Modes"> 

        <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="ChangeMode"> 

         </DropDownListEvents> 

        <DropDownListFieldSettings Value="Value"></DropDownListFieldSettings> 

    </SfDropDownList> 

</div> 

 

// add your additional code here 

    public int point = 1; 

    public int point1 = 1; 

    private List<DropDownData> Modes { get; set; } = new List<DropDownData> 

    { 

        new DropDownData() { Value = "1" }, 

        new DropDownData() { Value = "2" }, 

        new DropDownData() { Value = "3" }, 

        new DropDownData() { Value = "4" }, 

        new DropDownData() { Value = "5" }, 

        new DropDownData() { Value = "6" } 

    }; 

    public class DropDownData 

    { 

        public string Value { get; set; } 

    } 

    public void ChangeMode(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownData> args) 

    { 

        this.point = Convert.ToInt32(args.Value); 

        this.point1 = Convert.ToInt32(args.Value); 

    } 

 

// add your additional code here 

 

 

Screenshot: 

Default: 

 

 

After Change: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M 

[Joseph Tan]

Thanks

[Durga Gopalakrishnan]

Hi Joseph, 

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you. 

Regards,  

Durga G 

[Emil]

Hi,

Blazor components seem to cover almost all that we need. Good job!

One question regarding the bar selection from the code behind - the code visible above. Changing value of field 'point', while on the generated page, does not change the selected bar.

Replacing field 'point' with a property, or refreshing the render tree dosn't help either.

Stack: Server side app, core 7.0.03. Syncfusion.Blazor.Charts v22.1.34. All browsers. I have not tried other configurations/versions.

Can you have a look? Thank you.

[Gopalakrishnan Veeraraghavan]

Hi Emil,

We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our patch release which is scheduled to be rolled out on July 18^th, 2023. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback Link: When dynamically changing the point in ChartSelectedDataIndex, the column points are not being selected in Blazor | Feedback Portal (syncfusion.com)

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Regards,

Gopalakrishnan Veeraraghavan

[Durga Gopalakrishnan]

Emil,

We apologize for any inconvenience caused. We have resolved the reported issue, and it is currently in the testing phase to ensure compatibility with various cases. Therefore, we will incorporate the fix in our upcoming patch release scheduled for July 25th, 2023. We appreciate your patience during this time.

Please inform us if you have any other concerns.

[Gopalakrishnan Veeraraghavan]

Hi Emil,

Due to the 2023 Volume 2 SP release, there is no weekly NuGet release this week. We will include the issue fix in our upcoming 2023 Volume 2 SP release. We will let you know once it is released. We appreciate your patience until then. 

Regards,

Gopalakrishnan Veeraraghavan

[Gopalakrishnan Veeraraghavan]

Hi Emil,

We have currently resolved the issue with the dynamic update of ChartSelectedDataIndex and have generated a custom NuGet package with the necessary fix in version 22.1.39. We kindly request you to ensure the functionality of your application by installing this custom NuGet package.

Custom NuGet : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Signed-July27518748242.zip

Steps to add NuGet : https://www.syncfusion.com/downloads/support/directtrac/general/doc/Steps_to_add_the_custom_nuget_package-47391051.docx

Kindly revert us if you have any concerns.

Regards,

Gopalakrishnan Veeraraghavan

[Gopalakrishnan Veeraraghavan]

Hi Emil,

This fix has been available in our latest package. You can use the latest Syncfusion.Blazor.Charts NuGet package.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChangingfieldPoint_(2)315537530.zip

NuGet Package: https://www.nuget.org/packages/Syncfusion.Blazor.Charts/

Regards,

Gopalakrishnan Veeraraghavan