We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

button in tooptip of Heatmap chart and color of cells in Heatmap chart

Hello!

Is it possible to put a button on the heatmap chart tooltip?

I made this graphic and where it says "<SfButton>Ver detalle</SfButton>" is where i want a button that redirects me to another page to be there.


Another question that i have is that i want the colors of the cells as seen in the image. The only way i found to put them that way is to assign different numbers to each one and associate each value with the 3 colors i need. Is there a way to have that template and not to have the neccesity to put the numbers like i had to do?


I leave my code below:


<SfHeatMap DataSource="@HeatMapColors">
<HeatMapEvents TooltipRendering="@TooltipRendering"></HeatMapEvents>
<HeatMapTitleSettings Text="Matriz Impacto/Frecuencia para x"></HeatMapTitleSettings>
<HeatMapXAxis Labels="@XLabels" LabelRotation="45" LabelIntersectAction="@SFHeatMap.LabelIntersectAction.None">
</HeatMapXAxis>
<HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
<HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect">
<HeatMapCellBorder Width="1" Radius="8" Color="White"></HeatMapCellBorder>
</HeatMapCellSettings>
<HeatMapCellTextStyle ></HeatMapCellTextStyle>
<HeatMapPaletteSettings>
<HeatMapPalettes>
<HeatMapPalette Value="I1F1" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I1F2" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I1F3" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I1F4" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I1F5" Color="#fec001"></HeatMapPalette>

<HeatMapPalette Value="I2F1" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I2F2" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I2F3" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I2F4" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I2F5" Color="#fec001"></HeatMapPalette>

<HeatMapPalette Value="I3F1" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I3F2" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I3F3" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I3F4" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I3F5" Color="#ff0101"></HeatMapPalette>

<HeatMapPalette Value="I4F1" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I4F2" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I4F3" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I4F4" Color="#ff0101"></HeatMapPalette>
<HeatMapPalette Value="I4F5" Color="#ff0101"></HeatMapPalette>

<HeatMapPalette Value="I5F1" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I5F2" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I5F3" Color="#ff0101"></HeatMapPalette>
<HeatMapPalette Value="I5F4" Color="#ff0101"></HeatMapPalette>
<HeatMapPalette Value="I5F5" Color="#ff0101"></HeatMapPalette>
</HeatMapPalettes>
</HeatMapPaletteSettings>
<HeatMapLegendSettings Visible="false"></HeatMapLegendSettings>
</SfHeatMap>


@code {
protected string[] XLabels = new string[] { "Muy Baja", "Baja", "Media", "Alta", "Muy Alta" };
protected string[] YLabels = new string[] { "Muy Poco", "Poco", "Moderado", "Alto", "Muy Alto" };
protected int I1F1=11;
protected int I1F2=12;
protected int I1F3=13;
protected int I1F4=14;
protected int I1F5=15;
protected int I2F1=21;
protected int I2F2=22;
protected int I2F3=23;
protected int I2F4=24;
protected int I2F5=25;
protected int I3F1=31;
protected int I3F2=32;
protected int I3F3=33;
protected int I3F4=34;
protected int I3F5=35;
protected int I4F1=41;
protected int I4F2=42;
protected int I4F3=43;
protected int I4F4=44;
protected int I4F5=45;
protected int I5F1=51;
protected int I5F2=52;
protected int I5F3=53;
protected int I5F4=54;
protected int I5F5=55;
int[,] GetDefaultColors(){
int[,] dataSource = new int[,]
{
{I1F1, I2F1, I3F1, I4F1, I5F1},
{I1F2, I2F2, I3F2, I4F2, I5F2},
{I1F3, I2F3, I3F3, I4F3, I5F3},
{I1F4, I2F4, I3F4, I4F4, I5F4},
{I1F5, I2F5, I3F5, I4F5, I5F5},
};
return dataSource;
}

int[,] GetDefaultColors2()
{
int[,] dataSource = new int[,]
{
{0, 0, 0, 0, 0},
{0, 0, 0, 0, 0},
{0, 0, 0, 0, 0},
{0, 0, 0, 0, 0},
{0, 0, 0, 0, 0},
};
return dataSource;
}

public object HeatMapColors { get; set; }
protected override void OnInitialized()
{
HeatMapColors = GetDefaultColors();
}

public void ChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, BaseOption> args)
{
HeatMapColors = GetDefaultColors2();
}
void TooltipRendering(SFHeatMap.TooltipEventArgs args)
{
args.Content = new[] { $@"Impacto: {args.YLabel}.<br>Frecuencia: {args.XLabel}.<br><SfButton>Ver detalle</SfButton>" };
}
}


Thanks a lot and best wishes!

Matias.


6 Replies

MM Matias Mutz December 26, 2022 08:45 PM UTC

The Package version i am using at the moment is "20.1.0.61" and it is a blazor web assembly project.



IR Indumathi Ravi Syncfusion Team December 27, 2022 04:39 PM UTC

Hi Matias,


Please find the details for your queries in the below table.

