# Ui-chart sorting by "group", disappears when data is replaced

**URL:** <https://discourse.nodered.org/t/ui-chart-sorting-by-group-disappears-when-data-is-replaced/93647>\
**Category:** Dashboard\
**Tags:** chart, dashboard-2\
**Created:** [2 December 2024 21:23 UTC](https://discourse.nodered.org/t/ui-chart-sorting-by-group-disappears-when-data-is-replaced/93647 "2024-12-02T21:23:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![stgj](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@stgj](https://discourse.nodered.org/u/stgj)\
**Post date:** [2 December 2024 21:23 UTC](https://discourse.nodered.org/t/ui-chart-sorting-by-group-disappears-when-data-is-replaced/93647/1 "2024-12-02T21:23:31Z")

</div>

This is not a bug, but I need help with something.

I have a set of data in an influxdb. I feed the ui-chart with this data.  
The timeframe is chosen in the influx query.

eg.

```auto
[
   {
      "series": "Air",
      "time": "21:12:02"
      "value": "15.2"
   },
   {
      "series": "Cabinet",
      "time": "21:12:30",
      "value": "14.1"
   }
   ...
]

```

The ui-chart then in the ui groups this in "Air" and "Cabinet".  
If i press "Cabinet" the ui sorts the "Cabinet" away. Thats nice.

The ui-chart is set to "replace" the data that comes in.  
And the new data comes in at an interval of 5seconds.

This means that when the new data comes in, the sorting I have done gets reset.

Anyone with a good idea on how to maintain the sorting?

Best regards  
Steffen

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [4 December 2024 10:51 UTC](https://discourse.nodered.org/t/ui-chart-sorting-by-group-disappears-when-data-is-replaced/93647/2 "2024-12-04T10:51:50Z")

</div>

When you say "sort", do you mean "hide/show"? I noticed this recently too, you click on the line in the Legend, and that hides the line, but new data arriving re-draws the chart and clears any filtering you'd applied

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [4 December 2024 11:21 UTC](https://discourse.nodered.org/t/ui-chart-sorting-by-group-disappears-when-data-is-replaced/93647/3 "2024-12-04T11:21:11Z")

</div>

Can be fixed by doing follwing:

Add custom click handler for legend plugin

```auto
  plugins: {
                            legend: {
                                display: true,
                                position: 'top',
                                labels:{
                                    boxHeight:1,
                                    boxWidth:10,
                                },
                                onClick: function (evt, item) {                                   
                                    if(this.chart.isDatasetVisible(item.datasetIndex)){
                                        //store dataset visibility 
                                        root.visibility[item.datasetIndex] = false
                                    }
                                    else{
                                        root.visibility[item.datasetIndex] = true
                                    } 
                                   // call default click handler                                   
                                    Chart.defaults.plugins.legend.onClick.call(this, evt, item, this);
                                }, ....

```

And when upating (probalby needed for replace only)  
set the visibility of dataset

```auto
this.chart.data.datasets = this.datasets
                    this.chart.data.datasets.forEach((dataSet, i) => {
                        let meta = this.chart.getDatasetMeta(i);
                        meta.hidden = this.visibility[i] == false
                    });                   
                    
                    this.chart.update()

```

Needs of course decision how and where to save and should it survive sessions and such things..

---

<div class="post-metadata">

**Author:** ![stgj](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@stgj](https://discourse.nodered.org/u/stgj)\
**Post date:** [4 December 2024 18:44 UTC](https://discourse.nodered.org/t/ui-chart-sorting-by-group-disappears-when-data-is-replaced/93647/4 "2024-12-04T18:44:26Z")

</div>

Yes, I mean "hide/show".

Will look in to your answer in a few days hotNipi.

Best regards  
Steffen

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [4 December 2024 18:48 UTC](https://discourse.nodered.org/t/ui-chart-sorting-by-group-disappears-when-data-is-replaced/93647/5 "2024-12-04T18:48:42Z")

</div>

My answer was targeted rather how the core chart widget can be improved. But same strategy fits if you do chart using the ui\_template.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [3 January 2025 18:49 UTC](https://discourse.nodered.org/t/ui-chart-sorting-by-group-disappears-when-data-is-replaced/93647/6 "2025-01-03T18:49:16Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.