# JS Injection Hack Usefuls (JavaScript)

**URL:** <https://forum.inductiveautomation.com/t/js-injection-hack-usefuls-javascript/114714>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 27, 2026, 6:43am UTC](https://forum.inductiveautomation.com/t/js-injection-hack-usefuls-javascript/114714 "2026-03-27T06:43:40Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 27, 2026, 6:54am UTC](https://forum.inductiveautomation.com/t/js-injection-hack-usefuls-javascript/114714/3 "2026-03-27T06:54:56Z")

</div>

## Power Chart - Set X-Trace tag labels to their pen colour

This will set the tag labels and values shown in all x-trace panels to the colour of their chart pens. The script (dodgilly?) grabs the colours from the legend key at the bottom.

_I haven’t tested if this works when the legend is collapsed into the smaller version_

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

### Instructions

Copy and paste into a View with a Power Chart and your operators will no longer become frustrated trying to eyeball x-trace tags with their corresponding pens on the chart.

### Resources

> **Markdown Version**
>
> ```json
> [
> {
> "type": "ia.display.markdown",
> "version": 0,
> "props": {
> "style": {
> "position": "absolute"
> },
> "markdown": {
> "escapeHtml": false
> }
> },
> "meta": {
> "name": "JSInject_PowerChart_XTraceTagColours"
> },
> "position": {
> "shrink": 0,
> "basis": 0
> },
> "custom": {
> "inlineJavascript": "(function() {\n function getPenColours() {\n const map = {};\n document.querySelectorAll('svg.pen-visibility-checkbox[data-pen-name]').forEach(svg => {\n const name = svg.getAttribute('data-pen-name');\n const fill = svg.style.fill;\n if (name && fill) map[name] = fill;\n });\n return map;\n }\n\n function colourXTraceLabels() {\n const penColours = getPenColours();\n document.querySelectorAll('.ia_powerChartComponent __xTrace__ box__label').forEach(textEl => {\n const boldSpan = textEl.querySelector('tspan[style*=&quot;font-weight&quot;]');\n if (!boldSpan) return;\n const penName = boldSpan.textContent.replace(/:\\s*$/, '').trim();\n if (penColours[penName]) {\n textEl.style.fill = penColours[penName];\n }\n });\n }\n\n if (window._xTraceObserver) window._xTraceObserver.disconnect();\n\n window._xTraceObserver = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n const hasXTrace = [...mutation.addedNodes].some(node =>\n node.nodeType === 1 && (\n node.classList?.contains('ia_timeMarker') ||\n node.querySelector?.('.ia_timeMarker')\n )\n );\n const isInsideXTrace = mutation.target.closest?.(\n '.ia_timeMarker, .ia_powerChartComponent__xTrace__box'\n );\n if (hasXTrace || isInsideXTrace) {\n colourXTraceLabels();\n break;\n }\n }\n });\n\n window._xTraceObserver.observe(document.body, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n\n colourXTraceLabels();\n })();"
> },
> "propConfig": {
> "props.source": {
> "binding": {
> "config": {
> "struct": {
> "script": "{this.custom.inlineJavascript}"
> },
> "waitOnAll": true
> },
> "transforms": [
> {
> "code": "#\tcode = \"<img style='display:none' src='/favicon.ico' onload=\\\"\" + value.script.replace('\"', '&quot;') + '\\\"></img>'\n#\t\n#\tcode = code.replace(\"\\n\", \"\").replace(\"\\t\", \"\").replace(\"\\n\", \"\").replace(\"\\r\", \"\").replace(\"\\r\", \"\").replace(\" \", \" \").replace(\" \", \" \").replace(\" \", \" \").replace(\" \", \" \")\n#\t\n#\treturn code\n\tscript = value.script\n\tscript = script.replace('\"', '&quot;')\n\tscript = script.replace('\\n', '').replace('\\t', '').replace('\\r', '')\n\t\n\t# Collapse multiple spaces - repeat until stable\n\twhile ' ' in script:\n\t script = script.replace(' ', ' ')\n\t\n\tcode = '<img style=\"display:none\" src=\"/favicon.ico\" onload=\"{}\"></img>'.format(script)\n\treturn code",
> "type": "script"
> }
> ],
> "type": "expr-struct"
> }
> }
> }
> }
> ]
> 
> ```

> **Periscope Version (N/A yet)**
>
> 🫪

---

_[View the full topic](https://forum.inductiveautomation.com/t/js-injection-hack-usefuls-javascript/114714)._