Queries

Details

Is it possible to put a button on the heatmap chart tooltip?

 

I made this graphic and where it says "<SfButton>Ver detalle</SfButton>" is where i want a button that redirects me to another page to be there.

We do not support rendering custom components in the tooltip template of the Heatmap component. However, we have considered this an improvement and logged a feature report for the same. We will include this implementation in our Volume 4 SP release, which is expected to be available at the end of January 2023. Meanwhile, please find the feedback link below to keep track of this feature.

https://www.syncfusion.com/feedback/40067 

Another question that i have is that i want the colors of the cells as seen in the image. The only way i found to put them that way is to assign different numbers to each one and associate each value with the 3 colors i need. Is there a way to have that template and not to have the neccesity to put the numbers like i had to do?

The only possible way to reduce the numbers that you have provided in the HeatMapPalette tag is to set "StartValue" and "EndValue" properties in that same tag. These properties are used to define the start and end values of the range to which the mentioned color can be set. The "MinColor" properties represent the color for the given range. Please find the code snippet for the same below.

<SfHeatMap DataSource="@HeatMapColors">

   //..

    <HeatMapPaletteSettings Type="PaletteType.Fixed">

        <HeatMapPalettes>

<HeatMapPalette StartValue="I2F4" EndValue="I2F5" MinColor="#fec001"></HeatMapPalette>

            <HeatMapPalette StartValue="I3F3" EndValue="I3F4" MinColor="#fec001"></HeatMapPalette>

            <HeatMapPalette StartValue="I1F5" EndValue="I1F5" MinColor="#fec001"></HeatMapPalette>

            <HeatMapPalette StartValue="I3F5" EndValue="I3F5" MinColor="#ff0101"></HeatMapPalette>

            <HeatMapPalette StartValue="I1F1" EndValue="I4F1" MinColor="#c5f1d1"></HeatMapPalette>

            <HeatMapPalette StartValue="I4F2" EndValue="I4F3" MinColor="#fec001"></HeatMapPalette>

            <HeatMapPalette StartValue="I5F1" EndValue="I5F2" MinColor="#fec001"></HeatMapPalette>

            <HeatMapPalette StartValue="I4F4" EndValue="I4F5" MinColor="#ff0101"></HeatMapPalette>

            <HeatMapPalette StartValue="I5F3" EndValue="I5F5" MinColor="#ff0101"></HeatMapPalette>

        </HeatMapPalettes>

    </HeatMapPaletteSettings>

</SfHeatMap>

 

You can find the sample at the below link.

https://www.syncfusion.com/downloads/support/forum/179604/ze/BlazorAppWASM625515423

 

Please let us know if the above solution meets your requirements.


Regards,

Indumathi R.



MM Matias Mutz December 28, 2022 04:36 AM UTC

Hi, thanks for the reply.


Ok, i will wait for the implementation. Thank you for having it into account.


And talking about the pallete of colors, also thanks, i will do it in that way so it is more clear.


Thank you,

Matias.



IR Indumathi Ravi Syncfusion Team December 28, 2022 11:56 AM UTC

Hi Matias,

Thank you for update.

We'll let you know once the package is published.



IR Indumathi Ravi Syncfusion Team January 23, 2023 03:54 PM UTC

Hi Matias,

 

Sorry for the inconvenience.

 

We have not included the implementation in our 2022 Volume 4 SP release. However, the fix will be included in our 2023 Volume 1 Release, which is expected to be available by the end of March 2023.



IR Indumathi Ravi Syncfusion Team March 24, 2023 05:41 PM UTC

Hi Matais,


We have implemented the improvement to render the custom components in the tooltip template of the HeatMap component and the fix is included in our Essential Studio 2023 Volume 1 Main Release v21.1.35 which is rolled out and is available for download under the following link.


Essential Studio 2023 Volume 1 Main Release v21.1.35 is available for download | Announcements Forums | Syncfusion


To render custom HTML element, you can use the “Template” property in the “HeatMapTooltipSettings” class. Please find the code snippet to add tooltip template below.


Code Snippet:

<SfHeatMap DataSource="@HeatMapColors">

    <HeatMapTooltipSettings Fill="#265259">

        <Template>

            @{

                var TooltipTemplate = (context as Dictionary<string, string>);

                <div class="displayTemplate">

                    <span class="label"> Impacto:  @TooltipTemplate["XLabel"] <br /> Frecuencia: @TooltipTemplate["YLabel"] <br /> </span>

                   <SfButton>Ver detalle</SfButton>

                </div>

            }

        </Template>

    </HeatMapTooltipSettings>

    //..

</SfHeatMap>


You can find the sample for demonstrating the tooltip template below.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp4-1091346432



When we analyzed your requirement further, we came to know that you need to navigate to another page using the button in the tooltip template. But we render tooltip in the mouse move event. When you try to click the button, the tooltip for the next cell will be rendered. Please let us know your requirement in detail. We will analyze further and assist you better.


Loader.
Up arrow icon