Sankey, How to format the values displayed next to nodes?

[Matthew Paul]

With the Sankey chart, how do you customize the value that get's displayed on the links between nodes? This:

By default on links between nodes it shows something that follows this pattern "{label} {value}"  (this isn't a property I've found, I'm just putting this for illustration).

How do I :

•     - Hide the value, so it's just {label}? Or...
•     - Format how this is displayed, put a separator, format to a number of decimal places and put units? i.e. 
  • "{label}: {value:'0.###'}kWh" 
    

                   

[Durga Gopalakrishnan]

Hi Matthew,

Greetings from Syncfusion.

Currently, the Sankey chart does not support formatting for data labels directly. However, your requirement can be achieved using the LabelRendering event. This event allows you to customize the data label text according to your needs.

For your reference, we’ve attached a sample demonstrating this approach.

Query 1 : Hide the value, so it’s just {label}?

You can display only the label by assigning the argument node id to argument text of event. Please check with below snippet and screenshot.

<SfSankey LabelRendering="OnLabelRendering">

</SfSankey>

 

void OnLabelRendering(SankeyLabelRenderEventArgs args)

{

     args.Text = args.Node.Id;

}

Sample : https://blazorplayground.syncfusion.com/rZhSDksRfnezTWTJ

Query 2 : Format how this is displayed, put a separator, format to a number of decimal places and put units? i.e. "{label}: {value:'0.###'}kWh"

You can format the argument value and append it to the argument node id to achieve the desired output. Please check with below snippet.

<SfSankey LabelRendering="OnLabelRendering"></SfSankey>

void OnLabelRendering(SankeyLabelRenderEventArgs args)

{

    // Format value with thousands separator + 3 decimals

    string formattedValue = args.Value.ToString("N3"); // e.g. 12,345.678

 

    // Append unit

    args.Text = $"{args.Node.Id}: {formattedValue} kWh";

}

Sample : https://blazorplayground.syncfusion.com/LDLIZkiRzbUuRgXf

UG : https://blazor.syncfusion.com/documentation/sankey/events#events

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.