fixes no-data vertical placement

Author: pan-kot

src/core/chart-api/chart-extra-nodata.tsx

@@ -11,7 +11,7 @@ import { ChartExtraContext } from "./chart-extra-context";
 // It can be used by other components to assert if the chart is in no-data state (by checking if container is present).
 export interface ReactiveNodataState {
   visible: boolean;
-  style?: React.CSSProperties;
+  style: React.CSSProperties;
   noMatch: boolean;
 }
 
@@ -32,12 +32,17 @@ export class ChartExtraNodata extends AsyncStore<ReactiveNodataState> {
     const visibleSeries = findAllVisibleSeries(this.chart);
     // The no-data is not shown when there is at least one series or point (for pie series) non-empty and visible.
     if (visibleSeries.length > 0) {
-      this.set(() => ({ visible: false, noMatch: false }));
+      this.set(() => ({ visible: false, style: {}, noMatch: false }));
     } else {
-      this.set(() => ({ visible: true, noMatch: allSeriesWithData.length > 0 }));
+      this.set(() => ({ visible: true, style: this.getContainerStyle(), noMatch: allSeriesWithData.length > 0 }));
     }
   };
 
+  private getContainerStyle(): React.CSSProperties {
+    const blockOffset = this.chart.chartHeight - this.chart.plotHeight;
+    return { insetBlockEnd: `${blockOffset}px` };
+  }
+
   private get chart() {
     return this.context.chart();
   }
@@ -57,4 +62,4 @@ function findAllVisibleSeries(chart: Highcharts.Chart) {
   return allSeriesWithData.filter(
     (s) => s.visible && (s.type !== "pie" || s.data.some((d) => d.y !== null && d.visible)),
   );
-}
+}

src/core/chart-container.tsx

@@ -96,10 +96,11 @@ export function ChartContainer({
       ) : (
         <div
           style={chartMinWidth !== undefined ? { minInlineSize: chartMinWidth } : {}}
-          className={testClasses["chart-plot-wrapper"]}
+          className={clsx(styles["chart-plot-wrapper"], testClasses["chart-plot-wrapper"])}
         >
           {verticalAxisTitle}
           {chart(effectiveChartHeight)}
+          {!legend || legendPosition === "bottom" ? noData : null}
         </div>
       )}
 
@@ -110,8 +111,6 @@ export function ChartContainer({
           (legendBottomMaxHeight ? <div style={{ maxHeight: `${legendBottomMaxHeight}px` }}>{legend}</div> : legend)}
         {footer}
       </div>
-
-      {!legend || legendPosition === "bottom" ? noData : null}
     </div>
   );
 }