CODEWITHSUNDEEP
angulartypescriptapexchartssession-storageng-apexcharts
Furrier
Furrier

Reputation: 23

Is there any way to save the state of an ApexChart chart into session storage and retrive it after page reload?

I'm using Angular 17 with ApexCharts. I would like to save the state of a chart (hidden series, zoom, active/inactive legends etc.) into the session storage, and retrieve it after page reload to show the exact state of the chart before reload. I wrote an ng component to handle charts:

I have a field that contains all chart options:

@Input() chartOptions!: ChartOptions;

I save it into the session storage like this:

this.storageService.setItem(this.title, JSON.stringify(this.chartOptions));

And retrieve it like this:

const savedState = this.storageService.getItem(this.title);
    if (savedState) {
      const state = JSON.parse(savedState);
      this.chartOptions = { ...this.chartOptions, ...state };
      this.chart.render();
    }

When some events trigger in chartOptions.chart.events eg. zoomed that call the setItem implementation. When mounted triggers that calls the retrieving logic:

this.chartOptions.chart.events = {
        zoomed: (chartContext, { xaxis, yaxis }) => {
          this.saveChartState();
        },
        legendClick: (chartContext, seriesIndex, config) => {
          this.saveChartState();
        },
        mounted: (chartContext, config) => {
          this.restoreChartState();
        }
      };

Unfortunately, after refresh the chart looks the same as it was before changing anything on it. What can I do?

Upvotes: 0

Views: 69

Answers (0)

Related Questions