diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts index c018dc4389..ae721aad83 100644 --- a/src/components/chart/state-history-chart-line.ts +++ b/src/components/chart/state-history-chart-line.ts @@ -72,6 +72,8 @@ export class StateHistoryChartLine extends LitElement { @state() private _chartOptions?: ECOption; + private _hiddenStats = new Set(); + @state() private _yWidth = 25; private _chartTime: Date = new Date(); @@ -84,6 +86,9 @@ export class StateHistoryChartLine extends LitElement { .options=${this._chartOptions} .height=${this.height} style=${styleMap({ height: this.height })} + external-hidden + @dataset-hidden=${this._datasetHidden} + @dataset-unhidden=${this._datasetUnhidden} > `; } @@ -98,7 +103,11 @@ export class StateHistoryChartLine extends LitElement { ) + "
"; const datapoints: Record[] = []; this._chartData.forEach((dataset, index) => { - if (dataset.tooltip?.show === false) return; + if ( + dataset.tooltip?.show === false || + this._hiddenStats.has(dataset.name as string) + ) + return; const param = params.find( (p: Record) => p.seriesIndex === index ); @@ -162,6 +171,14 @@ export class StateHistoryChartLine extends LitElement { ); } + private _datasetHidden(ev: CustomEvent) { + this._hiddenStats.add(ev.detail.name); + } + + private _datasetUnhidden(ev: CustomEvent) { + this._hiddenStats.delete(ev.detail.name); + } + public willUpdate(changedProps: PropertyValues) { if ( changedProps.has("data") || @@ -264,6 +281,8 @@ export class StateHistoryChartLine extends LitElement { } as YAXisOption, legend: { show: this.showNames, + type: "scroll", + animationDurationUpdate: 400, icon: "circle", padding: [20, 0], }, @@ -632,7 +651,7 @@ export class StateHistoryChartLine extends LitElement { pushData(new Date(entityState.last_changed), series); }); } else { - addDataSet(this.showNames ? name : ""); + addDataSet(name); let lastValue: number; let lastDate: Date; diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts index 9c7ea82e0d..f5971528fd 100644 --- a/src/components/chart/statistics-chart.ts +++ b/src/components/chart/statistics-chart.ts @@ -279,6 +279,8 @@ export class StatisticsChart extends LitElement { }, legend: { show: !this.hideLegend, + type: "scroll", + animationDurationUpdate: 400, icon: "circle", padding: [20, 0], data: this._legendData,