# Perspective Power Chart Selected Pen

**URL:** <https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561>\
**Category:** Ignition\
**Tags:** perspective, scripting\
**Created:** [July 22, 2024, 7:34pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561 "2024-07-22T19:34:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shea\_Molthen](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shea\_Molthen](https://forum.inductiveautomation.com/u/Shea_Molthen)\
**Post date:** [July 22, 2024, 7:34pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561/1 "2024-07-22T19:34:50Z")

</div>

Is there any way to get the currently selected/highlighted pen? I've been trying for a while looking over some of @victordcq's Javascript injections and haven't made it very far. I figured if I could get the stroke width of the clicked pen, I could assign them unique widths when highlighted.

This is as far as I got:

```python
	code = """<img style='display:none' src='/favicon.ico' onload=\"
		const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; 
		console.log(view);
				
		document.querySelectorAll('#trend-power-chart g.ia_lineChart g g path').forEach(e => {
			const computedStyle = window.getComputedStyle(e);
			const strokeWidth = computedStyle.getPropertyValue('stroke-width');
			console.log(strokeWidth);

			view.custom.write('selectedIndex',strokeWidth);
		});	
				
	\"></img>""".replace("\n", "").replace("\t", "")
	return code

```

Is there a better / different way?

---

<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:** [July 23, 2024, 6:43am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561/2 "2024-07-23T06:43:13Z")

</div>

So actually you just want to make them bigger when hovered?

You can do that with some css too

```python
#trend-power-chart g.ia_lineChart:has(path:hover) path {
    stroke-width: 5px !important
}

```

Or what do you mean with selected pen? I see a property selectable, but i dont realy see what it does.

There are also pen styles about selected

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/b/8b0f7590bf40372c9ea598dc785698f14a905bdf.png)

---

<div class="post-metadata">

**Author:** ![Shea\_Molthen](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shea\_Molthen](https://forum.inductiveautomation.com/u/Shea_Molthen)\
**Post date:** [July 23, 2024, 10:36am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561/3 "2024-07-23T10:36:49Z")

</div>

I guess I should have been more clear - I'm just trying to figure out what the currently selected pen is so I can display some markers with it. For example, if I had 3 analog points on the chart, clicking on one could read the alarm bounds from the tag and show as markers. The only thing I don't know how to do is get the currently active pen.

My thought was I could do some sort of markdown to detect when `#<dom-id> g.ia_lineChart g g path` is clicked and have it write to a custom prop. With the click I was thinking I could watch for the stroke-width to change, or something else?

Thanks for looking!

---

<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:** [July 23, 2024, 11:06am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561/4 "2024-07-23T11:06:19Z")

</div>

i dont understand why you would need to check stroke width?

---

<div class="post-metadata">

**Author:** ![Shea\_Molthen](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shea\_Molthen](https://forum.inductiveautomation.com/u/Shea_Molthen)\
**Post date:** [July 23, 2024, 11:08am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561/5 "2024-07-23T11:08:33Z")

</div>

I probably _don't_, it's just what I notice changes when I click on a pen in CSS.

---

<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:** [July 23, 2024, 11:09am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561/6 "2024-07-23T11:09:12Z")

</div>

if you have the click event you already know which pen is clicked, since you are adding an event on every line

---

<div class="post-metadata">

**Author:** ![Shea\_Molthen](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shea\_Molthen](https://forum.inductiveautomation.com/u/Shea_Molthen)\
**Post date:** [July 23, 2024, 11:15am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561/7 "2024-07-23T11:15:05Z")

</div>

How would I know which pen was clicked? Count the path element that I'm on?

---

<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:** [July 23, 2024, 11:52am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561/8 "2024-07-23T11:52:09Z")

</div>

You can get the index by looking at the parent

This should work 🙂  
Add in your id's in the selector too ofc

```python
#make the propName the key to write too in the view.custom 
		propName = "penId"
		code = """<img style='display:none' src='/favicon.ico' onload=\"
			const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.closest('[data-component-path]').getAttributeNode('data-component-path').value.split('.')[0]).value; 
			function onclick(ev) {				
				const line = ev.target.closest('.ia_lineChart');
				console.log(line);
				ev.preventDefault(); 				
				const penId = Array.prototype.indexOf.call(line.parentNode.children, line);
				console.log(penId);
				view.custom.write('"""+propName+"""',penId);
			};	
			const callbackChart = (mutationList, observer) => {
				document.querySelectorAll('g.ia_lineChart').forEach(e => {											
						e.onclick = onclick;
					});	
			};							
			const observerChart = new MutationObserver(callbackChart); 
			const charts = document.querySelectorAll('.main-chart-container');
			charts.forEach(chart => observerChart.observe(chart, { attributes: false, childList: true, subtree: true }));	
			document.querySelectorAll('g.ia_lineChart').forEach(e => {										
						e.onclick = onclick;
					});			
		\"></img>""".replace("\n", "").replace("\t", "")
		return code

```

---

<div class="post-metadata">

**Author:** ![Shea\_Molthen](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shea\_Molthen](https://forum.inductiveautomation.com/u/Shea_Molthen)\
**Post date:** [July 23, 2024, 12:58pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561/9 "2024-07-23T12:58:04Z")

</div>

Excellent - exactly what I was looking for. Wish I could say I was closer than I was to getting that working 😛

---

<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:** [July 23, 2024, 1:18pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-selected-pen/93561/10 "2024-07-23T13:18:20Z")

</div>

The charts and tables are a bit more tricky since you need an mutation observer for it to work properly.

And yes JS in perspective is not very easy^^ But good job for trying before asking 🙂