[Bug]: TypeError: Cannot read properties of undefined (reading 'isExpanded') in SeriesChartTypePanel after switching from a combination chart to another chart type

Link to reproducible scenario

https://www.ag-grid.com/javascript-data-grid/integrated-charts-chart-tool-panels/

Describe the bug

Summary

Integrated Charts throw an unhandled error when the chart type changes from a combination chart to a non-combo chart, and the chart model is updated again later:

TypeError: Cannot read properties of undefined (reading 'isExpanded')
    at SeriesChartTypePanel.recreate
    at SeriesChartTypePanel.refresh
    at ChartDataPanel.updatePanels

Versions

• Reproduced on: ag-grid-enterprise 36.0.0 (latest, via the official docs example — see steps below) and 35.3.0 (our production version)
• Framework: React (ag-grid-react 35.3.0), but the bug is framework-agnostic — the repro below uses the plain JavaScript docs example

Steps to reproduce

Open the docs example at https://www.ag-grid.com/javascript-data-grid/integrated-charts-chart-tool-panels/ (it creates a chart on load), open the browser console and run:

const chartId = gridApi.getChartModels()[0].chartId;

// 1. Open the "Set Up" (data) tool panel
gridApi.openChartToolPanel({ chartId, panel: 'data' });

// 2. Switch to a combination chart -> SeriesChartTypePanel is created
gridApi.updateChart({ type: 'rangeChartUpdate', chartId, chartType: 'columnLineCombo' });

// 3. Switch to a non-combo chart -> the panel is destroyed, but a stale reference is kept
gridApi.updateChart({ type: 'rangeChartUpdate', chartId, chartType: 'scatter' });

// 4. Any further chart model update with changed series columns -> TypeError
const { cellRange } = gridApi.getChartModels()[0];
gridApi.updateChart({
  type: 'rangeChartUpdate',
  chartId,
  cellRange: {
    columns: cellRange.columns.slice(0, -1),
    rowStartIndex: cellRange.rowStartIndex,
    rowEndIndex: cellRange.rowEndIndex,
  },
});
// => TypeError: Cannot read properties of undefined (reading 'isExpanded')

The same happens through the UI alone: pick a combination chart in the "Chart" tab, switch to Scatter/Bubble, then in the "Set Up" tab remove a series column (or toggle "Paired Mode" / any other option that updates the chart model).

Root cause (from reading the source)

In ChartDataPanel (charts/chartComp/menu/data/chartDataPanel.ts):

• clearPanelComponents() destroys the panels and resets this.panels = [], but it does not clear the field references (this.seriesChartTypePanel, this.categoriesDataPanel, this.seriesDataPanel, this.chartSpecificPanel).
• this.seriesChartTypePanel is only re-assigned inside recreatePanels() when chartController.isComboChart() is true. After switching from a combo chart to a non-combo chart, the field keeps pointing at a destroyed SeriesChartTypePanel.
• On the next chartModelUpdate with an unchanged chart type, updatePanels() takes the canRefresh branch and calls this.seriesChartTypePanel?.refresh(valueCols) on the destroyed instance. The selected column ids differ from the stale selectedColIds, so refresh() calls recreate(), which reads this.seriesChartTypeGroupComp.isExpanded() — but destroy() already set seriesChartTypeGroupComp to undefined → TypeError.

Suggested fix

Clear the panel field references in clearPanelComponents():

clearPanelComponents() {
  for (const panel of this.panels) {
    panel.getGui().remove();
    this.destroyBean(panel);
  }
  this.panels = [];
  this.categoriesDataPanel = this.seriesDataPanel =
    this.seriesChartTypePanel = this.chartSpecificPanel = undefined;
}

Impact

The error is unhandled, so it crashes our React error boundary and takes down the whole page for the user. We see it in production from real user sessions (reported by Bugsnag) whenever users explore chart types and then adjust series columns.

Version

36.0.0 (also 35.3.0)

Does the issue occur for a specific framework only?

No response

Is the issue only observable on a specific browser?

All browsers