BarChart: fix stale bar values and x axis labels (#39188)

packages/grafana-ui/src/components/GraphNG/GraphNG.tsx

@@ -210,7 +210,7 @@ export class GraphNG extends React.Component<GraphNGProps, GraphNGState> {
 
   render() {
     const { width, height, children, timeRange, renderLegend } = this.props;
-    const { config, alignedFrame } = this.state;
+    const { config, alignedFrame, alignedData } = this.state;
 
     if (!config) {
       return null;
@@ -220,8 +220,8 @@ export class GraphNG extends React.Component<GraphNGProps, GraphNGState> {
       <VizLayout width={width} height={height} legend={renderLegend(config)}>
         {(vizWidth: number, vizHeight: number) => (
           <UPlotChart
-            config={this.state.config!}
-            data={this.state.alignedData}
+            config={config}
+            data={alignedData}
             width={vizWidth}
             height={vizHeight}
             timeRange={timeRange}

packages/grafana-ui/src/components/uPlot/Plot.tsx

@@ -101,6 +101,14 @@ export class UPlotChart extends React.Component<PlotProps, UPlotChartState> {
       this.reinitPlot();
     } else if (!sameData(prevProps, this.props)) {
       plot?.setData(this.props.data);
+
+      // this is a uPlot cache-busting hack for bar charts in case x axis labels changed
+      // since the x scale's "range" doesnt change, the axis size doesnt get recomputed, which is where the tick labels are regenerated & cached
+      // the more expensive, more proper/thorough way to do this is to force all axes to recalc: plot?.redraw(false, true);
+      if (plot && typeof this.props.data[0][0] === 'string') {
+        //@ts-ignore
+        plot.axes[0]._values = this.props.data[0];
+      }
     } else if (!sameTimeRange(prevProps, this.props)) {
       plot?.setScale('x', {
         min: this.props.timeRange.from.valueOf(),