diff --git a/src/qqq/components/widgets/components/ChartSubheaderWithData.tsx b/src/qqq/components/widgets/components/ChartSubheaderWithData.tsx
new file mode 100644
index 0000000..1fa1c87
--- /dev/null
+++ b/src/qqq/components/widgets/components/ChartSubheaderWithData.tsx
@@ -0,0 +1,104 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022. Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+
+import {Skeleton} from "@mui/material";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import {Link} from "react-router-dom";
+import colors from "qqq/assets/theme/base/colors";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+export interface ChartSubheaderData
+{
+ mainNumber: number;
+ vsPreviousPercent: number;
+ vsPreviousNumber: number;
+ isUpVsPrevious: boolean;
+ isGoodVsPrevious: boolean;
+ vsDescription: string;
+ mainNumberUrl: string;
+ previousNumberUrl: string;
+}
+
+interface Props
+{
+ chartSubheaderData: ChartSubheaderData;
+}
+
+const GOOD_COLOR = colors.success.main;
+const BAD_COLOR = colors.error.main;
+const UP_ICON = "arrow_drop_up";
+const DOWN_ICON = "arrow_drop_down";
+
+function StackedBarChart({chartSubheaderData}: Props): JSX.Element
+{
+ let color = "black";
+ if (chartSubheaderData && chartSubheaderData.isGoodVsPrevious != null)
+ {
+ color = chartSubheaderData.isGoodVsPrevious ? GOOD_COLOR : BAD_COLOR;
+ }
+
+ let iconName: string = null;
+ if (chartSubheaderData && chartSubheaderData.isUpVsPrevious != null)
+ {
+ iconName = chartSubheaderData.isUpVsPrevious ? UP_ICON : DOWN_ICON;
+ }
+
+ let mainNumberElement = {ValueUtils.getFormattedNumber(chartSubheaderData.mainNumber)};
+ if(chartSubheaderData.mainNumberUrl)
+ {
+ mainNumberElement = {mainNumberElement}
+ }
+
+ let previousNumberElement = (
+ <>
+
+ {chartSubheaderData.vsDescription}
+ {chartSubheaderData.vsPreviousNumber && (<> ({ValueUtils.getFormattedNumber(chartSubheaderData.vsPreviousNumber)})>)}
+
+ >
+ )
+
+ if(chartSubheaderData.previousNumberUrl)
+ {
+ previousNumberElement = {previousNumberElement}
+ }
+
+ return chartSubheaderData ? (
+
+ {mainNumberElement}
+ {
+ chartSubheaderData.vsPreviousPercent != null && iconName != null && (
+
+ {iconName}
+ {chartSubheaderData.vsPreviousPercent}%
+ {previousNumberElement}
+
+ )
+ }
+
+ ) : ;
+}
+
+export default StackedBarChart;