Customize X-axis and Y-axis

[Ton That Hung]

Hi Syncfusion Team,
I'm using the HeatMap component and want to customize the X-axis and Y-axis.

Specifically, I want to add text at the corner of the X-axis and Y-axis (On image: add "DIMENSIONS" text). And I want to customize the labels of X-axis/Y-axis(such as border-radius, background-color, etc).

I have researched your document, but I haven't found any way to reach my requirement.
Do you have a way to reach my requirement?

Thanks in advance for your help

[Indumathi Ravi]

Hi Ton,

We do not support adding text to the X and Y axis corners. However, by using multilevel labels, we can bring the "DIMENSIONS" little closer to the X and Y axis corners in the HeatMap component. Please see the code snippet, screenshot, and sample below.

Code Snippet:

<HeatMapComponent

          id="heatmap"

          xAxis={{

            opposedPosition: true,

            multiLevelLabels: [

              {               

               border: { type: 'WithoutBorder' },

                textStyle: {

                  color: 'black',

                  fontWeight: 'Bold',

                },

                categories: [{ start: -1.3, end: 0, text: 'DIMENSIONS' }],

              },

            ]         

          }}

        >

          <Inject services={[Legend, Tooltip]} />

        </HeatMapComponent>

You can find the sample in the below link.

https://stackblitz.com/edit/react-jrano4-sjotgt?file=index.js

Meanwhile, we support axis label border properties like "color", "type", and "width". Other properties are not supported by the HeatMap component. Please see the following documentation link for the supported axis label border properties:

https://helpej2.syncfusion.com/react/documentation/api/heatmap/axisLabelBorderModel/

Could you please tell us what properties you require for your scenario? We will then consider this as a feature request to improve the border properties for the axis in the HeatMap component.

[Ton That Hung]

Hi Indumathi Ravi,
Thanks for your support.

For your question:"Could you please tell us what properties you require for your scenario? We will then consider this as a feature request to improve the border properties for the axis in the HeatMap component.". ​I need to custom background-color, border-radius properties of axis label.

Best regards.

[Indumathi Ravi]

Hi Ton,

We have considered your requirement - "To improve the axis label border properties in the Heatmap component" as improvement and added it to our features request list. However, we will include this implementation in any of our upcoming release. Meanwhile, please find the feedback link below to keep track of this improvement.

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