diff --git a/packages/elements/src/interactive-chart/__test__/interactive-chart.test.js b/packages/elements/src/interactive-chart/__test__/interactive-chart.test.js index dc29d7ca6f..9add85588c 100644 --- a/packages/elements/src/interactive-chart/__test__/interactive-chart.test.js +++ b/packages/elements/src/interactive-chart/__test__/interactive-chart.test.js @@ -876,6 +876,40 @@ describe('interactive-chart/InteractiveChart', function () { expect(legendLeftPosition).to.equal(InteractiveChart.DEFAULT_LEGEND_LEFT_POSITION); }); + it('Should render new Legend when add new seriesList.', async function () { + const data = [ + { + time: 1678147200, + open: 5679, + high: 5694, + low: 5544, + close: 5547, + value: 5547 + } + ]; + el.config = { + series: [ + { + symbol: 'Price', + type: 'candlestick' + } + ] + }; + await elementUpdated(el); + await nextFrame(3); // wait for resize observer & rendering completion + expect(el.hasDataPoint).to.be.false; + + el.config.series[0].data = data; + el.seriesList[0].setData(data); + await elementUpdated(el); + await nextFrame(3); // wait for resize observer & rendering completion + const legendText = el.rowLegend[0].textContent; + const { open, high, low, close } = data[0]; + const isIncludedPrices = [open, high, low, close].every((price) => legendText.includes(price)); + expect(el.hasDataPoint).to.be.true; + expect(isIncludedPrices).to.be.true; + }); + describe('Test deprecated attribute', function () { it('Switch attribute legendstyle horizontal to vertical, it should display vertical style', async function () { el = await fixture(''); diff --git a/packages/elements/src/interactive-chart/index.ts b/packages/elements/src/interactive-chart/index.ts index 65bb5fc0ba..582138557f 100644 --- a/packages/elements/src/interactive-chart/index.ts +++ b/packages/elements/src/interactive-chart/index.ts @@ -1157,6 +1157,7 @@ export class InteractiveChart extends ResponsiveElement { const dataSet = series.data || []; const latestData = dataSet[dataSet.length - 1]; if (latestData) { + this.hasDataPoint = dataSet.length > 0; const value = chartType === 'bar' || chartType === 'candlestick' ? latestData : (latestData as LineData).value; // latestData const priceColor = this.getColorInSeries(latestData, chartType, idx);