diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 238b7d8b96f..a4e427e8faf 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -130,6 +130,7 @@ export interface BarChartProps extends IChartBaseProps {
 const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     noLegend,
     noAnimation,
@@ -226,6 +227,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
     <ChartContainer
       dataset={dataset}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? BarChartPlaceholder}
       ref={componentRef}
       style={style}
diff --git a/packages/charts/src/components/BulletChart/BulletChart.tsx b/packages/charts/src/components/BulletChart/BulletChart.tsx
index c0c9578cfa3..12b4ad4bdb7 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.tsx
@@ -128,6 +128,7 @@ type AvailableChartTypes = 'primary' | 'comparison' | 'additional' | string;
 const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     onDataPointClick,
     noLegend,
@@ -271,6 +272,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
     <ChartContainer
       ref={componentRef}
       loading={loading}
+      loadingDelay={loadingDelay}
       dataset={dataset}
       Placeholder={ChartPlaceholder ?? Placeholder}
       style={style}
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index 8ef29a51543..7f772cea0c0 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -128,6 +128,7 @@ const valueAccessor =
 const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     noLegend,
     noAnimation,
@@ -225,6 +226,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
     <ChartContainer
       dataset={dataset}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? ColumnChartPlaceholder}
       ref={componentRef}
       style={style}
diff --git a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx
index 080d86f209d..c900c06f9dc 100644
--- a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx
+++ b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx
@@ -106,6 +106,7 @@ type AvailableChartTypes = 'line' | 'bar' | string;
 const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     style,
     className,
@@ -177,6 +178,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
           tooltipConfig={lineTooltipConfig}
           noAnimation={noAnimation}
           loading={loading}
+          loadingDelay={loadingDelay}
           onClick={onClick}
           syncId={syncId}
           style={{ ...style, height: `calc(${style?.height} * 0.2)` }}
@@ -201,6 +203,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
         noAnimation={noAnimation}
         noLegend={noLegend}
         loading={loading}
+        loadingDelay={loadingDelay}
         onClick={onClick}
         onDataPointClick={onDataPointClick}
         syncId={syncId}
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index aa887e39dca..3f015d46e7f 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -142,6 +142,7 @@ type AvailableChartTypes = 'line' | 'bar' | 'area' | string;
 const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     onDataPointClick,
     noLegend,
@@ -276,6 +277,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
     <ChartContainer
       ref={componentRef}
       loading={loading}
+      loadingDelay={loadingDelay}
       dataset={dataset}
       Placeholder={ChartPlaceholder ?? Placeholder}
       style={style}
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index a7c67b1a3e5..20483364799 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -115,6 +115,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
   const {
     dataset,
     loading,
+    loadingDelay,
     noLegend,
     noAnimation,
     tooltipConfig,
@@ -214,6 +215,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
     <ChartContainer
       dataset={dataset}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? LineChartPlaceholder}
       ref={componentRef}
       style={style}
diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx
index f72e9a4beaa..270347af4f3 100644
--- a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx
+++ b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx
@@ -90,7 +90,7 @@ const resolveColor = (index: number, color = null) => {
  * The `MicroBarChart` compares different values of the same category to each other by displaying them in a compact way.
  */
 const MicroBarChart = forwardRef<HTMLDivElement, MicroBarChartProps>((props, ref) => {
-  const { loading, dataset, onDataPointClick, style, className, slot, ChartPlaceholder, ...rest } = props;
+  const { loading, loadingDelay, dataset, onDataPointClick, style, className, slot, ChartPlaceholder, ...rest } = props;
 
   useStylesheet(styleData, MicroBarChart.displayName);
 
@@ -140,6 +140,7 @@ const MicroBarChart = forwardRef<HTMLDivElement, MicroBarChartProps>((props, ref
     <ChartContainer
       dataset={dataset}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? BarChartPlaceholder}
       ref={ref}
       style={style}
diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx
index 2a872df2f50..e34281bc1ac 100644
--- a/packages/charts/src/components/PieChart/PieChart.tsx
+++ b/packages/charts/src/components/PieChart/PieChart.tsx
@@ -91,6 +91,7 @@ const tooltipItemDefaultStyle = { color: 'var (--sapTextColor)' };
 const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     noLegend,
     noAnimation,
@@ -267,6 +268,7 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
       dataset={dataset}
       ref={ref}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? PieChartPlaceholder}
       style={style}
       className={className}
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index 93ec41be4b9..73863551ce0 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -80,6 +80,7 @@ const measureDefaults = {
 const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
   const {
     loading,
+    loadingDelay,
     dataset,
     noLegend,
     noAnimation,
@@ -166,6 +167,7 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
       dataset={dataset}
       ref={ref}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? PieChartPlaceholder}
       style={style}
       className={className}
diff --git a/packages/charts/src/components/RadialChart/RadialChart.tsx b/packages/charts/src/components/RadialChart/RadialChart.tsx
index 3c8be7b1966..5f5156d1c01 100644
--- a/packages/charts/src/components/RadialChart/RadialChart.tsx
+++ b/packages/charts/src/components/RadialChart/RadialChart.tsx
@@ -17,7 +17,7 @@ interface RadialChartConfig {
 
   [rest: string]: any;
 }
-
+//todo expose `loading`
 export interface RadialChartProps extends Omit<CommonProps, 'onClick' | 'children' | 'onLegendClick'> {
   /**
    * The actual value which defines how much the ring is filled.
@@ -126,6 +126,8 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>
 
   return (
     <ChartContainer
+      loading={undefined}
+      loadingDelay={undefined}
       dataset={dataset}
       ref={ref}
       Placeholder={PieChartPlaceholder}
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.tsx
index e8bd74bdaa6..66dd0b10e9f 100644
--- a/packages/charts/src/components/ScatterChart/ScatterChart.tsx
+++ b/packages/charts/src/components/ScatterChart/ScatterChart.tsx
@@ -133,6 +133,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
   const {
     dataset,
     loading,
+    loadingDelay,
     noLegend,
     noAnimation,
     tooltipConfig,
@@ -216,6 +217,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
     <ChartContainer
       dataset={dataset}
       loading={loading}
+      loadingDelay={loadingDelay}
       Placeholder={ChartPlaceholder ?? ScatterChartPlaceholder}
       ref={componentRef}
       style={style}
diff --git a/packages/charts/src/interfaces/IChartBaseProps.ts b/packages/charts/src/interfaces/IChartBaseProps.ts
index 5997d38aabf..c2e3a3c62f5 100644
--- a/packages/charts/src/interfaces/IChartBaseProps.ts
+++ b/packages/charts/src/interfaces/IChartBaseProps.ts
@@ -7,10 +7,15 @@ export interface IChartBaseProps<T = ICartesianChartConfig> extends Omit<CommonP
   /**
    * Flag whether the chart should display a loading indicator.
    *
-   * This can either be a placeholder shimmer (in case the chart has no data yet) or a small
-   * loading bar in the top of the chart (in case the chart has already some data to display).
+   * This can either be a skeleton placeholder shimmer (in case the chart has no data yet) or a `BusyIndicator` on top of the chart (in case the chart has already some data to display).
    */
   loading?: boolean;
+  /**
+   * Defines the delay in milliseconds, after which the `BusyIndicator` will be visible on the screen.
+   *
+   * @default 1000
+   */
+  loadingDelay?: number;
   /**
    * The `dataset` is an array of object which will be displayed in the chart.
    */
diff --git a/packages/charts/src/internal/ChartContainer.tsx b/packages/charts/src/internal/ChartContainer.tsx
index aa993af1a28..f030a61d480 100644
--- a/packages/charts/src/internal/ChartContainer.tsx
+++ b/packages/charts/src/internal/ChartContainer.tsx
@@ -23,9 +23,10 @@ addCustomCSSWithScoping(
 
 export interface ContainerProps extends CommonProps {
   children: ReactElement;
-  Placeholder?: ComponentType;
+  Placeholder: ComponentType;
   dataset: unknown[];
-  loading?: boolean;
+  loading: boolean;
+  loadingDelay: number;
   resizeDebounce: number;
 }
 
@@ -49,7 +50,17 @@ class ErrorBoundary extends Component<{ children: ReactNode }, { errorCount: num
 }
 
 const ChartContainer = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
-  const { Placeholder, loading = false, dataset, className, slot, children, resizeDebounce, ...rest } = props;
+  const {
+    Placeholder,
+    loading = false,
+    dataset,
+    className,
+    slot,
+    children,
+    resizeDebounce,
+    loadingDelay,
+    ...rest
+  } = props;
 
   useStylesheet(styleData, ChartContainer.displayName);
 
@@ -60,6 +71,7 @@ const ChartContainer = forwardRef<HTMLDivElement, ContainerProps>((props, ref) =
           {loading && (
             <BusyIndicator
               active
+              delay={loadingDelay}
               className={classNames.busyIndicator}
               data-component-name="ChartContainerBusyIndicator"
             />