diff --git a/web/.storybook/preview.tsx b/web/.storybook/preview.tsx
index 798ce4a6e..fb31cb0a8 100644
--- a/web/.storybook/preview.tsx
+++ b/web/.storybook/preview.tsx
@@ -11,6 +11,7 @@ initialize();
 const preview: Preview = {
   parameters: {
     controls: {
+      expanded: true,
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i
diff --git a/web/src/api/asset_interfaces/metric/charts/axisInterfaces.ts b/web/src/api/asset_interfaces/metric/charts/axisInterfaces.ts
index 6185afcbd..664d341ea 100644
--- a/web/src/api/asset_interfaces/metric/charts/axisInterfaces.ts
+++ b/web/src/api/asset_interfaces/metric/charts/axisInterfaces.ts
@@ -1,8 +1,8 @@
 export type BarAndLineAxis = {
-  x: string[]; //the column ids to use for the x axis. If multiple column ids are provided, they will be grouped together and summed. The LLM should NEVER set multiple x axis columns. Only the user can set this.
-  y: string[]; //the column ids to use for the y axis.
-  category: string[]; //the column ids to use for the category axis. If multiple column ids are provided, they will be grouped together. THE LLM SHOULD NEVER SET MULTIPLE CATEGORY COLUMNS. ONLY THE USER CAN SET THIS.
-  tooltip?: string[] | null; //if null the y axis will automatically be used, the y axis will be used for the tooltip.
+  x: string[]; // the column ids to use for the x axis. If multiple column ids are provided, they will be grouped together and summed. The LLM should NEVER set multiple x axis columns. Only the user can set this.
+  y: string[]; // the column ids to use for the y axis.
+  category: string[]; // the column ids to use for the category axis. If multiple column ids are provided, they will be grouped together. THE LLM SHOULD NEVER SET MULTIPLE CATEGORY COLUMNS. ONLY THE USER CAN SET THIS.
+  tooltip?: string[] | null; // if null the y axis will automatically be used, the y axis will be used for the tooltip.
 };
 
 export type ScatterAxis = {
diff --git a/web/src/api/asset_interfaces/metric/charts/interfaces.ts b/web/src/api/asset_interfaces/metric/charts/interfaces.ts
index 05cb49147..171959d2a 100644
--- a/web/src/api/asset_interfaces/metric/charts/interfaces.ts
+++ b/web/src/api/asset_interfaces/metric/charts/interfaces.ts
@@ -10,7 +10,7 @@ export type BusterChartProps = {
   animateLegend?: boolean;
   id?: string;
   error?: string;
-  columnMetadata: ColumnMetaData[] | undefined;
+  columnMetadata?: ColumnMetaData[];
   useRapidResizeObserver?: boolean;
   editable?: boolean;
   onInitialAnimationEnd?: () => void;
diff --git a/web/src/api/asset_interfaces/metric/charts/tickInterfaces.ts b/web/src/api/asset_interfaces/metric/charts/tickInterfaces.ts
index 6baa310f6..421427a34 100644
--- a/web/src/api/asset_interfaces/metric/charts/tickInterfaces.ts
+++ b/web/src/api/asset_interfaces/metric/charts/tickInterfaces.ts
@@ -1,30 +1,101 @@
+/**
+ * Configuration options for the Y-axis of a chart.
+ */
 export type YAxisConfig = {
-  yAxisShowAxisLabel?: boolean; //OPTIONAL: default is true.
-  yAxisShowAxisTitle?: boolean; //OPTIONAL: default is true.
-  yAxisAxisTitle?: string | null; //OPTIONAL: default is the name of the first column that is plotted on the Y-axis. Default is null.
-  yAxisStartAxisAtZero?: boolean | null; //OPTIONAL: default is true.
-  yAxisScaleType?: 'log' | 'linear'; //OPTIONAL: default is linear.
+  /** Whether to show the axis label. Defaults to true. */
+  yAxisShowAxisLabel?: boolean;
+
+  /** Whether to show the axis title. Defaults to true. */
+  yAxisShowAxisTitle?: boolean;
+
+  /**
+   * The title of the Y-axis.
+   * @default null - Uses the name of the first column plotted on the Y-axis
+   */
+  yAxisAxisTitle?: string | null;
+
+  /** Whether to start the axis at zero. Defaults to true. */
+  yAxisStartAxisAtZero?: boolean | null;
+
+  /**
+   * The scale type for the Y-axis.
+   * @default "linear"
+   */
+  yAxisScaleType?: 'log' | 'linear';
 };
 
 //The y2 (or right axis) Y-axis is used for secondary Y-axes in a combo chart.
+/**
+ * Configuration options for the secondary Y-axis (Y2) in a combo chart.
+ */
 export type Y2AxisConfig = {
-  y2AxisShowAxisLabel?: boolean; //OPTIONAL: default is true.
-  y2AxisShowAxisTitle?: boolean; //OPTIONAL: default is true.
-  y2AxisAxisTitle?: string | null; //OPTIONAL: default is the name of the first column that is plotted on the Y-axis. Default is null.
-  y2AxisStartAxisAtZero?: boolean; //OPTIONAL: default is true.
-  y2AxisScaleType?: 'log' | 'linear'; //OPTIONAL: default is linear.
+  /** Whether to show the axis label. Defaults to true. */
+  y2AxisShowAxisLabel?: boolean;
+
+  /** Whether to show the axis title. Defaults to true. */
+  y2AxisShowAxisTitle?: boolean;
+
+  /**
+   * The title of the secondary Y-axis.
+   * @default null - Uses the name of the first column plotted on the Y2-axis
+   */
+  y2AxisAxisTitle?: string | null;
+
+  /** Whether to start the axis at zero. Defaults to true. */
+  y2AxisStartAxisAtZero?: boolean;
+
+  /**
+   * The scale type for the secondary Y-axis.
+   * @default "linear"
+   */
+  y2AxisScaleType?: 'log' | 'linear';
 };
 
+/**
+ * Configuration options for the X-axis of a chart.
+ */
 export type XAxisConfig = {
-  xAxisTimeInterval?: 'day' | 'week' | 'month' | 'quarter' | 'year' | null; //OPTIONAL: default is null. Will only apply to combo and line charts
-  xAxisShowAxisLabel?: boolean; //OPTIONAL: default is true.
-  xAxisShowAxisTitle?: boolean; //OPTIONAL: default is true.
-  xAxisAxisTitle?: string | null; //OPTIONAL: default is null. If null the axis title will be a concatenation of all the x columns applied to the axis.
-  xAxisLabelRotation?: 0 | 45 | 90 | 'auto'; //OPTIONAL: default is auto.
-  xAxisDataZoom?: boolean; //OPTIONAL: default is false. The LLM should never set this to true. Only the user can set this to true.
+  /**
+   * The time interval for the X-axis. Only applies to combo and line charts.
+   * @default null
+   */
+  xAxisTimeInterval?: 'day' | 'week' | 'month' | 'quarter' | 'year' | null;
+
+  /** Whether to show the axis label. Defaults to true. */
+  xAxisShowAxisLabel?: boolean;
+
+  /** Whether to show the axis title. Defaults to true. */
+  xAxisShowAxisTitle?: boolean;
+
+  /**
+   * The title of the X-axis.
+   * @default null - Uses a concatenation of all X columns applied to the axis
+   */
+  xAxisAxisTitle?: string | null;
+
+  /**
+   * The rotation angle for the X-axis labels.
+   * @default "auto"
+   */
+  xAxisLabelRotation?: 0 | 45 | 90 | 'auto';
+
+  /**
+   * Whether to enable data zooming on the X-axis.
+   * Should only be set to true by the user.
+   * @default false
+   */
+  xAxisDataZoom?: boolean;
 };
 
 //The category axis works differently than the other axes. It is used to color and group the data.
+/**
+ * Configuration options for styling the category axis.
+ * The category axis is used to color and group the data.
+ */
 export type CategoryAxisStyleConfig = {
+  /**
+   * The title of the category axis.
+   * @default null
+   */
   categoryAxisTitle?: string | null;
 };
diff --git a/web/src/components/ui/charts/BusterChart.stories.tsx b/web/src/components/ui/charts/BusterChart.stories.tsx
index 1e667b0f1..ac0ec13d2 100644
--- a/web/src/components/ui/charts/BusterChart.stories.tsx
+++ b/web/src/components/ui/charts/BusterChart.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { BusterChart } from './BusterChart';
 import { ChartType } from '../../../api/asset_interfaces/metric/charts/enum';
 import { IColumnLabelFormat } from '../../../api/asset_interfaces/metric/charts/columnLabelInterfaces';
+import { DEFAULT_CHART_CONFIG } from '../../../api/asset_interfaces/metric/defaults';
 import {
   generateBarChartData,
   generateLineChartData,
@@ -22,10 +23,35 @@ const meta: Meta<typeof BusterChart> = {
     layout: 'centered'
   },
   argTypes: {
-    className: {
-      control: false,
-      defaultValue: 'w-[800px] h-[400px]'
+    colors: {
+      description:
+        'Array of colors to be used for the chart series. If not provided, defaults to the theme colors.',
+      control: 'array',
+      table: {
+        type: { summary: 'string[]' },
+        defaultValue: { summary: 'DEFAULT_CHART_THEME' }
+      }
+    },
+    selectedChartType: {
+      control: 'select',
+      description: 'The type of chart to display.',
+      defaultValue: ChartType.Table,
+      options: Object.values(ChartType)
+    },
+    xAxisTimeInterval: {
+      control: 'select',
+      description:
+        'Time interval for x-axis when displaying time series data. Only applies to combo and line charts.',
+      options: ['day', 'week', 'month', 'quarter', 'year', null],
+      table: {
+        type: { summary: "'day' | 'week' | 'month' | 'quarter' | 'year' | null" },
+        defaultValue: { summary: 'null' }
+      }
     }
+  },
+  args: {
+    ...DEFAULT_CHART_CONFIG,
+    className: 'w-[800px] h-[400px]'
   }
 };
 
@@ -33,6 +59,7 @@ export default meta;
 type Story = StoryObj<typeof BusterChart>;
 
 export const LineChart: Story = {
+  argTypes: meta.argTypes,
   args: {
     selectedChartType: ChartType.Line,
     data: generateLineChartData(),
diff --git a/web/src/components/ui/typography/Text.stories.tsx b/web/src/components/ui/typography/Text.stories.tsx
index 0b43a9049..2caad2b45 100644
--- a/web/src/components/ui/typography/Text.stories.tsx
+++ b/web/src/components/ui/typography/Text.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Text } from './Text';
+import React from 'react';
 
 const meta: Meta<typeof Text> = {
   title: 'UI/Typography/Text',