diff --git a/superset-frontend/plugins/preset-chart-deckgl/src/Multi/index.ts b/superset-frontend/plugins/preset-chart-deckgl/src/Multi/index.ts
deleted file mode 100644
index 84069b4d978..00000000000
--- a/superset-frontend/plugins/preset-chart-deckgl/src/Multi/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { t } from '@apache-superset/core/translation';
-import { ChartMetadata, ChartPlugin } from '@superset-ui/core';
-import thumbnail from './images/thumbnail.png';
-import thumbnailDark from './images/thumbnail-dark.png';
-import example from './images/example.png';
-import exampleDark from './images/example-dark.png';
-import transformProps from '../transformProps';
-import controlPanel from './controlPanel';
-
-const metadata = new ChartMetadata({
-  category: t('Map'),
-  credits: ['https://uber.github.io/deck.gl'],
-  description: t('Compose multiple layers together to form complex visuals.'),
-  exampleGallery: [{ url: example, urlDark: exampleDark }],
-  name: t('deck.gl Multiple Layers'),
-  thumbnail,
-  thumbnailDark,
-  useLegacyApi: true,
-  tags: [t('deckGL'), t('Multi-Layers')],
-});
-
-export default class MultiChartPlugin extends ChartPlugin {
-  constructor() {
-    super({
-      loadChart: () => import('./Multi'),
-      controlPanel,
-      metadata,
-      transformProps,
-    });
-  }
-}
diff --git a/superset-frontend/plugins/preset-chart-deckgl/src/Multi/controlPanel.ts b/superset-frontend/plugins/preset-chart-deckgl/src/Multi/index.tsx
similarity index 72%
rename from superset-frontend/plugins/preset-chart-deckgl/src/Multi/controlPanel.ts
rename to superset-frontend/plugins/preset-chart-deckgl/src/Multi/index.tsx
index 8379345ad16..ea731d34e0b 100644
--- a/superset-frontend/plugins/preset-chart-deckgl/src/Multi/controlPanel.ts
+++ b/superset-frontend/plugins/preset-chart-deckgl/src/Multi/index.tsx
@@ -18,6 +18,9 @@
  */
 import { t } from '@apache-superset/core/translation';
 import { validateNonEmpty } from '@superset-ui/core';
+import { defineChart } from '@superset-ui/glyph-core';
+import MultiComponent from './Multi';
+import transformProps from '../transformProps';
 import {
   viewport,
   mapboxStyle,
@@ -25,9 +28,27 @@ import {
   mapProvider,
   autozoom,
 } from '../utilities/Shared_DeckGL';
+import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
+import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 
-export default {
-  controlPanelSections: [
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default defineChart<Record<string, never>, any>({
+  metadata: {
+    name: t('deck.gl Multiple Layers'),
+    description: t('Compose multiple layers together to form complex visuals.'),
+    category: t('Map'),
+    credits: ['https://uber.github.io/deck.gl'],
+    tags: [t('deckGL'), t('Multi-Layers')],
+    thumbnail,
+    thumbnailDark,
+    exampleGallery: [{ url: example, urlDark: exampleDark }],
+    useLegacyApi: true,
+  },
+  arguments: {},
+  suppressQuerySection: true,
+  prependSections: [
     {
       label: t('Map'),
       expanded: true,
@@ -87,4 +108,9 @@ export default {
       controlSetRows: [['adhoc_filters']],
     },
   ],
-};
+  transform: chartProps => transformProps(chartProps),
+  render: ({ transformedProps }) => (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <MultiComponent {...(transformedProps as any)} />
+  ),
+});