Reputation: 23
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: 68