# How can I use the script to manipulate the legends in the apexcharts in ignition perspective

**URL:** <https://forum.inductiveautomation.com/t/how-can-i-use-the-script-to-manipulate-the-legends-in-the-apexcharts-in-ignition-perspective/95353>\
**Category:** Ignition\
**Tags:** scripting, ignition81, perspective\
**Created:** [August 30, 2024, 4:20am UTC](https://forum.inductiveautomation.com/t/how-can-i-use-the-script-to-manipulate-the-legends-in-the-apexcharts-in-ignition-perspective/95353 "2024-08-30T04:20:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rohan\_raj](https://avatars.discourse-cdn.com/v4/letter/r/eada6e/32.png) [@Rohan\_raj](https://forum.inductiveautomation.com/u/Rohan_raj)\
**Post date:** [August 30, 2024, 4:20am UTC](https://forum.inductiveautomation.com/t/how-can-i-use-the-script-to-manipulate-the-legends-in-the-apexcharts-in-ignition-perspective/95353/1 "2024-08-30T04:20:04Z")

</div>

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

Scripts to remove the legends that are not present in the graphs right now:

```python
var elements = document.querySelectorAll('.apexcharts-legend-series');
elements.forEach(function(element) {
    var seriesName = element.getAttribute('seriesname');
    if (!seriesName) {
        element.remove();
    }
});

```

After applying script from console:

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

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [August 30, 2024, 4:50am UTC](https://forum.inductiveautomation.com/t/how-can-i-use-the-script-to-manipulate-the-legends-in-the-apexcharts-in-ignition-perspective/95353/2 "2024-08-30T04:50:43Z")

</div>

I don’t know of a way to filter legend entries with ApexCharts.

However, my Chart.js component does have this ability through its `options.plugins.legend.labels.filter` scriptable property.

> [@Musson Industrial’s Embr-Charts Module](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618):
>
> Embr-Charts Musson Industrial is excited to announce the release of embr-charts, an Ignition module that adds a collection of enhanced Perspective charting components. Chart.js Component This initial release contains a [Chart.js](https://www.chartjs.org/) component. [https://github.com/mussonindustrial/embr/raw/main/modules/embr-charts/docs/examples/chart-js.png](https://github.com/mussonindustrial/embr/raw/main/modules/embr-charts/docs/examples/chart-js.png) Chart.js renders chart elements on an HTML5 canvas unlike other D3.js-based charting libraries that render as SVG. Canvas rendering makes Chart.js very performa…

> **[Legend | Chart.js](https://www.chartjs.org/docs/latest/configuration/legend.html)**
>
> Open source HTML5 Charts for your website

---

<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:** [August 30, 2024, 6:47am UTC](https://forum.inductiveautomation.com/t/how-can-i-use-the-script-to-manipulate-the-legends-in-the-apexcharts-in-ignition-perspective/95353/3 "2024-08-30T06:47:28Z")

</div>

juding from your js, this can probably be done with css.

which chart is this, could you share the view (with **bindings disabled** )

---

<div class="post-metadata">

**Author:** ![Rohan\_raj](https://avatars.discourse-cdn.com/v4/letter/r/eada6e/32.png) [@Rohan\_raj](https://forum.inductiveautomation.com/u/Rohan_raj)\
**Post date:** [August 30, 2024, 9:19am UTC](https://forum.inductiveautomation.com/t/how-can-i-use-the-script-to-manipulate-the-legends-in-the-apexcharts-in-ignition-perspective/95353/4 "2024-08-30T09:19:05Z")

</div>

I'm using rangeBar in ApexChart

---

<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:** [August 30, 2024, 9:23am UTC](https://forum.inductiveautomation.com/t/how-can-i-use-the-script-to-manipulate-the-legends-in-the-apexcharts-in-ignition-perspective/95353/5 "2024-08-30T09:23:28Z")

</div>

This is from a seprate module than?

You'll have to send me a copy of the html of the chart

but my first guess is something like this, judging from the js

```python
.apexcharts-legend-series[seriesname=""]{
    display:none;
}

```

you can add this in the advanded stylesheet

---

<div class="post-metadata">

**Author:** ![Rohan\_raj](https://avatars.discourse-cdn.com/v4/letter/r/eada6e/32.png) [@Rohan\_raj](https://forum.inductiveautomation.com/u/Rohan_raj)\
**Post date:** [September 2, 2024, 4:42am UTC](https://forum.inductiveautomation.com/t/how-can-i-use-the-script-to-manipulate-the-legends-in-the-apexcharts-in-ignition-perspective/95353/6 "2024-09-02T04:42:16Z")

</div>

Thanks, it's working!