COFFEESCRIPT
Posts: 1
Joined: Thu Sep 29, 2022 6:16 pm

How to save legend status in the store

Hello Guys,

I have a tried alot of things but it dosent work for me any help please.

my problem is on how to save legends status in the localStorage in order to save user selection after refreshing the page?

I'm using angular 14

you find the code bellow:

Code: Select all

    events: {
      load: function() {
        let series = this.serieList;
        if (!localStorage.legendItems) {
          let legend = []
          series.forEach(function(series) {
            legend.push(series.visible)
          })
          localStorage.legendItems = legend.toString()
        } else {
          let legend = localStorage.legendItems.split(',')
          let legendBooleans = []
          legend.forEach((elem) => {
            var isTrueSet = (elem === 'true')
            legendBooleans.push(isTrueSet)
          })
          legendBooleans.forEach((state, i)=> {
          	seriesList[i].update({
            	visible: state
            })
          })
        }
      }
    }
  },
  plotOptions: {
    series: {
      events: {
        legendItemClick: function() {
          
          let index = this.index
          let legend = localStorage.legendItems.split(',')
          let legendBooleans = []
          legend.forEach((elem)=> {
            let isTrueSet = (elem === 'true')
            legendBooleans.push(isTrueSet)
          })
          // toggle series visibility flag and override it in local storage
          legendBooleans[index] = !legendBooleans[index]
          localStorage.legendItems = legendBooleans.toString()
        }
      }
    }
  },
  series:serieList

});
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: How to save legend status in the store

Hello,

Welcome to our forum and thanks for contacting us with your question!

You can base it on a series.visible property to achieve this.

Demo: https://jsfiddle.net/BlackLabel/0hrLtsmj/

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”