# How to give space between x axis values and heat rules

**URL:** <https://forum.inductiveautomation.com/t/how-to-give-space-between-x-axis-values-and-heat-rules/56147>\
**Category:** Ignition\
**Created:** [February 15, 2022, 4:48am UTC](https://forum.inductiveautomation.com/t/how-to-give-space-between-x-axis-values-and-heat-rules/56147 "2022-02-15T04:48:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![user95](https://avatars.discourse-cdn.com/v4/letter/u/bbe5ce/32.png) [@user95](https://forum.inductiveautomation.com/u/user95)\
**Post date:** [February 15, 2022, 4:48am UTC](https://forum.inductiveautomation.com/t/how-to-give-space-between-x-axis-values-and-heat-rules/56147/1 "2022-02-15T04:48:36Z")

</div>

how to give space between x axis values and heat rules. I have share the image of heatmap. In that i highlight where i need space.

 ![space](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/a/1a498166a2bf0b413c298c5ffe7fcda05a7f38ff.jpeg)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 15, 2022, 10:26am UTC](https://forum.inductiveautomation.com/t/how-to-give-space-between-x-axis-values-and-heat-rules/56147/2 "2022-02-15T10:26:46Z")

</div>

Not quite a clean way to do it dynamically, and it also doesnt increase the size so if you translate it to much you wont be able to see it… Doesnt really look worth the trouble xd

So you should most likely change `div[data-component="ia.chart.xy"]` to `.psc-StyleClassName` and add the styleclass to your chart. That way you can also use css injection which is easiest for somethign like this

```auto
div[data-component="ia.chart.xy"] svg g[role="region"] g:nth-child(2) > g:nth-child(3) > g > g > g > g:nth-child(3){
transform: translate(0,370px) !important;
}

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/e/5e13ce1ba1ab1171d3b5bfaf6938fc43dc226f86.png)

---

<div class="post-metadata">

**Author:** ![user95](https://avatars.discourse-cdn.com/v4/letter/u/bbe5ce/32.png) [@user95](https://forum.inductiveautomation.com/u/user95)\
**Post date:** [February 15, 2022, 11:26am UTC](https://forum.inductiveautomation.com/t/how-to-give-space-between-x-axis-values-and-heat-rules/56147/3 "2022-02-15T11:26:13Z")

</div>

Not get it.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 15, 2022, 11:34am UTC](https://forum.inductiveautomation.com/t/how-to-give-space-between-x-axis-values-and-heat-rules/56147/4 "2022-02-15T11:34:54Z")

</div>

create a style class (in this case Folder/NewStyle)  
paste this code below into the background image, just change the first param to match your style path (behind the psc-) (replace / with`\/` for folders)  
adjust the 370px to what seems to fit for you, % probably works too

`}.psc-Folder\/NewStyle svg g[role="region"] g:nth-child(2) > g:nth-child(3) > g > g > g > g:nth-child(3){ transform: translate(0,370px) !important;}{`

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/e/0e8b967cd58ef8d46efdc43db2b1299c96fb0e65.png)

It really isnt all that great to do and might not work with certain legends or stuff enabled

---

<div class="post-metadata">

**Author:** ![user95](https://avatars.discourse-cdn.com/v4/letter/u/bbe5ce/32.png) [@user95](https://forum.inductiveautomation.com/u/user95)\
**Post date:** [February 15, 2022, 11:47am UTC](https://forum.inductiveautomation.com/t/how-to-give-space-between-x-axis-values-and-heat-rules/56147/5 "2022-02-15T11:47:21Z")

</div>

Thank you