How to change the background and text colors in Blazor HeatMap?

The background color of the Blazor HeatMap can be changed using CSS style, and the text in the component can be changed using the component’s properties. This section will show you how to change the background and text colors in the HeatMap.

You can change the HeatMap’s background color by setting a color value to the fill CSS style in the HeatMap’s border element. The title, x-axis labels, and y-axis labels available in the HeatMap can be changed by setting the color value to the Color property in the HeatMapXAxisTextStyle, HeatMapYAxisTextStyle and HeatMapTitleTextStyle tags in the HeatMap component.

The code example below demonstrates how to change the background and text colors in the Blazor HeatMap.

Index.razor

@using Syncfusion.Blazor.HeatMap;

<SfHeatMap ID="HeatMap" DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)">
        <HeatMapTitleTextStyle Color="White"></HeatMapTitleTextStyle>
    </HeatMapTitleSettings>
     <HeatMapXAxis>
     <HeatMapXAxisTextStyle Color="White"></HeatMapXAxisTextStyle>
     </HeatMapXAxis>
     <HeatMapYAxis>
     <HeatMapYAxisTextStyle Color="White"></HeatMapYAxisTextStyle>
     </HeatMapYAxis>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
    <HeatMapLegendSettings>
        <HeatMapLegendTextStyle Color="White"></HeatMapLegendTextStyle>
    </HeatMapLegendSettings>
</SfHeatMap>

@code{
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52},
            {68, 52, 63, 51, 30, 51},
            {7, 16, 47, 47, 88, 6},
            {66, 64, 46, 40, 47, 41},
            {14, 46, 97, 69, 69, 3},
            {54, 46, 61, 46, 40, 39}
        };
        return dataSource;
    }
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

<style>
    #HeatMap_HeatmapBorder{
        fill:black;
    }
</style>

The following screenshot illustrates the output of the above code snippet.

View the sample in GitHub

Conclusion

I hope you enjoyed learning how to change the background and text colors in Blazor HeatMap component.

You can refer to our Blazor HeatMap feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor HeatMap example to understand how to create and visualize data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!