diff --git a/frontend/src/lib/components/RunChart.svelte b/frontend/src/lib/components/RunChart.svelte
index 1890269f62..de20db1d1e 100644
--- a/frontend/src/lib/components/RunChart.svelte
+++ b/frontend/src/lib/components/RunChart.svelte
@@ -110,11 +110,8 @@
 	function getMaxTime(jobs: CompletedJob[] | undefined): Date {
 		return addSeconds(new Date(jobs?.[0]?.started_at ?? new Date().toString()), 15)
 	}
-</script>
 
-<Scatter
-	{data}
-	options={{
+	$: scatterOptions = {
 		responsive: true,
 		maintainAspectRatio: false,
 		plugins: {
@@ -133,10 +130,10 @@
 
 		scales: {
 			x: {
+				type: 'time',
 				grid: {
 					display: false
 				},
-				type: 'time',
 				min: minTime,
 				max: maxTime
 			},
@@ -152,5 +149,7 @@
 			}
 		},
 		animation: false
-	}}
-/>
+	} as any
+</script>
+
+<Scatter {data} options={scatterOptions} />
diff --git a/frontend/src/lib/components/apps/components/display/AppChartJs.svelte b/frontend/src/lib/components/apps/components/display/AppChartJs.svelte
new file mode 100644
index 0000000000..edde78f125
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/display/AppChartJs.svelte
@@ -0,0 +1,91 @@
+<!-- <script lang="ts">
+	import { Doughnut, Pie } from 'svelte-chartjs'
+	import {
+		Chart as ChartJS,
+		Title,
+		Tooltip,
+		Legend,
+		LineElement,
+		LinearScale,
+		PointElement,
+		CategoryScale,
+		ArcElement
+	} from 'chart.js'
+	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
+	import type { AppInput } from '../../inputType'
+	import InputValue from '../helpers/InputValue.svelte'
+	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
+	import { concatCustomCss } from '../../utils'
+	import { getContext } from 'svelte'
+	import { initOutput } from '../../editor/appUtils'
+
+	export let id: string
+	export let componentInput: AppInput | undefined
+	export let configuration: RichConfigurations
+	export let initializing: boolean | undefined = undefined
+	export let customCss: ComponentCustomCSS<'piechartcomponent'> | undefined = undefined
+	export let render: boolean
+
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	const outputs = initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
+
+	ChartJS.register(
+		Title,
+		Tooltip,
+		Legend,
+		LineElement,
+		LinearScale,
+		PointElement,
+		CategoryScale,
+		ArcElement
+	)
+
+	let result: { data: number[]; labels?: string[] } | undefined = undefined
+	let theme: string = 'theme1'
+	let doughnut = false
+
+	$: backgroundColor = {
+		theme1: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
+		// blue theme
+		theme2: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'],
+		// red theme
+		theme3: ['#e74a3b', '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e']
+	}[theme]
+
+	const options = {
+		responsive: true,
+		animation: false,
+		maintainAspectRatio: false
+	}
+
+	$: data = {
+		labels: result?.labels ?? [],
+		datasets: [
+			{
+				data: result?.data ?? [],
+				backgroundColor: backgroundColor
+			}
+		]
+	}
+
+	$: css = concatCustomCss($app.css?.piechartcomponent, customCss)
+</script>
+
+<InputValue {id} input={configuration.theme} bind:value={theme} />
+<InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
+
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
+		{#if result}
+			{#if doughnut}
+				<Doughnut {data} {options} />
+			{:else}
+				<Pie {data} {options} />
+			{/if}
+		{/if}
+	</div>
+</RunnableWrapper> -->