Add symbol to heatmap cell

[Amanda]

Hi,

i would like to add a symbol such as degree of Celsius in the cell of a heatmap

I have read your documentation and i noticed the following property .... Format="{value} $"

So how can i 

1. add a symbol like \u00B0  ​which is the symbol for the degree. 
2. Also can i add more complex symbols like warning sign Unicode character such as  U+26A0 ( “⚠” U+26A0 Warning Sign Unicode Character (compart.com) ) and to add color like red?

Thanks in advance

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Amanda,

Greetings from Syncfusion support

We are validating the feasibility of achieving your requirement with HeatMap component. We will check and update you our further validation details in two business days on 18th January 2022.

We appreciate your patience.

Regards,

Shameer Ali Baig S.

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Amanda,

Thanks for the patience.

We have validated your requirement to add degree symbol with the format property of cell settings in HeatMap component. We suggest you to add °  to add degree symbol cell settings.

Please, find the solution code below.

[Index.razor]

@using Syncfusion.Blazor.HeatMap

 

<SfHeatMap DataSource="@HeatMapData">

    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>

    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>

    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">

    </HeatMapTitleSettings>

    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect" Format="{value} &#176;"></HeatMapCellSettings>

    <HeatMapMargin Left="15" Right="15" Top="15" Bottom="15"></HeatMapMargin>

</SfHeatMap>

 

@code{

    int[,] GetDefaultData()

    {

        int[,] dataSource = new int[,]

        {

    {73, 39, 26, 39, 94, 0},

    {93, 58, 53, 38, 26, 68},

    {99, 28, 22, 4, 66, 90},

    {14, 26, 97, 69, 69, 3},

    {7, 46, 47, 47, 88, 6},

    {41, 55, 73, 23, 3, 79}

                };

        return dataSource;

    }

    string[] XAxisLabels = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael" };

    string[] YAxisLabels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };

    public object HeatMapData { get; set; }

    protected override void OnInitialized()

    {

        HeatMapData = GetDefaultData();

    }

    public string hello = (string)"\u00B0";

}

Output:

Document reference for sample:  https://blazor.syncfusion.com/documentation/heatmap-chart/appearance#format

Please, let us know if you need any further assistance.

Regards,

Shameer Ali Baig S.

[Amanda]

Hi Shameer Ali Baig S.

thank you for your prompt reply.

I successfully added other symbols like U+2190 converting the hex to decimal ( &# 8592 ← ) from the site List of Unicode characters - Wikipedia.

But when i try to add the warning symbol U+26A0 which i also convert it from hex to decimal ( &#9888 ) i can not see it.

In a html tag <div> i can see the warning symbol, but not in a heatmap cell.

So, which of them, HTML Codes (decimal), of the Unicode List do you support in the heatmap? Or how can i add it on the heatmap cell because it is just a HTML Code.

Thanks in advance

[Kanagambigai Murugan]

Hi Amanda, 

We are currently validating the feasibility of achieving your requirement with HeatMap component. We will check and update you with further details within three business days on 25^th January 2022. 

We appreciate your patience. 

Regards, 

Kanagambigai M 

[Kanagambigai Murugan]

Hi Amanda, 

Thanks for the patience. 

We have considered the issue “Specific formatting symbols are not rendered inside the HeatMap cell” as a bug at our end. The fix for this issue will be included in our weekly patch release which is expected to be rolled out by the end of February 2022. 

You can track the status of this fix through the below portal link 

https://www.syncfusion.com/feedback/32159/specific-formatting-symbols-are-not-rendered-inside-the-heatmap-cell 

We appreciate your patience. 

Regards, 

Kanagambigai M 

[Indumathi Ravi]

Hi Amanda,

Thank you for your patience.

We have fixed the reported issue - “Specific formatting symbols are not rendered inside the Heatmap cell” and included the fix in our latest weekly patch release(v20.2.43). Please update the latest “Syncfusion.Blazor.HeatMap” package in your application to resolve the reported issue. Please find the package link below.

https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap

Please let us know if you need any further assistance.

Regards,

Indumathi R.