# Customizing Color of Temperature Scale Numbers on XY Chart HeatMap in Ignition

**URL:** <https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 1, 2024, 7:51am UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023 "2024-08-01T07:51:55Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gokul\_M](https://avatars.discourse-cdn.com/v4/letter/g/e36b37/32.png) [@Gokul\_M](https://forum.inductiveautomation.com/u/Gokul_M)\
**Post date:** [August 1, 2024, 7:51am UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023/1 "2024-08-01T07:51:55Z")

</div>

Hello,

I am working on an XY Chart configured as a HeatMap in Ignition. I would like to change the color of the temperature scale numbers that appear below the HeatMap. Could someone provide guidance on how to adjust the color of these numbers or direct me to the relevant settings or scripts for this customization?

Thank you for your help!

 ![HeatMap](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/b/0b523793859efe43a140b08e53f66bc4668340e9.png)

---

<div class="post-metadata">

**Author:** ![Sakshi\_Gupta](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@Sakshi\_Gupta](https://forum.inductiveautomation.com/u/Sakshi_Gupta)\
**Post date:** [August 1, 2024, 10:26am UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023/2 "2024-08-01T10:26:44Z")

</div>

you can do it via scripting, i believe that the temperature values are fetched from db, so you can include in your scripts the color for values falling under particular range

---

<div class="post-metadata">

**Author:** ![Gokul\_M](https://avatars.discourse-cdn.com/v4/letter/g/e36b37/32.png) [@Gokul\_M](https://forum.inductiveautomation.com/u/Gokul_M)\
**Post date:** [August 1, 2024, 10:43am UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023/3 "2024-08-01T10:43:54Z")

</div>

Thank you for reply. The temperature values are being fetched from tags. i specifically need to change the color of the numbers below the heatRules color bar. i believe these ranges are being generated based on the Min and Max values of heatRules whenever we set true to series.0.column.appearance.heatRules.enabled property of xy chart. The default color seems to be black, any idea on how to change it?

 ![heatRulesBar](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/d/4d7fa4513236d793d003cad6d1d63338171d0e47.png)

---

<div class="post-metadata">

**Author:** ![Sakshi\_Gupta](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@Sakshi\_Gupta](https://forum.inductiveautomation.com/u/Sakshi_Gupta)\
**Post date:** [August 1, 2024, 10:54am UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023/4 "2024-08-01T10:54:35Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/7/b75a07e0a11e02ce48712ad2bc4237e67988c2e0.png)  
u can find in under y axis label apperance color

---

<div class="post-metadata">

**Author:** ![Gokul\_M](https://avatars.discourse-cdn.com/v4/letter/g/e36b37/32.png) [@Gokul\_M](https://forum.inductiveautomation.com/u/Gokul_M)\
**Post date:** [August 1, 2024, 11:43am UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023/5 "2024-08-01T11:43:00Z")

</div>

Does not seem to change it. Only changes the X and Y labels but not the numbers below the heatRules color bar.

 ![Screenshot 2024-08-01 170829](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/0/d08b21e893520c8ebb40e5fc7456309cca3eb8d8.png)  
 ![HeatRulesBar1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/4/5431be8fa1ce376a32a8794b82bf7653b8afb0ca.png)

---

<div class="post-metadata">

**Author:** ![Sakshi\_Gupta](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@Sakshi\_Gupta](https://forum.inductiveautomation.com/u/Sakshi_Gupta)\
**Post date:** [August 1, 2024, 12:14pm UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023/6 "2024-08-01T12:14:42Z")

</div>

check in series appearance color

---

<div class="post-metadata">

**Author:** ![Gokul\_M](https://avatars.discourse-cdn.com/v4/letter/g/e36b37/32.png) [@Gokul\_M](https://forum.inductiveautomation.com/u/Gokul_M)\
**Post date:** [August 1, 2024, 12:15pm UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023/7 "2024-08-01T12:15:48Z")

</div>

Has no effect

---

<div class="post-metadata">

**Author:** ![Sakshi\_Gupta](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@Sakshi\_Gupta](https://forum.inductiveautomation.com/u/Sakshi_Gupta)\
**Post date:** [August 1, 2024, 12:29pm UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023/8 "2024-08-01T12:29:04Z")

</div>

can u share the json of your chart

---

<div class="post-metadata">

**Author:** ![Gokul\_M](https://avatars.discourse-cdn.com/v4/letter/g/e36b37/32.png) [@Gokul\_M](https://forum.inductiveautomation.com/u/Gokul_M)\
**Post date:** [August 1, 2024, 12:55pm UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023/9 "2024-08-01T12:55:34Z")

</div>

```json
[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "legend": {
        "enabled": false
      },
      "xAxes": [
        {
          "name": "year",
          "label": {
            "enabled": true,
            "text": "year",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "category",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": true,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": 60,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "fruit",
          "label": {
            "enabled": true,
            "text": "fruit",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "category",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d/yyyy HH:mm:ss"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": null,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "count",
          "label": {
            "text": "Process Temp"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "data",
            "x": "year",
            "y": "fruit"
          },
          "xAxis": "year",
          "yAxis": "fruit",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "column",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": true,
                "max": "#26E3B1",
                "min": "#E5DBDB",
                "dataField": "count"
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": false,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "style": {
        "marginRight": "100px",
        "paddingRight": "100px"
      },
      "dataSources": {
        "data": [
          {
            "year": 2015,
            "fruit": "apple",
            "count": 20
          },
          {
            "year": 2015,
            "fruit": "orange",
            "count": 400
          },
          {
            "year": 2015,
            "fruit": "banana",
            "count": 150
          },
          {
            "year": 2016,
            "fruit": "apple",
            "count": 200
          },
          {
            "year": 2016,
            "fruit": "orange",
            "count": 300
          },
          {
            "year": 2016,
            "fruit": "banana",
            "count": 400
          },
          {
            "year": 2017,
            "fruit": "apple",
            "count": 200
          },
          {
            "year": 2017,
            "fruit": "orange",
            "count": 400
          },
          {
            "year": 2017,
            "fruit": "banana",
            "count": 30
          }
        ]
      }
    },
    "meta": {
      "name": "XYChart"
    },
    "position": {
      "basis": "536px"
    },
    "custom": {}
  }
]

```

This is from manual, it is same as mine

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [August 1, 2024, 1:29pm UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023/10 "2024-08-01T13:29:49Z")

</div>

I don't think you can achieve it by configuring any prop.  
Following CSS is a workaround but it will change the color of all the labels in chart.

```python
text tspan{
	fill:red;
}

```

![Heatmap labels](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/d/8d66281f973d825d1f528a7f318812db86ad4cc8.png)

Do assign a style class to restrict the changes.

---

<div class="post-metadata">

**Author:** ![Gokul\_M](https://avatars.discourse-cdn.com/v4/letter/g/e36b37/32.png) [@Gokul\_M](https://forum.inductiveautomation.com/u/Gokul_M)\
**Post date:** [August 2, 2024, 10:16am UTC](https://forum.inductiveautomation.com/t/customizing-color-of-temperature-scale-numbers-on-xy-chart-heatmap-in-ignition/94023/11 "2024-08-02T10:16:09Z")

</div>

Thank you for your help. It works.

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