I don't see any way to customize the text style of the heatmap's x and y axis titles. HeatMapXAxisTextStyle and HeatMapYAxisTextStyle only seem to customize the text style of the axis labels. But there doesn't seem to be any way to customize the axis titles' text style along the lines of the ChartAxisTitleStyle in the series chart component. Is there something I am missing? I know I can use CSS, but is there any way besides that that I can customize the font size, color, etc. of the x and y axis titles?
Hi Justin,
Greeting from syncfusion.
We have validated the reported query “text style of axis title be customized” in the Blazor Heatmap Chart component. Currently, we do not have customization properties for Heatmap axis titles. We suggest you use the CSS style to achieve the axis title. For your reference, we have attached the Heatmap Chart sample.
Refer the below code.
|
[Index.razor],
#default_YAxisTitle{ fill:blue; font-size:15px; } #default_XAxisTitle{ fill:blue; font-size:15px; } |
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication12080259644.zip
Please check the sample and get back to us if you need any further assistance.
Regards,
Sivakumar S
How do you style the labels themselves?
Hi Justin,
The axis titles and labels can be customized using the tags "HeatMapXAxisTextStyle" and "HeatMapYAxisTextStyle". Please find the code snippet for the same below.
Code Snippet:
|
<SfHeatMap ID="default" DataSource="@HeatMapData"> <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)"> </HeatMapTitleSettings> <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"> <HeatMapXAxisTitle Text="Sample Title for x-axis"> <HeatMapXAxisTextStyle Size="25px" Color="Blue" FontFamily="fantasy"></HeatMapXAxisTextStyle> </HeatMapXAxisTitle> <HeatMapXAxisTextStyle Size="12px" Color="Red" FontFamily="cursive"></HeatMapXAxisTextStyle> </HeatMapXAxis> <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"> <HeatMapYAxisTitle Text="Sample Title for x-axis"> <HeatMapYAxisTextStyle Size="25px" FontStyle="Italic" Color="Green" FontFamily="fantasy"></HeatMapYAxisTextStyle> </HeatMapYAxisTitle> <HeatMapYAxisTextStyle Size="12px" FontStyle="Italic" Color="Violet" FontFamily="cursive"></HeatMapYAxisTextStyle> </HeatMapYAxis> </SfHeatMap> |
Currently, the "Color" property is not properly applied to the axis labels, and the title text cannot be properly customized when using the tags "HeatMapXAxisTextStyle" and "HeatMapXAxisTextStyle". So, we have considered this as a defect and logged a defect report for the same. However, we will include the fix for the reported issue in our weekly patch release, which is expected to be available by the mid of October 2022. Please find the below feedback link to keep track of the reported issue.
https://www.syncfusion.com/feedback/38007
Regards,
Indumathi R.
Hi Justin,
Sorry for the inconvenience.
We have not included the fix for the reported issue in our weekly patch release due to the stability concerns in the fix. However, we will provide a stable fix and include it in our weekly patch release, which is expected to be available by the first week of November 2022.
Regards,
Indumathi R.
While we attempted to fix the reported issue, we encountered some stability issues when testing across all of the axis label properties and axis title properties. We have planned to provide a stable fix across all the properties of the axis labels and axis title. So we have considered this as an improvement and the fix for this will be available in our 2022 Volume 4 release which is expected to be available by the end of December 2022.
Hi Justin,
We have implemented the feature ”Customization of the text styles of the titles and labels on the axes are not proper” and the fix is included in our Essential Studio 2022 Volume 4 release v20.4.0.38 which is rolled out and is available for download under the following link.
You can now customize the axis title by using the “HeatMapXAxisTitleTextStyle” and “HeatMapYAxisTitleTextStyle” tags. We can also customize the axis labels by using “HeatMapXAxisTextStyle” and “HeatMapYAxisTextStyle” tags in the HeatMap component. Please find the code snippet for the same below.
Code Snippet:
|
<SfHeatMap ID="default" DataSource="@HeatMapData"> <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)"> </HeatMapTitleSettings> <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"> <HeatMapXAxisTitle Text="Sample Title for x-axis"> <HeatMapXAxisTitleTextStyle Size="25px" Color="blue" FontFamily="fantasy"></HeatMapXAxisTitleTextStyle> </HeatMapXAxisTitle> <HeatMapXAxisTextStyle Size="18px" Color="red" FontFamily="cursive"></HeatMapXAxisTextStyle> </HeatMapXAxis> <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"> <HeatMapYAxisTitle Text="Sample Title for x-axis"> <HeatMapYAxisTitleTextStyle Size="25px" FontStyle="Italic" Color="green" FontFamily="fantasy"></HeatMapYAxisTitleTextStyle> </HeatMapYAxisTitle> <HeatMapYAxisTextStyle Size="18px" FontStyle="Italic" Color="violet" FontFamily="cursive"></HeatMapYAxisTextStyle> </HeatMapYAxis> </SfHeatMap> |
You can find the sample from the below link.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HeatMap354104714
We thank you for your support and appreciate
your patience in waiting for this release. Please get in touch with us if you would
require any further assistance.