diff --git a/.storybook/storybook.css b/.storybook/storybook.css
index 9a141f91e16..fd3e3b1a84f 100644
--- a/.storybook/storybook.css
+++ b/.storybook/storybook.css
@@ -5,6 +5,7 @@
 @import '../resources/css/ui.css';
 @import '../resources/css/core/utilities.css';
 @import '../resources/css/elements/tables.css';
+@import '../resources/css/components/forms/charts.css';
 @import '../resources/css/components/stacks.css';
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -332,4 +333,4 @@
     .sbdocs-preview {
         border-radius: 17px;
     }
-}
\ No newline at end of file
+}
diff --git a/.storybook/theme.css b/.storybook/theme.css
index 36e4eb449ea..6695be3418c 100644
--- a/.storybook/theme.css
+++ b/.storybook/theme.css
@@ -31,6 +31,18 @@ manually copy them here.
     --theme-color-ui-accent-bg: oklch(0.457 0.24 277.023);
     --theme-color-ui-accent-text: var(--theme-color-ui-accent-bg);
     --theme-color-switch-bg: var(--theme-color-ui-accent-bg);
+    --theme-color-chart-1: oklch(0.585 0.233 277.117);
+    --theme-color-chart-2: oklch(0.274 0.006 286.033);
+    --theme-color-chart-3: oklch(0.768 0.233 130.85);
+    --theme-color-chart-4: oklch(0.87 0.065 274.039);
+    --theme-color-chart-1-label-bg: oklch(0.511 0.262 276.966);
+    --theme-color-chart-2-label-bg: transparent;
+    --theme-color-chart-3-label-bg: oklch(0.648 0.2 131.684);
+    --theme-color-chart-4-label-bg: oklch(0.673 0.182 276.935);
+    --theme-color-chart-1-legend: oklch(0.585 0.233 277.117);
+    --theme-color-chart-2-legend: oklch(0.274 0.006 286.033);
+    --theme-color-chart-3-legend: oklch(0.768 0.233 130.85);
+    --theme-color-chart-4-legend: oklch(0.785 0.115 274.713);
 
     --z-index-below: -1;
     --z-index-above: 1;
@@ -45,6 +57,18 @@ manually copy them here.
         --theme-color-content-bg: oklch(0.21 0.006 285.885);
         --theme-color-content-border: oklch(0.141 0.005 285.823);
         --theme-color-ui-accent-text: oklch(0.673 0.182 276.935);
+        --theme-color-chart-1: oklch(0.511 0.262 276.966);
+        --theme-color-chart-2: oklch(0.87 0.065 274.039);
+        --theme-color-chart-3: oklch(0.768 0.233 130.85);
+        --theme-color-chart-4: oklch(0.141 0.005 285.823);
+        --theme-color-chart-1-label-bg: oklch(0.457 0.24 277.023);
+        --theme-color-chart-2-label-bg: oklch(0.673 0.182 276.935);
+        --theme-color-chart-3-label-bg: oklch(0.648 0.2 131.684);
+        --theme-color-chart-4-label-bg: oklch(0.37 0.013 285.805);
+        --theme-color-chart-1-legend: oklch(0.511 0.262 276.966);
+        --theme-color-chart-2-legend: oklch(0.87 0.065 274.039);
+        --theme-color-chart-3-legend: oklch(0.768 0.233 130.85);
+        --theme-color-chart-4-legend: oklch(0.141 0.005 285.823);
     }
 }
 
diff --git a/lang/en/messages.php b/lang/en/messages.php
index d57a3e72ea8..7075b4cbfd0 100644
--- a/lang/en/messages.php
+++ b/lang/en/messages.php
@@ -164,6 +164,9 @@
     'form_fields_handle_instructions' => 'Auto-generated from the label. It can\'t be changed after saving the form.',
     'form_fields_instructions_instructions' => 'Additional field instructions like this.',
     'form_navigation' => 'Form navigation',
+    'form_summary_add_chart_instructions' => 'Add a chart to start summarizing responses.',
+    'form_summary_checked_insight' => 'of users checked the toggle',
+    'form_summary_save_to_see_chart' => 'Save to see this chart.',
     'getting_started_widget_collections' => 'Collections hold the different content types that make up your site, helping you stay organized.',
     'getting_started_widget_docs' => 'Discover everything Statamic can do, and learn how to use its powerful features the right way.',
     'getting_started_widget_header' => 'Getting Started with Statamic',
diff --git a/lang/en/validation.php b/lang/en/validation.php
index 9e46026ccab..f237d8e16ab 100644
--- a/lang/en/validation.php
+++ b/lang/en/validation.php
@@ -173,6 +173,9 @@
     'elevated_session_verification_code' => 'The verification code is incorrect.',
     'email_available' => 'A user with this email already exists.',
     'fieldset_imported_recursively' => 'Fieldset :handle is being imported recursively.',
+    'form_chart_hidden_field' => 'Field :field is hidden and cannot be charted.',
+    'form_chart_unknown_chart' => 'Chart :chart does not exist.',
+    'form_chart_unknown_field' => 'Field :field does not exist on this form.',
     'one_site_without_origin' => 'At least one site must not have an origin.',
     'options_require_keys' => 'All options must have keys.',
     'origin_cannot_be_disabled' => 'Cannot select a disabled origin.',
diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 1cce409c7f4..a921bf82dec 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -48,6 +48,8 @@ export const {
     Field,
     Header,
     Heading,
+    HorizontalBarChart,
+    HorizontalLollipopChart,
     HoverCard,
     Icon,
     Input,
@@ -78,6 +80,7 @@ export const {
     Panel,
     PanelFooter,
     PanelHeader,
+    PieChart,
     Popover,
     PublishComponents,
     PublishContainer,
@@ -127,6 +130,7 @@ export const {
     Timezones,
     ToggleGroup,
     ToggleItem,
+    VerticalBarChart,
     Widget,
     registerIconSet,
     registerIconSetFromStrings,
diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
new file mode 100644
index 00000000000..0a85d32a19d
--- /dev/null
+++ b/resources/css/components/forms/charts.css
@@ -0,0 +1,310 @@
+/* GROUP CHARTS / PIE CHART
+=================================================== */
+.pie-chart-figure {
+    display: grid;
+    grid-template-columns: 0.6fr 1fr;
+    @apply gap-4 p-6;
+}
+
+.pie-chart-legend {
+    @apply pt-4;
+}
+
+.pie-chart-legend__list {
+    @apply grid gap-2.25 text-xs text-gray-700 dark:text-gray-50;
+}
+
+.pie-chart-legend__item {
+    @apply flex items-center gap-2.25;
+}
+
+.pie-chart-legend__value {
+    @apply min-w-7 text-end text-[0.785rem] font-medium;
+}
+
+.pie-chart-legend__swatch {
+    @apply size-2.5 shrink-0 rounded-full;
+}
+
+.pie-chart-legend__swatch--1 { @apply bg-chart-1-legend; }
+.pie-chart-legend__swatch--2 { @apply bg-chart-2-legend; }
+.pie-chart-legend__swatch--3 { @apply bg-chart-3-legend; }
+.pie-chart-legend__swatch--4 { @apply bg-chart-4-legend; }
+
+.pie-chart-legend__link {
+    @apply contents cursor-pointer text-inherit;
+}
+
+.pie-chart {
+    --label-radius: 30%;
+
+    position: relative;
+    width: 9rem;
+    aspect-ratio: 1 / 1;
+
+    /* Slice sizes as unitless numbers (percent of circle). */
+    --end1: calc(var(--1) * 1%);
+    --end2: calc((var(--1) + var(--2)) * 1%);
+    --end3: calc((var(--1) + var(--2) + var(--3)) * 1%);
+    --end4: 100%;
+
+    /* Midpoint angle for each slice (100% = 360deg). */
+    --angle1: calc(var(--1) * 3.6deg / 2);
+    --angle2: calc((var(--1) + var(--2) / 2) * 3.6deg);
+    --angle3: calc((var(--1) + var(--2) + var(--3) / 2) * 3.6deg);
+    --angle4: calc((var(--1) + var(--2) + var(--3) + var(--4) / 2) * 3.6deg);
+
+    &:hover {
+        .pie-chart__label {
+            opacity: unset;
+        }
+    }
+}
+
+.pie-chart__disc {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-image: conic-gradient(
+        var(--slice-1-color, var(--color-chart-1)) 0% var(--end1),
+        var(--slice-2-color, var(--color-chart-2)) var(--end1) var(--end2),
+        var(--slice-3-color, var(--color-chart-3)) var(--end2) var(--end3),
+        var(--slice-4-color, var(--color-chart-4)) var(--end3) var(--end4)
+    );
+}
+
+.pie-chart__label {
+    --angle: 0deg;
+    opacity: 0;
+    transition: opacity 0.2s ease-in 0s;
+
+    padding: 0.075rem 0.15rem;
+    border-radius: 0.25rem;
+
+    position: absolute;
+    left: calc(50% + var(--label-radius) * sin(var(--angle)));
+    top: calc(50% - var(--label-radius) * cos(var(--angle)));
+    transform: translate(-50%, -50%);
+
+    @apply text-xs font-semibold tabular-nums text-white pointer-events-none;
+}
+
+.pie-chart__label--1 { --angle: var(--angle1); background-color: var(--color-chart-1-label-bg); }
+.pie-chart__label--2 { --angle: var(--angle2); background-color: var(--color-chart-2-label-bg); }
+.pie-chart__label--3 { --angle: var(--angle3); background-color: var(--color-chart-3-label-bg); }
+/* Kick the radius out a bit because the label segment is smaller, and it might overlap with the preceding segment. */
+.pie-chart__label--4 { --angle: var(--angle4); background-color: var(--color-chart-4-label-bg); --label-radius: 39%; }
+
+
+/* GROUP CHARTS / PIE CHART / MODIFIERS
+=================================================== */
+.pie-chart--focused {
+    .pie-chart__label,
+    &.pie-chart:hover .pie-chart__label {
+        opacity: 0;
+    }
+
+    .pie-chart__label[data-focused],
+    &.pie-chart:hover .pie-chart__label[data-focused] {
+        opacity: 1;
+        border: 2px solid black;
+    }
+}
+
+
+
+/* GROUP CHARTS / IMAGE PIE CHART
+=================================================== */
+.image-pie-chart {
+    --label-radius: 30%;
+
+    position: relative;
+    width: 9rem;
+    aspect-ratio: 1 / 1;
+
+    /* Midpoint angle for each slice (100% = 360deg). */
+    --angle1: calc(var(--1) * 3.6deg / 2);
+    --angle2: calc((var(--1) + var(--2) / 2) * 3.6deg);
+
+    &:hover {
+        .image-pie-chart__label {
+            opacity: unset;
+        }
+    }
+}
+
+.image-pie-chart__disc {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    overflow: hidden;
+
+    @apply bg-gray-200 dark:bg-gray-700;
+}
+
+.image-pie-chart__slice {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background-image: var(--image);
+    background-size: cover;
+    background-position: center;
+}
+
+.image-pie-chart__slice--1 {
+    --slice-size: calc(var(--1) * 3.6deg);
+
+    -webkit-mask-image: conic-gradient(from 0deg, #000 0deg var(--slice-size), transparent var(--slice-size));
+    mask-image: conic-gradient(from 0deg, #000 0deg var(--slice-size), transparent var(--slice-size));
+}
+
+.image-pie-chart__slice--2 {
+    --slice-start: calc(var(--1) * 3.6deg);
+    --slice-size: calc(var(--2) * 3.6deg);
+
+    -webkit-mask-image: conic-gradient(from var(--slice-start), #000 0deg var(--slice-size), transparent var(--slice-size));
+    mask-image: conic-gradient(from var(--slice-start), #000 0deg var(--slice-size), transparent var(--slice-size));
+}
+
+.image-pie-chart__label {
+    --angle: 0deg;
+    opacity: 0;
+    transition: opacity 0.2s ease-in 0s;
+
+    padding: 0.075rem 0.15rem;
+    border-radius: 0.25rem;
+
+    position: absolute;
+    left: calc(50% + var(--label-radius) * sin(var(--angle)));
+    top: calc(50% - var(--label-radius) * cos(var(--angle)));
+    transform: translate(-50%, -50%);
+
+    @apply text-xs font-medium tabular-nums text-white pointer-events-none;
+}
+
+.image-pie-chart__label--1 { --angle: var(--angle1); background-color: hsl(0 0% 0% / 0.55); }
+.image-pie-chart__label--2 { --angle: var(--angle2); background-color: hsl(0 0% 0% / 0.55); }
+
+
+
+/* GROUP CHARTS / VERTICAL BAR CHART
+=================================================== */
+.vertical-bar-chart-figure {
+    display: grid;
+    height: 100%;
+    @apply py-3 px-3;
+}
+
+.vertical-bar-chart {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 0.1rem;
+    height: 100%;
+    list-style: none;
+    padding: 0;
+}
+
+.vertical-bar-chart__bar {
+    display: grid;
+    flex: 1;
+    grid-template-rows: 1fr auto;
+    align-items: end;
+    justify-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    height: 100%;
+}
+
+.vertical-bar-chart__plot {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+}
+
+.vertical-bar-chart__value {
+    @apply mb-1.5 text-[0.785rem] font-medium tabular-nums text-gray-800 dark:text-gray-100;
+}
+
+.vertical-bar-chart__fill {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 2rem;
+    border-radius: 0.25rem 0.25rem 0 0;
+    background-color: var(--color-chart-1);
+}
+
+.vertical-bar-chart__scale-label {
+    @apply min-w-8 rounded-md border border-gray-200 shadow-ui-xs px-1.5 py-0.5 text-center text-[0.785rem] font-medium tabular-nums text-gray-700 dark:border-gray-700 dark:text-gray-300;
+}
+
+
+
+/* GROUP CHARTS / SUMMARY BAR CHART / ICON STROKES
+=================================================== */
+/* Note: This is used to style the checkbox icons in the summary bar chart depending on the background contrast. */
+.summary-bar-chart__icon-stroke {
+    color: var(--chart-tick-color);
+}
+
+.summary-bar-chart__icon-stroke path:not(:first-child) {
+    stroke: white;
+}
+
+@supports (color: contrast-color(red)) {
+    .dark .summary-bar-chart__icon-stroke path:not(:first-child) {
+        stroke: contrast-color(var(--chart-tick-color));
+    }
+}
+
+.summary-bar-chart__icon-stroke--1 { --chart-tick-color: var(--color-chart-1-legend); }
+.summary-bar-chart__icon-stroke--2 { --chart-tick-color: var(--color-chart-2-legend); }
+.summary-bar-chart__icon-stroke--3 { --chart-tick-color: var(--color-chart-3-legend); }
+.summary-bar-chart__icon-stroke--4 { --chart-tick-color: var(--color-chart-4-legend); }
+
+
+
+/* GROUP CHARTS / ANIMATIONS / PIE CHART
+=================================================== */
+@media (prefers-reduced-motion: no-preference) {
+    /* These animations are triggered when switching chart types */
+    @property --pie-reveal {
+        syntax: '<angle>';
+        inherits: false;
+        initial-value: 0deg;
+    }
+
+    @keyframes pie-chart-reveal {
+        from { --pie-reveal: 0deg; }
+        to { --pie-reveal: 360deg; }
+    }
+
+    @keyframes bar-chart-reveal {
+        from { transform: scaleX(0); }
+        to { transform: scaleX(1); }
+    }
+
+    .content-card:has([data-submission-summary]) {
+        [data-ui-card]:has([data-ui-toggle-group-interacted]) {
+            .pie-chart__disc,
+            .image-pie-chart__disc {
+                -webkit-mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
+                mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
+                --pie-reveal: 0deg;
+                animation: pie-chart-reveal 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
+            }
+
+            .summary-bar-chart__fill {
+                transform-origin: left center;
+                animation: bar-chart-reveal 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
+            }
+        }
+    }
+}
diff --git a/resources/css/cp.css b/resources/css/cp.css
index 9f8c9786f8f..b9ee26f8a15 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -19,6 +19,7 @@
 @import './components/page-tree.css';
 @import './components/forms.css';
 @import './components/forms/logic-tree.css';
+@import './components/forms/charts.css';
 @import './components/pagination.css';
 @import './components/popover.css';
 @import './components/preview.css';
diff --git a/resources/css/ui.css b/resources/css/ui.css
index 16816ecbe18..3594899c94b 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -30,6 +30,18 @@
     --color-ui-accent-bg: var(--theme-color-ui-accent-bg);
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
+    --color-chart-1: var(--theme-color-chart-1);
+    --color-chart-2: var(--theme-color-chart-2);
+    --color-chart-3: var(--theme-color-chart-3);
+    --color-chart-4: var(--theme-color-chart-4);
+    --color-chart-1-label-bg: var(--theme-color-chart-1-label-bg);
+    --color-chart-2-label-bg: var(--theme-color-chart-2-label-bg);
+    --color-chart-3-label-bg: var(--theme-color-chart-3-label-bg);
+    --color-chart-4-label-bg: var(--theme-color-chart-4-label-bg);
+    --color-chart-1-legend: var(--theme-color-chart-1-legend);
+    --color-chart-2-legend: var(--theme-color-chart-2-legend);
+    --color-chart-3-legend: var(--theme-color-chart-3-legend);
+    --color-chart-4-legend: var(--theme-color-chart-4-legend);
 
     /* Custom color shades for all Tailwind color families */
     --color-slate-150: oklch(0.9485 0.01 251.702);
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index a38890b0bf4..82a032020da 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -46,6 +46,8 @@ export {
     Field,
     Header,
     Heading,
+    HorizontalBarChart,
+    HorizontalLollipopChart,
     HoverCard,
     Icon,
     Input,
@@ -76,6 +78,7 @@ export {
     Panel,
     PanelFooter,
     PanelHeader,
+    PieChart,
     Popover,
     PublishComponents,
     PublishContainer,
@@ -125,6 +128,7 @@ export {
     Timezones,
     ToggleGroup,
     ToggleItem,
+    VerticalBarChart,
     Widget,
     registerIconSet,
     registerIconSetFromStrings,
diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 47454014cc9..fb7fdabc901 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -8,6 +8,10 @@ import UserPublishForm from '../components/users/PublishForm.vue';
 import EntryListing from '../components/entries/Listing.vue';
 import CollectionWidget from '../components/entries/CollectionWidget.vue';
 import FormWidget from '../components/forms/FormWidget.vue';
+import AverageInsight from '../components/forms/summary/insights/AverageInsight.vue';
+import CheckedInsight from '../components/forms/summary/insights/CheckedInsight.vue';
+import MinMaxInsight from '../components/forms/summary/insights/MinMaxInsight.vue';
+import StarRatingInsight from '../components/forms/summary/insights/StarRatingInsight.vue';
 import FileIcon from '../components/FileIcon.vue';
 
 import Slugify from '../components/slugs/Slugify.vue';
@@ -60,6 +64,12 @@ export default function registerGlobalComponents(app) {
     app.component('form-widget', FormWidget);
     app.component('updater-widget', UpdaterWidget);
 
+    // Form Summary Insights
+    app.component('average-insight', AverageInsight);
+    app.component('checked-insight', CheckedInsight);
+    app.component('min-max-insight', MinMaxInsight);
+    app.component('star-rating-insight', StarRatingInsight);
+
     // Reusable
     app.component('file-icon', FileIcon);
 
diff --git a/resources/js/components/forms/SubmissionListing.vue b/resources/js/components/forms/SubmissionListing.vue
index db3004806d5..99d6a29150b 100644
--- a/resources/js/components/forms/SubmissionListing.vue
+++ b/resources/js/components/forms/SubmissionListing.vue
@@ -1,3 +1,53 @@
+<script setup lang="ts">
+import { Listing, DropdownItem, Panel, PanelFooter, ToggleGroup, ToggleItem } from '@/components/ui';
+import { Link } from '@inertiajs/vue3';
+import SubmissionStatusIndicator from '@/components/forms/SubmissionStatusIndicator.vue';
+import Table from '@ui/Listing/Table.vue';
+import Search from '@ui/Listing/Search.vue';
+import Filters from '@ui/Listing/Filters.vue';
+import CustomizeColumns from '@ui/Listing/CustomizeColumns.vue';
+import Pagination from '@ui/Listing/Pagination.vue';
+import Presets from '@ui/Listing/Presets.vue';
+import { computed, useTemplateRef, ref, watch } from 'vue';
+import { preferences } from '@api';
+import Summary from '@/components/forms/summary/Summary.vue';
+
+enum View {
+    Submissions = 'submissions',
+    Summary = 'summary',
+}
+
+const props = defineProps<{
+    form: string;
+    actionUrl: string;
+    summaryUrl?: string;
+    chartsUpdateUrl?: string;
+    sortColumn: string;
+    sortDirection: string;
+    columns: any[];
+    filters: any[];
+    can: Record<string, boolean>;
+}>();
+
+const listing = useTemplateRef('listing');
+const summary = useTemplateRef('summary');
+const preferencesPrefix = `forms.${props.form}`;
+const requestUrl = cp_url(`forms/${props.form}/submissions`);
+const view = ref<View>(props.summaryUrl ? preferences.get(`${preferencesPrefix}.view`, View.Submissions) : View.Submissions);
+
+const parameters = computed(() => listing.value?.parameters);
+
+const refresh = (): void => {
+    view.value === View.Submissions
+        ? listing.value?.refresh()
+        : summary.value?.refresh();
+};
+
+watch(view, (view: View): void => preferences.set(`${preferencesPrefix}.view`, view));
+
+defineExpose({ parameters, refresh });
+</script>
+
 <template>
     <Listing
         ref="listing"
@@ -11,57 +61,69 @@
         :filters="filters"
         push-query
     >
-        <template #cell-datestamp="{ row: submission, value, isColumnVisible }">
-            <Link class="title-index-field" :href="submission.url" @click.stop>
-                <SubmissionStatusIndicator v-if="!isColumnVisible('status')" :status="submission.status" />
-                <span><date-time :of="value" /></span>
-            </Link>
-        </template>
-        <template #cell-status="{ row: submission }">
-            <SubmissionStatusIndicator :status="submission.status" show-label :show-dot="false" />
-        </template>
-        <template #prepended-row-actions="{ row: submission }">
-            <DropdownItem :text="__('View')" :href="submission.url" icon="eye" />
-        </template>
-    </Listing>
-</template>
-
-<script>
-import { Listing, DropdownItem, Badge } from '@/components/ui';
-import { Link } from '@inertiajs/vue3';
-import SubmissionStatusIndicator from '@/components/forms/SubmissionStatusIndicator.vue';
+        <template #default="{ items, showPresets, allowSearch, allowCustomizingColumns, hasFilters, meta }">
+            <Presets v-if="showPresets" />
+            <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
+                <div class="flex flex-1 items-center gap-2 sm:gap-3 overflow-x-auto -ms-1 ps-1 py-1">
+                    <Search v-if="allowSearch" />
+                    <Filters v-if="hasFilters" />
+                </div>
 
-export default {
-    components: { SubmissionStatusIndicator, Link, DropdownItem, Listing, Badge },
+                <ToggleGroup v-if="summaryUrl" v-model="view">
+                    <ToggleItem
+                        :value="View.Submissions"
+                        icon="layout-list"
+                        :aria-label="__('Submissions')"
+                        v-tooltip="__('Submissions')"
+                    />
+                    <ToggleItem
+                        :value="View.Summary"
+                        icon="chart-increase"
+                        :aria-label="__('Summary')"
+                        v-tooltip="__('Summary')"
+                    />
+                </ToggleGroup>
 
-    props: {
-        form: String,
-        actionUrl: String,
-        sortColumn: String,
-        sortDirection: String,
-        columns: Array,
-        filters: Array,
-    },
+                <CustomizeColumns v-if="allowCustomizingColumns && view === View.Submissions" />
+            </div>
 
-    data() {
-        return {
-            preferencesPrefix: `forms.${this.form}`,
-            requestUrl: cp_url(`forms/${this.form}/submissions`),
-        };
-    },
+            <template v-if="view === View.Submissions">
+                <div
+                    v-if="!items.length"
+                    class="rounded-lg border border-dashed border-gray-300 dark:border-gray-700 p-6 text-center text-gray-500"
+                    v-text="__('No results')"
+                />
 
-    computed: {
-        parameters() {
-            return this.$refs.listing?.parameters;
-        },
-    },
+                <Panel v-else class="relative overflow-x-auto" style="container-type: scroll-state;">
+                    <Table>
+                        <template #cell-datestamp="{ row: submission, value, isColumnVisible }">
+                            <Link class="title-index-field" :href="submission.url" @click.stop>
+                                <SubmissionStatusIndicator v-if="!isColumnVisible('status')" :status="submission.status" />
+                                <span><date-time :of="value" /></span>
+                            </Link>
+                        </template>
+                        <template #cell-status="{ row: submission }">
+                            <SubmissionStatusIndicator :status="submission.status" show-label :show-dot="false" />
+                        </template>
+                        <template #prepended-row-actions="{ row: submission }">
+                            <DropdownItem :text="__('View')" :href="submission.url" icon="eye" />
+                        </template>
+                    </Table>
+                    <PanelFooter v-if="meta">
+                        <Pagination />
+                    </PanelFooter>
+                </Panel>
+            </template>
 
-    methods: {
-        refresh() {
-            this.$refs.listing?.refresh();
-        },
-    },
-
-    expose: ['parameters', 'refresh'],
-};
-</script>
+            <template v-if="view === View.Summary">
+                <Summary
+                    ref="summary"
+                    :form
+                    :summary-url
+                    :charts-update-url
+                    :can-edit="can.edit"
+                />
+            </template>
+        </template>
+    </Listing>
+</template>
diff --git a/resources/js/components/forms/summary/ChartWidget.vue b/resources/js/components/forms/summary/ChartWidget.vue
new file mode 100644
index 00000000000..83f482f2f20
--- /dev/null
+++ b/resources/js/components/forms/summary/ChartWidget.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { Button, Widget } from '@ui';
+import type { ChartItem, ChartMetric, SummaryField } from './types';
+
+const props = withDefaults(
+    defineProps<{
+        field: SummaryField;
+        metric?: ChartMetric;
+        showNumber?: boolean;
+    }>(),
+    {
+        metric: 'percent',
+        showNumber: false,
+    },
+);
+
+const showingDrilldown = ref(false);
+
+const chart = computed(() => props.field.chart);
+const drilldown = computed(() => chart.value.props.drilldown);
+const hasDrilldown = computed<boolean>(() => Boolean(drilldown.value));
+
+const title = computed((): string => {
+    return props.showNumber && props.field.number
+        ? `${props.field.number}. ${props.field.display}`
+        : props.field.display;
+});
+
+const items = computed<ChartItem[]>(() => {
+    if (showingDrilldown.value) {
+        return drilldown.value!.items;
+    }
+
+    return chart.value.props.items.map((item) => (item.other && hasDrilldown.value ? { ...item, clickable: true } : item));
+});
+
+const accessibleLabel = computed(() => {
+    const values = items.value
+        .map((item) => `${item.label} ${props.metric === 'count' ? item.count : `${item.percent}%`}`)
+        .join(', ');
+
+    return showingDrilldown.value
+        ? __(':field: Other breakdown: :values', { field: props.field.display, values })
+        : `${props.field.display}: ${values}`;
+});
+
+const chartProps = computed(() => ({
+    ...(showingDrilldown.value ? drilldown.value : {}),
+    items: items.value,
+    metric: props.metric,
+    accessibleLabel: accessibleLabel.value,
+}));
+
+watch(chart, () => (showingDrilldown.value = false));
+</script>
+
+<template>
+    <Widget
+        :title="title"
+        title-tag="h2"
+        class="h-full"
+        :icon="field.icon"
+        icon-class="hidden @xs/widget:block size-4 text-gray-500"
+    >
+        <template v-if="showingDrilldown" #actions>
+            <Button size="sm" icon="arrow-left" :text="__('Back')" @click="showingDrilldown = false" />
+        </template>
+        <div class="relative flex-1 overflow-hidden rounded-b-xl">
+            <slot name="chrome" />
+            <p v-if="hasDrilldown" class="sr-only" aria-live="polite">{{ accessibleLabel }}</p>
+            <component :is="chart.component" v-bind="chartProps" @select="showingDrilldown = true">
+                <template v-if="field.insights.length" #summary>
+                    <div class="flex flex-wrap gap-2.5 pb-5 -ms-1">
+                        <component
+                            v-for="insight in field.insights"
+                            :key="insight.handle"
+                            :is="insight.component"
+                            v-bind="insight.props"
+                            :metric
+                        />
+                    </div>
+                </template>
+            </component>
+        </div>
+    </Widget>
+</template>
diff --git a/resources/js/components/forms/summary/EditChrome.vue b/resources/js/components/forms/summary/EditChrome.vue
new file mode 100644
index 00000000000..abb651a7561
--- /dev/null
+++ b/resources/js/components/forms/summary/EditChrome.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Button, Dropdown, DropdownItem, DropdownMenu } from '@ui';
+import type { ChartConfig, MetaChart } from './types';
+
+const props = defineProps<{
+    config: ChartConfig;
+    charts: MetaChart[];
+}>();
+
+const emit = defineEmits<{
+    'update:chart': [chart: string];
+    remove: [];
+}>();
+
+const currentChart = computed(() => props.charts.find((chart) => chart.handle === props.config.chart));
+</script>
+
+<template>
+    <div
+        data-summary-edit-chrome
+        class="summary-chart-handle absolute inset-0 z-2 flex flex-col cursor-grab items-center justify-center gap-5 bg-white/80 px-4 backdrop-blur-[4px] border border-dashed border-purple-300 dark:border-purple-300/40 shadow-sm active:cursor-grabbing dark:bg-gray-900/85"
+    >
+        <div class="flex shrink-0 items-center gap-2" @mousedown.stop @click.stop>
+            <Dropdown align="start">
+                <template #trigger>
+                    <Button size="sm" :icon="currentChart?.icon" :text="currentChart?.title ?? config.chart" />
+                </template>
+                <DropdownMenu>
+                    <DropdownItem
+                        v-for="chart in charts"
+                        :key="chart.handle"
+                        :icon="chart.icon"
+                        :text="chart.title"
+                        @click="emit('update:chart', chart.handle)"
+                    />
+                </DropdownMenu>
+            </Dropdown>
+
+            <Button size="sm" icon="trash" icon-only :aria-label="__('Remove')" @click="emit('remove')" />
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/forms/summary/FieldPicker.vue b/resources/js/components/forms/summary/FieldPicker.vue
new file mode 100644
index 00000000000..4419003fd37
--- /dev/null
+++ b/resources/js/components/forms/summary/FieldPicker.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Button, Dropdown, DropdownItem, DropdownMenu } from '@ui';
+import type { MetaField } from './types';
+
+defineProps<{
+    fields: MetaField[];
+}>();
+
+const emit = defineEmits<{
+    picked: [field: MetaField];
+}>();
+</script>
+
+<template>
+    <Dropdown align="start">
+        <template #trigger>
+            <Button size="sm" :text="__('Add Chart')" icon="plus" :disabled="!fields.length" />
+        </template>
+        <DropdownMenu>
+            <DropdownItem
+                v-for="field in fields"
+                :key="field.handle"
+                :icon="field.icon"
+                :text="field.display"
+                @click="emit('picked', field)"
+            />
+        </DropdownMenu>
+    </Dropdown>
+</template>
diff --git a/resources/js/components/forms/summary/Summary.vue b/resources/js/components/forms/summary/Summary.vue
new file mode 100644
index 00000000000..3e7e03626aa
--- /dev/null
+++ b/resources/js/components/forms/summary/Summary.vue
@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import axios from 'axios';
+import { keys, preferences } from '@api';
+import { Button, Skeleton, ToggleGroup, ToggleItem, Widget } from '@ui';
+import { injectListingContext } from '@/components/ui/Listing/Listing.vue';
+import { SortableList } from '@/components/sortable/Sortable.js';
+import { clone, utf8btoa } from '@/bootstrap/globals.js';
+import { useFieldNumberingPreference } from '@/composables/forms/field-numbering';
+import FieldNumberingToggle from '@/components/forms/FieldNumberingToggle.vue';
+import ChartWidget from './ChartWidget.vue';
+import EditChrome from './EditChrome.vue';
+import FieldPicker from './FieldPicker.vue';
+import type { ChartConfig, MetaChart, MetaField, Summary, SummaryField } from './types';
+import { ChartMetric } from './types';
+
+interface SummaryWidget {
+    id: string;
+    config: ChartConfig | null;
+    field: SummaryField | null;
+}
+
+const props = withDefaults(
+    defineProps<{
+        form: string;
+        summaryUrl: string;
+        chartsUpdateUrl: string;
+        canEdit?: boolean;
+    }>(),
+    {
+        canEdit: false,
+    },
+);
+
+let abortController: AbortController | null = null;
+let saveBinding: { destroy: () => void } | null = null;
+
+const { showFieldNumbers } = useFieldNumberingPreference();
+const { activeFilters, searchQuery, preferencesPrefix } = injectListingContext();
+
+const summary = ref<Summary | null>(null);
+const editing = ref<boolean>(false);
+const draftCharts = ref<ChartConfig[]>([]);
+const saving = ref<boolean>(false);
+const isDragging = ref<boolean>(false);
+const metric = ref<ChartMetric>(preferences.get(`${preferencesPrefix.value}.summary.chart_metric`, ChartMetric.Percent));
+
+const sortableOptions = {
+    swapAnimation: {
+        duration: 220,
+        easingFunction: 'cubic-bezier(0.22, 1, 0.36, 1)',
+        horizontal: true,
+        vertical: true,
+    },
+    mirror: {
+        constrainDimensions: true,
+        appendTo: 'body',
+    },
+};
+
+const availableCharts = computed<MetaChart[]>(() => summary.value?.meta?.charts ?? []);
+const chartableFields = computed<MetaField[]>(() => summary.value?.meta?.fields ?? []);
+
+const addableFields = computed<MetaField[]>(() => {
+    const used = draftCharts.value.map((item) => item.field);
+
+    return chartableFields.value.filter((field) => !used.includes(field.handle));
+});
+
+const widgets = computed<SummaryWidget[]>(() => {
+    if (!editing.value) {
+        return (summary.value?.fields ?? []).map((field) => ({
+            id: field.handle,
+            config: null,
+            field,
+        }));
+    }
+
+    return draftCharts.value.map((item) => ({
+        id: item.field,
+        config: item,
+        field: draftField(item),
+    }));
+});
+
+function chartableField(handle: string): MetaField | undefined {
+    return chartableFields.value.find((field) => field.handle === handle);
+}
+
+function draftField(config: ChartConfig): SummaryField | null {
+    const field = summary.value?.fields.find((field) => field.handle === config.field);
+
+    if (!field) {
+        return null;
+    }
+
+    const chart = availableCharts.value.find((chart) => chart.handle === config.chart);
+
+    if (!chart || chart.handle === field.chart.handle) {
+        return field;
+    }
+
+    return {
+        ...field,
+        chart: {
+            ...field.chart,
+            handle: chart.handle,
+            component: chart.component
+        },
+    };
+}
+
+function parameters(): object {
+    const params = {};
+
+    if (searchQuery.value) params.search = searchQuery.value;
+    if (Object.keys(activeFilters.value).length) params.filters = utf8btoa(JSON.stringify(activeFilters.value));
+
+    return params;
+}
+
+async function fetchSummary() {
+    abortController?.abort();
+    abortController = new AbortController();
+
+    try {
+        const response = await axios.get(props.summaryUrl, {
+            params: parameters(),
+            signal: abortController.signal,
+        });
+        summary.value = response.data;
+    } catch (error) {
+        if (!axios.isCancel(error)) {
+            Statamic.$toast.error(error?.response?.data?.message ?? __('Something went wrong'));
+        }
+    }
+}
+
+function startEditing() {
+    draftCharts.value = (summary.value?.fields ?? []).map((field) => ({
+        field: field.handle,
+        chart: field.chart.handle,
+    }));
+
+    editing.value = true;
+}
+
+function cancelEditing() {
+    editing.value = false;
+    draftCharts.value = [];
+}
+
+const fieldPicked = (field: MetaField) => draftCharts.value.push({ field: field.handle, chart: field.default_chart });
+
+const setChart = (index: number, chart: string) => draftCharts.value.splice(index, 1, { ...draftCharts.value[index], chart });
+
+const removeChart = (index: number) => draftCharts.value.splice(index, 1);
+
+function onSort(sortedWidgets: SummaryWidget[]) {
+    if (!editing.value) return;
+
+    draftCharts.value = sortedWidgets.map((widget) => clone(widget.config!));
+}
+
+async function save() {
+    if (saving.value) return;
+
+    saving.value = true;
+
+    try {
+        await axios.patch(props.chartsUpdateUrl, { charts: draftCharts.value });
+        editing.value = false;
+        Statamic.$toast.success(__('Saved'));
+        await fetchSummary();
+    } catch (error) {
+        Statamic.$toast.error(error?.response?.data?.message ?? __('Something went wrong'));
+    } finally {
+        saving.value = false;
+    }
+}
+
+watch(editing, (editing): void => {
+    saveBinding?.destroy();
+    saveBinding = null;
+
+    if (editing) {
+        saveBinding = keys.bindGlobal(['mod+s'], (e: KeyboardEvent) => {
+            e.preventDefault();
+            save();
+        });
+    }
+});
+
+watch([activeFilters, searchQuery], fetchSummary, { deep: true, immediate: true });
+
+watch(metric, (metric: ChartMetric) => preferences.set(`${preferencesPrefix.value}.summary.chart_metric`, metric));
+
+onBeforeUnmount(() => saveBinding?.destroy());
+
+defineExpose({ refresh: fetchSummary });
+</script>
+
+<template>
+    <div data-submission-summary class="mt-3 pb-8">
+        <div class="flex w-full items-center gap-2 mb-3">
+            <FieldNumberingToggle />
+            <ToggleGroup v-model="metric" size="xs">
+                <ToggleItem :value="ChartMetric.Percent" label="%" :aria-label="__('Percentage')" v-tooltip="__('Percentage')" />
+                <ToggleItem
+                    :value="ChartMetric.Count"
+                    icon="layout-list-small"
+                    :aria-label="__('Response count')"
+                    v-tooltip="__('Response count')"
+                />
+            </ToggleGroup>
+            <p v-if="summary" class="ms-1 text-sm text-gray-500 dark:text-gray-500">
+                {{ __(':count responses', { count: $number.format(summary.total) }) }}
+            </p>
+            <div class="ms-auto flex items-center gap-2">
+                <template v-if="editing">
+                    <FieldPicker :fields="addableFields" @picked="fieldPicked" />
+                    <Button size="sm" :text="__('Cancel')" @click="cancelEditing" />
+                    <Button size="sm" :text="__('Save')" variant="primary" :disabled="saving" @click="save" />
+                </template>
+                <Button
+                    v-else-if="canEdit && summary"
+                    size="sm"
+                    :text="__('Customize Charts')"
+                    icon="edit"
+                    @click="startEditing"
+                />
+            </div>
+        </div>
+
+        <div v-if="!summary" class="@container/widgets widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
+            <div v-for="n in 4" :key="n" class="w-full min-h-61 min-[1100px]:w-1/2 px-3">
+                <Skeleton class="h-61 w-full rounded-xl" />
+            </div>
+        </div>
+
+        <SortableList
+            v-else
+            :model-value="widgets"
+            item-class="summary-chart-sortable"
+            handle-class="summary-chart-handle"
+            :disabled="!editing"
+            :animate="true"
+            :constrain-dimensions="true"
+            :distance="8"
+            :options="sortableOptions"
+            @dragstart="isDragging = true"
+            @dragend="isDragging = false"
+            @update:model-value="onSort"
+        >
+            <div class="@container/widgets widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
+                <div
+                    v-for="(widget, index) in widgets"
+                    :key="widget.id"
+                    class="summary-chart-sortable w-full min-h-61 min-[1100px]:w-1/2 px-3"
+                    :class="{ 'starting-style-transition': !editing && !isDragging }"
+                >
+                    <ChartWidget
+                        v-if="widget.field"
+                        :field="widget.field"
+                        :metric="metric"
+                        :show-number="showFieldNumbers"
+                    >
+                        <template v-if="editing" #chrome>
+                            <EditChrome
+                                class="rounded-b-xl"
+                                :config="widget.config"
+                                :charts="availableCharts"
+                                @update:chart="setChart(index, $event)"
+                                @remove="removeChart(index)"
+                            />
+                        </template>
+                    </ChartWidget>
+                    <Widget
+                        v-else
+                        :title="chartableField(widget.config.field)?.display ?? widget.config.field"
+                        title-tag="h2"
+                        class="h-full"
+                        :icon="chartableField(widget.config.field)?.icon"
+                        icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                    >
+                        <div class="relative flex-1 overflow-hidden rounded-b-xl">
+                            <EditChrome
+                                class="rounded-b-xl"
+                                :config="widget.config"
+                                :charts="availableCharts"
+                                @update:chart="setChart(index, $event)"
+                                @remove="removeChart(index)"
+                            />
+                            <div class="flex h-full items-center justify-center">
+                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('statamic::messages.form_summary_save_to_see_chart') }}</p>
+                            </div>
+                        </div>
+                    </Widget>
+                </div>
+                <div
+                    v-if="!widgets.length"
+                    class="w-full mx-3 flex min-h-61 flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-gray-300 dark:border-gray-600"
+                >
+                    <p class="text-sm text-gray-500 dark:text-gray-400">
+                        {{ editing ? __('statamic::messages.form_summary_add_chart_instructions') : __('No charts to show.') }}
+                    </p>
+                    <FieldPicker v-if="editing" :fields="addableFields" @picked="fieldPicked" />
+                </div>
+            </div>
+        </SortableList>
+    </div>
+</template>
diff --git a/resources/js/components/forms/summary/insights/AverageInsight.vue b/resources/js/components/forms/summary/insights/AverageInsight.vue
new file mode 100644
index 00000000000..97162e6eda7
--- /dev/null
+++ b/resources/js/components/forms/summary/insights/AverageInsight.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ChartMetric } from '../types';
+
+defineProps<{
+    average: number | string;
+    prefix?: string;
+    suffix?: string;
+    metric?: ChartMetric;
+}>();
+</script>
+
+<template>
+    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+        <span class="text-xs font-semibold st-text-trim-cap tabular-nums">{{ prefix }}{{ average }}{{ suffix }}</span>
+        <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">{{ __('Average') }}</span>
+    </div>
+</template>
diff --git a/resources/js/components/forms/summary/insights/CheckedInsight.vue b/resources/js/components/forms/summary/insights/CheckedInsight.vue
new file mode 100644
index 00000000000..ffe91b20c40
--- /dev/null
+++ b/resources/js/components/forms/summary/insights/CheckedInsight.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Metric from '@/components/ui/Chart/Metric.vue';
+import type { ChartMetric } from '../types';
+
+withDefaults(
+    defineProps<{
+        count: number;
+        percent: number;
+        metric?: ChartMetric;
+    }>(),
+    {
+        metric: 'percent',
+    },
+);
+</script>
+
+<template>
+    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+        <Metric :metric :count :percent class="text-xs font-semibold st-text-trim-cap tabular-nums" />
+        <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">{{ __('statamic::messages.form_summary_checked_insight') }}</span>
+    </div>
+</template>
diff --git a/resources/js/components/forms/summary/insights/MinMaxInsight.vue b/resources/js/components/forms/summary/insights/MinMaxInsight.vue
new file mode 100644
index 00000000000..b303a2b72b7
--- /dev/null
+++ b/resources/js/components/forms/summary/insights/MinMaxInsight.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ChartMetric } from '../types';
+
+defineProps<{
+    min: number | string;
+    max: number | string;
+    prefix?: string;
+    suffix?: string;
+    metric?: ChartMetric;
+}>();
+</script>
+
+<template>
+    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+        <span class="text-xs font-semibold st-text-trim-cap tabular-nums">
+            {{ prefix }}{{ min }}{{ suffix }}–{{ prefix }}{{ max }}{{ suffix }}
+        </span>
+        <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">{{ __('Min–Max') }}</span>
+    </div>
+</template>
diff --git a/resources/js/components/forms/summary/insights/StarRatingInsight.vue b/resources/js/components/forms/summary/insights/StarRatingInsight.vue
new file mode 100644
index 00000000000..bcef3be69d1
--- /dev/null
+++ b/resources/js/components/forms/summary/insights/StarRatingInsight.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Icon } from '@ui';
+import type { ChartMetric } from '../types';
+
+defineProps<{
+    average: number;
+    total: number;
+    metric?: ChartMetric;
+}>();
+</script>
+
+<template>
+    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+        <Icon
+            v-for="star in total"
+            :key="star"
+            :name="star <= Math.round(average) ? 'star-filled' : 'star'"
+            class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300"
+        />
+        <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">
+            {{ __(':average/:total Average', { average, total }) }}
+        </span>
+    </div>
+</template>
diff --git a/resources/js/components/forms/summary/types.ts b/resources/js/components/forms/summary/types.ts
new file mode 100644
index 00000000000..01d8c36bdc4
--- /dev/null
+++ b/resources/js/components/forms/summary/types.ts
@@ -0,0 +1,74 @@
+export enum ChartMetric {
+    Percent = 'percent',
+    Count = 'count',
+}
+
+export interface ChartItem {
+    key: string;
+    label: string;
+    count: number;
+    percent: number;
+    rank?: number;
+    icon?: string;
+    image?: string;
+    badge?: string;
+    other?: boolean;
+    clickable?: boolean;
+}
+
+export interface ChartPayload {
+    handle: string;
+    component: string;
+    props: {
+        items: ChartItem[];
+        drilldown?: {
+            items: ChartItem[];
+            [prop: string]: unknown;
+        };
+    };
+}
+
+export interface InsightPayload {
+    handle: string;
+    component: string;
+    props: Record<string, unknown>;
+}
+
+export interface SummaryField {
+    handle: string;
+    display: string;
+    icon: string;
+    fieldtype: string;
+    number: number | null;
+    responses: number;
+    chart: ChartPayload;
+    insights: InsightPayload[];
+}
+
+export interface ChartConfig {
+    field: string;
+    chart: string;
+}
+
+export interface MetaChart {
+    handle: string;
+    title: string;
+    icon: string | null;
+    component: string;
+}
+
+export interface MetaField {
+    handle: string;
+    display: string;
+    icon: string;
+    default_chart: string;
+}
+
+export interface Summary {
+    total: number;
+    fields: SummaryField[];
+    meta: {
+        charts?: MetaChart[];
+        fields?: MetaField[];
+    };
+}
diff --git a/resources/js/components/themes/index.ts b/resources/js/components/themes/index.ts
index 8659dcafa9f..69230413174 100644
--- a/resources/js/components/themes/index.ts
+++ b/resources/js/components/themes/index.ts
@@ -244,6 +244,18 @@ export const colors = [
     { name: 'switch-bg', label: 'Switch Background', },
     { name: 'success', label: 'Success', },
     { name: 'danger', label: 'Danger', },
+    { name: 'chart-1', label: 'Chart 1', },
+    { name: 'chart-2', label: 'Chart 2', },
+    { name: 'chart-3', label: 'Chart 3', },
+    { name: 'chart-4', label: 'Chart 4', },
+    { name: 'chart-1-label-bg', label: 'Chart 1 Label', },
+    { name: 'chart-2-label-bg', label: 'Chart 2 Label', },
+    { name: 'chart-3-label-bg', label: 'Chart 3 Label', },
+    { name: 'chart-4-label-bg', label: 'Chart 4 Label', },
+    { name: 'chart-1-legend', label: 'Chart 1 Legend', },
+    { name: 'chart-2-legend', label: 'Chart 2 Legend', },
+    { name: 'chart-3-legend', label: 'Chart 3 Legend', },
+    { name: 'chart-4-legend', label: 'Chart 4 Legend', },
     { name: 'gray-50', label: 'Gray 50', },
     { name: 'gray-100', label: 'Gray 100', },
     { name: 'gray-150', label: 'Gray 150', },
diff --git a/resources/js/components/themes/types.ts b/resources/js/components/themes/types.ts
index 7899532a99b..193bf730885 100644
--- a/resources/js/components/themes/types.ts
+++ b/resources/js/components/themes/types.ts
@@ -16,6 +16,18 @@ export type ColorVariableName =
     | 'ui-accent-bg'
     | 'ui-accent-text'
     | 'switch-bg'
+    | 'chart-1'
+    | 'chart-2'
+    | 'chart-3'
+    | 'chart-4'
+    | 'chart-1-label-bg'
+    | 'chart-2-label-bg'
+    | 'chart-3-label-bg'
+    | 'chart-4-label-bg'
+    | 'chart-1-legend'
+    | 'chart-2-legend'
+    | 'chart-3-legend'
+    | 'chart-4-legend'
     | 'gray-50'
     | 'gray-100'
     | 'gray-150'
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 64294008ba9..f209fa145a7 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -36,6 +36,8 @@ const props = defineProps({
     type: { type: String, default: 'button' },
     /** Controls the appearance of the button. Options: `default`, `primary`, `danger`, `filled`, `ghost`, `ghost-pressed`, `subtle`, `pressed` */
     variant: { type: String, default: 'default' },
+    /** Additional classes for the inner content wrapper around the default slot or text */
+    contentClass: { type: String, default: null },
 });
 
 const attrs = useAttrs();
@@ -116,6 +118,12 @@ const buttonClasses = computed(() => {
     return twMerge(classes, attrs.class);
 });
 
+const contentClasses = computed(() => twMerge(
+    'flex content-center items-center',
+    props.size !== 'xs' && props.size !== 'sm' ? 'st-text-trim-start' : null,
+    props.contentClass,
+));
+
 const restAttrs = computed(() => {
     const { class: _, ...rest } = attrs;
     return rest;
@@ -136,7 +144,7 @@ const restAttrs = computed(() => {
         <Icon v-if="icon" :name="icon" />
         <Icon v-if="loading" name="loading" :size />
 
-        <div :class="{ 'st-text-trim-start': size !== 'xs' && size !== 'sm' }" class="flex content-center items-center">
+        <div :class="contentClasses">
             <slot v-if="hasDefaultSlot" />
             <template v-else>{{ text }}</template>
         </div>
diff --git a/resources/js/components/ui/Chart/HorizontalBarChart.vue b/resources/js/components/ui/Chart/HorizontalBarChart.vue
new file mode 100644
index 00000000000..1bc3b3c2284
--- /dev/null
+++ b/resources/js/components/ui/Chart/HorizontalBarChart.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import Icon from '../Icon/Icon.vue';
+import Metric from './Metric.vue';
+
+type Item = {
+    key?: string;
+    label: string;
+    count: number;
+    percent: number;
+    icon?: string;
+}
+
+const props = withDefaults(
+    defineProps<{
+        /** Accessible label summarizing the chart's results. */
+        accessibleLabel: string;
+        /** The chart rows. Each item supports `label`, `percent`, `count`, and `icon`. */
+        items?: Item[];
+        /** Whether values are displayed as percentages or response counts. */
+        metric?: 'percent' | 'count';
+        /** Places the metric before or after each bar. */
+        metricPosition?: 'start' | 'end';
+        /** Places the marker before or after the label. */
+        markerPosition?: 'before-label' | 'after-label';
+        /** Whether to show item labels. */
+        showLabel?: boolean;
+        /** Whether to show a marker before each label. */
+        showMarker?: boolean;
+    }>(),
+    {
+        items: () => [],
+        metric: 'percent',
+        metricPosition: 'start',
+        markerPosition: 'before-label',
+        showLabel: true,
+        showMarker: true,
+    },
+);
+
+const columns = computed<string>(() => {
+    const columns = [];
+
+    if (props.metricPosition === 'start') columns.push('auto');
+    if (props.showMarker && props.markerPosition === 'before-label') columns.push('auto');
+    if (props.showLabel) columns.push('max-content');
+    if (props.showMarker && props.markerPosition === 'after-label') columns.push('auto');
+
+    columns.push('1fr');
+
+    if (props.metricPosition === 'end') columns.push('auto');
+
+    return columns.join(' ');
+});
+
+const chartClasses = ['bg-chart-1', 'bg-chart-2', 'bg-chart-3', 'bg-chart-4-legend'];
+const chartClass = (index: number): string => chartClasses[Math.min(index, chartClasses.length - 1)];
+</script>
+
+<template>
+    <figure class="grid p-6" role="img" :aria-label="accessibleLabel" data-ui-horizontal-bar-chart>
+        <slot name="summary" />
+        <ol :style="{ gridTemplateColumns: columns }" :class="{ 'pt-4': $slots.summary }" class="grid items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0" aria-hidden="true">
+            <li v-for="(item, index) in items" :key="item.key ?? item.label" class="contents">
+                <Metric
+                    v-if="metricPosition === 'start'"
+                    :metric
+                    :percent="item.percent"
+                    :count="item.count"
+                    class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50"
+                />
+                <span v-if="showMarker && markerPosition === 'before-label'" class="flex items-center gap-2">
+                    <slot name="marker" :item="item" :index="index">
+                        <Icon v-if="item.icon" :name="item.icon" :class="`summary-bar-chart__icon-stroke--${index + 1}`" class="summary-bar-chart__icon-stroke size-3.5 shrink-0" />
+                        <span v-else :class="chartClass(index)" class="size-2.5 rounded-xs" />
+                    </slot>
+                </span>
+                <span v-if="showLabel" class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">{{ item.label }}</span>
+                <span v-if="showMarker && markerPosition === 'after-label'" class="flex items-center gap-2">
+                    <slot name="marker" :item="item" :index="index">
+                        <Icon v-if="item.icon" :name="item.icon" :class="`summary-bar-chart__icon-stroke--${index + 1}`" class="summary-bar-chart__icon-stroke size-3.5 shrink-0" />
+                        <span v-else :class="chartClass(index)" class="size-2.5 rounded-xs" />
+                    </slot>
+                </span>
+                <slot name="bar" :item="item" :index="index" :width="`${item.percent}%`">
+                    <div
+                        :class="chartClass(index)"
+                        :style="{ width: `${item.percent}%` }"
+                        class="summary-bar-chart__fill h-2.5 rounded-full"
+                    />
+                </slot>
+                <Metric
+                    v-if="metricPosition === 'end'"
+                    :metric
+                    :percent="item.percent"
+                    :count="item.count"
+                    class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400"
+                />
+            </li>
+        </ol>
+    </figure>
+</template>
diff --git a/resources/js/components/ui/Chart/HorizontalLollipopChart.vue b/resources/js/components/ui/Chart/HorizontalLollipopChart.vue
new file mode 100644
index 00000000000..0302c657cc6
--- /dev/null
+++ b/resources/js/components/ui/Chart/HorizontalLollipopChart.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import Metric from './Metric.vue';
+
+type Item = {
+    key?: string;
+    label: string;
+    count: number;
+    percent: number;
+    rank?: number;
+}
+
+const props = withDefaults(
+    defineProps<{
+        /** Accessible label summarizing the chart's results. */
+        accessibleLabel: string;
+        /** The chart rows. Each item supports `label`, `percent`, `count`, and `rank`. */
+        items?: Item[];
+        /** Whether values are displayed as percentages or response counts. */
+        metric?: 'percent' | 'count';
+        /** Whether to show a marker before each label. */
+        showMarker?: boolean;
+    }>(),
+    {
+        items: () => [],
+        metric: 'percent',
+        showMarker: true,
+    },
+);
+
+const columns = computed<string>(() => props.showMarker
+    ? 'grid-cols-[auto_auto_max-content_1fr]'
+    : 'grid-cols-[auto_max-content_1fr]');
+
+const chartClasses = ['bg-chart-1', 'bg-chart-2', 'bg-chart-3', 'bg-chart-4-legend'];
+const chartClass = (index: number): string => chartClasses[Math.min(index, chartClasses.length - 1)];
+</script>
+
+<template>
+    <figure class="grid p-6" role="img" :aria-label="accessibleLabel" data-ui-horizontal-lollipop-chart>
+        <ol :class="columns" class="grid items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0" aria-hidden="true">
+            <li v-for="(item, index) in items" :key="item.key ?? item.label" class="contents">
+                <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50">
+                    {{ item.rank ?? index + 1 }}
+                </span>
+                <template v-if="showMarker">
+                    <slot name="marker" :item="item" :index="index">
+                        <span :class="chartClass(index)" class="size-2.5 rounded-xs" />
+                    </slot>
+                </template>
+                <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">{{ item.label }}</span>
+                <div class="flex items-center gap-1">
+                    <div :style="{ width: `${item.percent}%` }" class="h-px bg-gray-200 dark:bg-gray-600" />
+                    <slot name="endpoint" :item="item" :index="index">
+                        <span :class="chartClass(index)" class="size-2 rounded-full" />
+                    </slot>
+                    <Metric
+                        :metric
+                        :percent="item.percent"
+                        :count="item.count"
+                        class="min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50"
+                    />
+                </div>
+            </li>
+        </ol>
+    </figure>
+</template>
diff --git a/resources/js/components/ui/Chart/Metric.vue b/resources/js/components/ui/Chart/Metric.vue
new file mode 100644
index 00000000000..7014fb5a17d
--- /dev/null
+++ b/resources/js/components/ui/Chart/Metric.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+    defineProps<{
+        count?: number;
+        metric?: 'percent' | 'count';
+        percent?: number;
+    }>(),
+    {
+        count: 0,
+        metric: 'percent',
+        percent: 0,
+    },
+);
+
+const value = computed<string | number>(() => (props.metric === 'count' ? props.count : `${props.percent}%`));
+</script>
+
+<template>
+    <span data-ui-chart-metric>{{ value }}</span>
+</template>
diff --git a/resources/js/components/ui/Chart/PieChart.vue b/resources/js/components/ui/Chart/PieChart.vue
new file mode 100644
index 00000000000..7039270c80d
--- /dev/null
+++ b/resources/js/components/ui/Chart/PieChart.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import Icon from '../Icon/Icon.vue';
+import Metric from './Metric.vue';
+
+type Item = {
+    key?: string;
+    label: string;
+    count: number;
+    percent: number;
+    clickable?: boolean;
+    icon?: string;
+    image?: string;
+    badge?: string;
+}
+
+const props = withDefaults(
+    defineProps<{
+        /** Accessible label summarizing the chart's results. */
+        accessibleLabel: string;
+        /** Highlights one segment while muting the others. */
+        focusedIndex?: number | null;
+        /** Up to four legend items. Each item supports `label`, `percent`, `count`, `clickable`, `icon`, `image`, and `badge`. */
+        items?: Item[];
+        /** Whether values are displayed as percentages or response counts. */
+        metric?: 'percent' | 'count';
+        /** Optional segment data when the legend describes a focused segment. */
+        segments?: Item[] | null;
+    }>(),
+    {
+        focusedIndex: null,
+        items: () => [],
+        metric: 'percent',
+        segments: null,
+    },
+);
+
+const emit = defineEmits<{
+    select: [item: Item, index: number];
+}>();
+
+const slices = computed<Item[]>(() => props.segments ?? props.items);
+const showsImageSlices = computed<boolean>(() => slices.value.length > 0 && slices.value.length <= 2 && slices.value.every((item) => item.image));
+
+const slicePercent = (index: number): number => slices.value[index]?.percent ?? 0;
+
+const sliceColor = (index: number): string =>
+    props.focusedIndex === null || props.focusedIndex === index
+        ? `var(--color-chart-${index + 1})`
+        : `hsl(from var(--color-chart-${index + 1}) h s l / 0.1)`;
+
+const chartStyle = computed(() => ({
+    '--1': slicePercent(0),
+    '--2': slicePercent(1),
+    '--3': slicePercent(2),
+    '--4': slicePercent(3),
+    '--slice-1-color': sliceColor(0),
+    '--slice-2-color': sliceColor(1),
+    '--slice-3-color': sliceColor(2),
+    '--slice-4-color': sliceColor(3),
+}));
+</script>
+
+<template>
+    <figure class="pie-chart-figure" data-ui-pie-chart>
+        <div
+            v-if="showsImageSlices"
+            :style="chartStyle"
+            class="image-pie-chart"
+            role="img"
+            :aria-label="accessibleLabel"
+        >
+            <div class="image-pie-chart__disc" aria-hidden="true">
+                <span
+                    v-for="(item, index) in slices"
+                    :key="item.key ?? item.label"
+                    :class="`image-pie-chart__slice--${index + 1}`"
+                    :style="{ '--image': `url(${item.image})` }"
+                    class="image-pie-chart__slice"
+                />
+            </div>
+            <Metric
+                v-for="(item, index) in slices"
+                :key="item.key ?? item.label"
+                :metric
+                :percent="item.percent"
+                :count="item.count"
+                :class="`image-pie-chart__label--${index + 1}`"
+                class="image-pie-chart__label"
+                aria-hidden="true"
+            />
+        </div>
+        <div
+            v-else
+            :class="{ 'pie-chart--focused': focusedIndex !== null }"
+            :style="chartStyle"
+            class="pie-chart"
+            role="img"
+            :aria-label="accessibleLabel"
+        >
+            <div class="pie-chart__disc" aria-hidden="true" />
+            <Metric
+                v-for="(item, index) in slices"
+                :key="item.key ?? item.label"
+                :metric
+                :percent="item.percent"
+                :count="item.count"
+                :class="`pie-chart__label--${index + 1}`"
+                class="pie-chart__label"
+                :data-focused="focusedIndex === index ? '' : undefined"
+                aria-hidden="true"
+            />
+        </div>
+        <figcaption class="pie-chart-legend">
+            <ol class="pie-chart-legend__list">
+                <li v-for="(item, index) in items" :key="item.key ?? item.label" class="pie-chart-legend__item">
+                    <component
+                        :is="item.clickable ? 'button' : 'span'"
+                        :type="item.clickable ? 'button' : undefined"
+                        :class="{ 'pie-chart-legend__link': item.clickable }"
+                        :aria-hidden="item.clickable ? undefined : true"
+                        class="contents"
+                        @click="item.clickable && emit('select', item, index)"
+                    >
+                        <Metric :metric :percent="item.percent" :count="item.count" class="pie-chart-legend__value" />
+                        <slot name="marker" :item="item" :index="index">
+                            <template v-if="item.image">
+                                <img class="size-10 shrink-0 object-cover rounded-full" :src="item.image" alt="" />
+                                <span v-if="item.badge" class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">{{ item.badge }}</span>
+                            </template>
+                            <Icon v-else-if="item.icon" :name="item.icon" :class="`summary-bar-chart__icon-stroke--${index + 1}`" class="summary-bar-chart__icon-stroke size-3.5 shrink-0" />
+                            <span v-else :class="`pie-chart-legend__swatch--${focusedIndex === null ? index + 1 : focusedIndex + 1}`" class="pie-chart-legend__swatch" />
+                        </slot>
+                        <span>{{ item.label }}</span>
+                    </component>
+                </li>
+            </ol>
+        </figcaption>
+    </figure>
+</template>
diff --git a/resources/js/components/ui/Chart/VerticalBarChart.vue b/resources/js/components/ui/Chart/VerticalBarChart.vue
new file mode 100644
index 00000000000..5b836091abb
--- /dev/null
+++ b/resources/js/components/ui/Chart/VerticalBarChart.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import Metric from './Metric.vue';
+
+type Item = {
+    key?: string;
+    label: string;
+    count: number;
+    percent: number;
+}
+
+const props = withDefaults(
+    defineProps<{
+        /** Accessible label summarizing the chart's results. */
+        accessibleLabel: string;
+        /** The chart columns. Each item supports `label`, `percent`, and `count`. */
+        items?: Item[];
+        /** The largest value represented by a full-height column. */
+        maxValue?: number | null;
+        /** Whether values are displayed as percentages or response counts. */
+        metric?: 'percent' | 'count';
+    }>(),
+    {
+        items: () => [],
+        maxValue: null,
+        metric: 'percent',
+    },
+);
+
+const height = (item: Item): string => `${(item.percent / maximum.value) * 100}%`;
+
+const maximum = computed<number>(() => props.maxValue ?? Math.max(...props.items.map((item) => item.percent), 1));
+</script>
+
+<template>
+    <figure class="vertical-bar-chart-figure" role="img" :aria-label="accessibleLabel" data-ui-vertical-bar-chart>
+        <div v-if="$slots.summary" aria-hidden="true">
+            <slot name="summary" />
+        </div>
+        <ol class="vertical-bar-chart" aria-hidden="true">
+            <li v-for="item in items" :key="item.key ?? item.label" class="vertical-bar-chart__bar">
+                <div class="vertical-bar-chart__plot">
+                    <Metric
+                        :metric
+                        :percent="item.percent"
+                        :count="item.count"
+                        class="vertical-bar-chart__value"
+                    />
+                    <div :style="{ flexBasis: height(item) }" class="vertical-bar-chart__fill" />
+                </div>
+                <span class="vertical-bar-chart__scale-label">{{ item.label }}</span>
+            </li>
+        </ol>
+    </figure>
+</template>
diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 5b6a15edc2a..a347c7cd448 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -6,7 +6,7 @@ import {
     PanelHeader,
     Card,
     Heading,
-	Stack,
+    Stack,
 } from '@ui';
 import { injectListingContext } from '../Listing/Listing.vue';
 import { dateFormatter } from '@/api';
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 6897d950d36..624fe033776 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -594,9 +594,9 @@ function autoApplyFilters() {
 }
 
 function reordered(order) {
-	if (! props.items) {
-		items.value = order;
-	}
+    if (! props.items) {
+        items.value = order;
+    }
 
     emit('reordered', order);
 }
@@ -732,7 +732,17 @@ autoApplyState();
                 <ui-skeleton class="h-48 w-full" />
             </div>
         </slot>
-        <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
+        <slot
+            v-if="!initializing"
+            :items
+            :is-column-visible
+            :loading
+            :show-presets
+            :allow-search
+            :allow-customizing-columns
+            :has-filters
+            :meta
+        >
             <Presets v-if="showPresets" />
             <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
                 <div class="flex flex-1 items-center gap-2 sm:gap-3 overflow-x-auto -ms-1 ps-1 py-1">
diff --git a/resources/js/components/ui/Toggle/Group.vue b/resources/js/components/ui/Toggle/Group.vue
index 2e217ced7e3..7eb62813b56 100644
--- a/resources/js/components/ui/Toggle/Group.vue
+++ b/resources/js/components/ui/Toggle/Group.vue
@@ -18,6 +18,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue']);
 
 const toggleState = ref(props.modelValue ?? (props.multiple ? [] : null));
+const hasInteracted = ref(false);
 
 watch(
     () => props.modelValue,
@@ -58,6 +59,14 @@ function updateModelValue(value) {
         emit('update:modelValue', value);
     }
 }
+
+function markUserInteraction(event) {
+    if (event.type === 'keydown' && ! ['Enter', ' ', 'Spacebar'].includes(event.key)) {
+        return;
+    }
+
+    hasInteracted.value = true;
+}
 </script>
 
 <template>
@@ -65,7 +74,10 @@ function updateModelValue(value) {
         :type="multiple ? 'multiple' : 'single'"
         :class="groupClasses"
         data-ui-toggle-group
+        :data-ui-toggle-group-interacted="hasInteracted ? '' : null"
         :model-value="toggleState"
+        @pointerdown="markUserInteraction"
+        @keydown="markUserInteraction"
         @update:model-value="updateModelValue"
     >
         <slot />
diff --git a/resources/js/components/ui/Widget.vue b/resources/js/components/ui/Widget.vue
index f4c9e791ed3..dcaff76f707 100644
--- a/resources/js/components/ui/Widget.vue
+++ b/resources/js/components/ui/Widget.vue
@@ -6,6 +6,8 @@ import { useSlots, computed } from 'vue';
 const props = defineProps({
     title: {type: String },
     icon: { type: String },
+    iconClass: { type: String, default: 'hidden! size-5 text-gray-500 @xs/widget:block!' },
+    titleTag: { type: String, default: 'span' },
     href: { type: String },
 });
 
@@ -19,8 +21,8 @@ const hasHeader = computed(() => Boolean(props.title || props.icon || slots.acti
         <div class="flex h-full min-h-54 flex-col">
             <header v-if="hasHeader" class="flex items-center min-h-[49px] justify-between border-b border-gray-200 px-4.5 py-2 dark:border-gray-700">
                 <component :is="href ? Link : 'div'" class="flex items-center gap-2 sm:gap-3" :href>
-                    <Icon v-if="icon" :name="icon" class="hidden! size-5 text-gray-500 @xs/widget:block!" />
-                    <span v-if="title" v-text="title" />
+                    <Icon v-if="icon" :name="icon" :class="iconClass" :aria-hidden="title ? true : undefined" />
+                    <component :is="titleTag" v-if="title" class="m-0 font-[inherit] text-inherit text-[0.97rem]" v-text="title" />
                 </component>
                 <div class="flex items-center gap-4 -mr-2.5 starting-style-transition">
                     <slot name="actions" />
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 504fc178fc1..db26e6d2dd4 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -9,6 +9,10 @@ export { default as CardList } from './Card/List.vue';
 export { default as CardListItem } from './Card/ListItem.vue';
 export { default as CardPanel } from './Card/Panel.vue';
 export { default as CharacterCounter } from './CharacterCounter.vue';
+export { default as HorizontalBarChart } from './Chart/HorizontalBarChart.vue';
+export { default as HorizontalLollipopChart } from './Chart/HorizontalLollipopChart.vue';
+export { default as PieChart } from './Chart/PieChart.vue';
+export { default as VerticalBarChart } from './Chart/VerticalBarChart.vue';
 export { default as Checkbox } from './Checkbox/Item.vue';
 export { default as CheckboxGroup } from './Checkbox/Group.vue';
 export { default as ChoiceGrid } from './ChoiceGrid.vue';
diff --git a/resources/js/pages/forms/submissions/Index.vue b/resources/js/pages/forms/submissions/Index.vue
index 71dcda38e12..d567e9b0c8d 100644
--- a/resources/js/pages/forms/submissions/Index.vue
+++ b/resources/js/pages/forms/submissions/Index.vue
@@ -1,14 +1,25 @@
-<script setup>
-import { ref, computed } from 'vue';
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
 import axios from 'axios';
 import Head from '@/pages/layout/Head.vue';
-import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem } from '@ui';
+import {
+    Button,
+    CommandPaletteItem,
+    Dropdown,
+    DropdownItem,
+    DropdownMenu,
+    Header,
+    Modal,
+    Radio,
+    RadioGroup,
+} from '@ui';
 import FormStatusIndicator from '@/components/forms/FormStatusIndicator.vue';
 import ResourceDeleter from '@/components/ResourceDeleter.vue';
 import FormSubmissionListing from '@/components/forms/SubmissionListing.vue';
 import Layout from '@/pages/layout/Layout.vue';
 import PanelLayout from '@/pages/layout/PanelLayout.vue';
 import FormsLayout from '@/pages/forms/Layout.vue';
+import { preferences } from '@api';
 
 defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
 
@@ -19,6 +30,8 @@ const props = defineProps([
     'filters',
     'actionUrl',
     'generateFakeSubmissionUrl',
+    'summaryUrl',
+    'chartsUpdateUrl',
     'exporters',
     'redirectUrl',
 ]);
@@ -230,24 +243,27 @@ function exportSubmissions() {
         <FormSubmissionListing
             ref="submissionListing"
             :form="form.handle"
-            :action-url="actionUrl"
+            :action-url
+            :summary-url
+            :charts-update-url
             sort-column="datestamp"
             sort-direction="desc"
-            :columns="columns"
-            :filters="filters"
+            :columns
+            :filters
+            :can
         />
 
         <Modal :open="exportModalOpen" @update:open="exportModalOpen = $event" :title="__('Export Submissions')">
             <div class="space-y-4">
                 <div>
-                    <label class="text-sm font-medium mb-1.5 block">{{ __('Format') }}</label>
+                    <label class="block mb-1.5 text-sm font-medium">{{ __('Format') }}</label>
                     <RadioGroup v-model="exportFormat" inline>
                         <Radio v-for="format in exporters" :key="format.handle" :value="format.handle" :label="format.title" />
                     </RadioGroup>
                 </div>
 
                 <div>
-                    <label class="text-sm font-medium mb-1.5 block">{{ __('Submissions') }}</label>
+                    <label class="block mb-1.5 text-sm font-medium">{{ __('Submissions') }}</label>
                     <RadioGroup v-model="exportScope">
                         <Radio value="all" :label="__('All Submissions')" />
                         <Radio value="filtered" :label="__('Filtered Submissions')" :description="__('statamic::messages.form_export_filtered_description')" :disabled="!hasFilteredScope" />
diff --git a/resources/js/stories/HorizontalBarChart.stories.ts b/resources/js/stories/HorizontalBarChart.stories.ts
new file mode 100644
index 00000000000..f92c6674a14
--- /dev/null
+++ b/resources/js/stories/HorizontalBarChart.stories.ts
@@ -0,0 +1,130 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {expect, within} from 'storybook/test';
+import {HorizontalBarChart, Icon, Widget} from '@ui';
+
+const items = [
+    {label: 'Yes', percent: 55, count: 136},
+    {label: 'No', percent: 35, count: 87},
+    {label: 'Maybe', percent: 10, count: 25},
+];
+
+const meta = {
+    title: 'Charts/HorizontalBarChart',
+    component: HorizontalBarChart,
+    args: {
+        accessibleLabel: 'Responses: Yes 55%, No 35%, Maybe 10%',
+        items,
+    },
+} satisfies Meta<typeof HorizontalBarChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<HorizontalBarChart
+    accessible-label="Responses: Yes 55%, No 35%, Maybe 10%"
+    :items="items"
+/>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {docs: {source: {code: defaultCode}}},
+    render: (args) => ({
+        components: {HorizontalBarChart},
+        setup: () => ({args}),
+        template: `<HorizontalBarChart v-bind="args" />`,
+    }),
+};
+
+export const _Counts: Story = {
+    tags: ['!dev'],
+    args: {metric: 'count'},
+};
+
+const metricAtEndCode = `
+<HorizontalBarChart
+    :items="items"
+    accessible-label="Responses: Yes 55%, No 35%, Maybe 10%"
+    metric-position="end"
+    :show-marker="false"
+/>
+`;
+
+export const _MetricAtEnd: Story = {
+    tags: ['!dev'],
+    args: {
+        metricPosition: 'end',
+        showMarker: false,
+    },
+    parameters: {docs: {source: {code: metricAtEndCode}}},
+};
+
+const customMarkersCode = `
+<HorizontalBarChart :items="items" accessible-label="Attendance responses">
+    <template #marker="{ item }">
+        <Icon :name="item.icon" class="size-4" />
+    </template>
+</HorizontalBarChart>
+`;
+
+export const _CustomMarkers: Story = {
+    tags: ['!dev'],
+    args: {
+        items: [
+            {...items[0], icon: 'checkmark-circle-filled'},
+            {...items[1], icon: 'delete-circle-filled'},
+            {...items[2], icon: 'circle'},
+        ],
+    },
+    parameters: {docs: {source: {code: customMarkersCode}}},
+    render: (args) => ({
+        components: {HorizontalBarChart, Icon},
+        setup: () => ({args}),
+        template: `
+            <HorizontalBarChart v-bind="args">
+                <template #marker="{ item }">
+                    <Icon :name="item.icon" class="size-4" />
+                </template>
+            </HorizontalBarChart>
+        `,
+    }),
+};
+
+const widgetCode = `
+<Widget title="Have you attended before?" icon="fieldtype-select">
+    <HorizontalBarChart :items="items" accessible-label="Attendance responses" />
+</Widget>
+`;
+
+export const _InsideAWidget: Story = {
+    tags: ['!dev'],
+    parameters: {docs: {source: {code: widgetCode}}},
+    render: (args) => ({
+        components: {HorizontalBarChart, Widget},
+        setup: () => ({args}),
+        template: `
+            <Widget title="Have you attended before?" icon="fieldtype-select">
+                <HorizontalBarChart v-bind="args" />
+            </Widget>
+        `,
+    }),
+};
+
+export const TestRendersAccessibleChartAndPercentages: Story = {
+    tags: ['!dev', 'test'],
+    play: async ({canvasElement}) => {
+        const canvas = within(canvasElement);
+
+        expect(canvas.getByRole('img', {name: 'Responses: Yes 55%, No 35%, Maybe 10%'})).toBeVisible();
+        expect(canvas.getByText('55%')).toBeVisible();
+    },
+};
+
+export const TestRendersCounts: Story = {
+    tags: ['!dev', 'test'],
+    args: {metric: 'count'},
+    play: async ({canvasElement}) => {
+        expect(within(canvasElement).getByText('136')).toBeVisible();
+    },
+};
diff --git a/resources/js/stories/HorizontalLollipopChart.stories.ts b/resources/js/stories/HorizontalLollipopChart.stories.ts
new file mode 100644
index 00000000000..b24a40ac482
--- /dev/null
+++ b/resources/js/stories/HorizontalLollipopChart.stories.ts
@@ -0,0 +1,91 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {expect, within} from 'storybook/test';
+import {HorizontalLollipopChart} from '@ui';
+
+const items = [
+    {label: 'Summer', percent: 55, count: 136},
+    {label: 'Autumn', percent: 25, count: 62},
+    {label: 'Spring', percent: 15, count: 37},
+    {label: 'Winter', percent: 10, count: 25},
+];
+
+const meta = {
+    title: 'Charts/HorizontalLollipopChart',
+    component: HorizontalLollipopChart,
+    args: {
+        accessibleLabel: 'Ranked seasons: Summer 55%, Autumn 25%, Spring 15%, Winter 10%',
+        items,
+    },
+} satisfies Meta<typeof HorizontalLollipopChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {docs: {source: {code: `<HorizontalLollipopChart :items="items" accessible-label="Ranked seasons" />`}}},
+};
+
+export const _Counts: Story = {
+    tags: ['!dev'],
+    args: {metric: 'count'},
+};
+
+const customEndpointsCode = `
+<HorizontalLollipopChart
+    :items="countries"
+    accessible-label="Ranked countries"
+    :show-marker="false"
+>
+    <template #endpoint="{ item }">
+        <span class="text-lg">{{ item.emoji }}</span>
+    </template>
+</HorizontalLollipopChart>
+`;
+
+const countries = [
+    {label: 'Japan', percent: 40, count: 99, emoji: '🇯🇵'},
+    {label: 'Italy', percent: 35, count: 87, emoji: '🇮🇹'},
+    {label: 'France', percent: 25, count: 62, emoji: '🇫🇷'},
+];
+
+export const _CustomEndpoints: Story = {
+    tags: ['!dev'],
+    args: {
+        accessibleLabel: 'Ranked countries: Japan 40%, Italy 35%, France 25%',
+        items: countries,
+        showMarker: false,
+    },
+    parameters: {docs: {source: {code: customEndpointsCode}}},
+    render: (args) => ({
+        components: {HorizontalLollipopChart},
+        setup: () => ({args}),
+        template: `
+            <HorizontalLollipopChart v-bind="args">
+                <template #endpoint="{ item }">
+                    <span class="text-lg">{{ item.emoji }}</span>
+                </template>
+            </HorizontalLollipopChart>
+        `,
+    }),
+};
+
+export const _ContinuingRanks: Story = {
+    tags: ['!dev'],
+    args: {
+        accessibleLabel: 'Ranks 5 through 8',
+        items: items.map((item, index) => ({...item, rank: index + 5})),
+    },
+    parameters: {docs: {source: {code: `<HorizontalLollipopChart :items="paginatedItems" accessible-label="Ranks 5 through 8" />`}}},
+};
+
+export const TestRendersAccessibleChartAndRanks: Story = {
+    tags: ['!dev', 'test'],
+    play: async ({canvasElement}) => {
+        const canvas = within(canvasElement);
+
+        expect(canvas.getByRole('img', {name: /Ranked seasons/})).toBeVisible();
+        expect(canvas.getByText('1')).toBeVisible();
+        expect(canvas.getByText('Summer')).toBeVisible();
+    },
+};
diff --git a/resources/js/stories/PieChart.stories.ts b/resources/js/stories/PieChart.stories.ts
new file mode 100644
index 00000000000..dc8daeaec5e
--- /dev/null
+++ b/resources/js/stories/PieChart.stories.ts
@@ -0,0 +1,173 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {ref} from 'vue';
+import {expect, fn, userEvent, within} from 'storybook/test';
+import {Button, Icon, PieChart} from '@ui';
+
+const items = [
+    {label: 'Email', percent: 45, count: 112},
+    {label: 'Search', percent: 30, count: 74},
+    {label: 'Social', percent: 15, count: 37},
+    {label: 'Other', percent: 10, count: 25},
+];
+
+const meta = {
+    title: 'Charts/PieChart',
+    component: PieChart,
+    args: {
+        accessibleLabel: 'Traffic sources: Email 45%, Search 30%, Social 15%, Other 10%',
+        items,
+    },
+} satisfies Meta<typeof PieChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {docs: {source: {code: `<PieChart :items="items" accessible-label="Traffic sources" />`}}},
+};
+
+export const _Counts: Story = {
+    tags: ['!dev'],
+    args: {metric: 'count'},
+    parameters: {docs: {source: {code: `<PieChart :items="items" metric="count" accessible-label="Traffic sources" />`}}},
+};
+
+export const _FocusedSegment: Story = {
+    tags: ['!dev'],
+    args: {
+        focusedIndex: 3,
+        items: [{label: 'Direct', percent: 6, count: 15}, {label: 'Referral', percent: 4, count: 10}],
+        segments: items,
+    },
+    parameters: {docs: {source: {code: `<PieChart :items="breakdown" :segments="items" :focused-index="3" accessible-label="Other traffic sources" />`}}},
+};
+
+const interactiveCode = `
+<PieChart
+    v-if="!showBreakdown"
+    :items="items"
+    accessible-label="Traffic sources"
+    @select="showBreakdown = true"
+/>
+<PieChart
+    v-else
+    :items="breakdown"
+    :segments="items"
+    :focused-index="3"
+    accessible-label="Other traffic sources"
+/>
+`;
+
+export const _InteractiveBreakdown: Story = {
+    tags: ['!dev'],
+    parameters: {docs: {source: {code: interactiveCode}}},
+    render: () => ({
+        components: {Button, PieChart},
+        setup() {
+            const showBreakdown = ref(false);
+            const drilldownItems = [...items.slice(0, 3), {...items[3], clickable: true}];
+            const breakdown = [
+                {label: 'Direct', percent: 6, count: 15},
+                {label: 'Referral', percent: 4, count: 10},
+            ];
+
+            return {breakdown, drilldownItems, showBreakdown};
+        },
+        template: `
+            <div class="space-y-3">
+                <Button v-if="showBreakdown" text="Back to all sources" size="sm" @click="showBreakdown = false" />
+                <PieChart
+                    v-if="!showBreakdown"
+                    :items="drilldownItems"
+                    accessible-label="Traffic sources: Email 45%, Search 30%, Social 15%, Other 10%"
+                    @select="showBreakdown = true"
+                />
+                <PieChart
+                    v-else
+                    :items="breakdown"
+                    :segments="drilldownItems"
+                    :focused-index="3"
+                    accessible-label="Other traffic sources: Direct 6%, Referral 4%"
+                />
+            </div>
+        `,
+    }),
+};
+
+export const _CustomMarkers: Story = {
+    tags: ['!dev'],
+    args: {
+        items: items.map((item, index) => ({...item, icon: ['mail', 'search-magnifying-glass', 'users', 'dots'][index]})),
+    },
+    parameters: {docs: {source: {code: `<PieChart :items="items" accessible-label="Traffic sources">
+    <template #marker="{ item }">
+        <Icon :name="item.icon" class="size-4" />
+    </template>
+</PieChart>`}}},
+    render: (args) => ({
+        components: {Icon, PieChart},
+        setup: () => ({args}),
+        template: `
+            <PieChart v-bind="args">
+                <template #marker="{ item }">
+                    <Icon :name="item.icon" class="size-4" />
+                </template>
+            </PieChart>
+        `,
+    }),
+};
+
+const imageItems = [
+    {label: 'Cat', percent: 55, count: 136, image: 'https://picsum.photos/id/159/320/320', badge: 'A'},
+    {label: 'Dog', percent: 45, count: 112, image: 'https://picsum.photos/id/237/320/320', badge: 'B'},
+];
+
+export const _ImageSlices: Story = {
+    tags: ['!dev'],
+    args: {
+        items: imageItems,
+        accessibleLabel: 'Spirit animal: Cat 55%, Dog 45%',
+    },
+    parameters: {docs: {source: {code: `<PieChart :items="items" accessible-label="Spirit animal: Cat 55%, Dog 45%" />`}}},
+};
+
+export const TestRendersAccessibleChartAndLegend: Story = {
+    tags: ['!dev', 'test'],
+    play: async ({canvasElement}) => {
+        const canvas = within(canvasElement);
+
+        expect(canvas.getByRole('img', {name: /Traffic sources/})).toBeVisible();
+        expect(canvas.getByText('Email')).toBeVisible();
+    },
+};
+
+export const TestClickableLegendItemEmitsSelection: Story = {
+    tags: ['!dev', 'test'],
+    args: {
+        items: [...items.slice(0, 3), {...items[3], clickable: true}],
+        onSelect: fn(),
+    },
+    play: async ({canvasElement, args}) => {
+        await userEvent.click(within(canvasElement).getByRole('button', {name: /Other/}));
+
+        expect(args.onSelect).toHaveBeenCalled();
+    },
+};
+
+export const TestRendersImageSlicesAndBadges: Story = {
+    tags: ['!dev', 'test'],
+    args: {
+        items: imageItems,
+        accessibleLabel: 'Spirit animal: Cat 55%, Dog 45%',
+    },
+    play: async ({canvasElement}) => {
+        const canvas = within(canvasElement);
+
+        expect(canvas.getByRole('img', {name: /Spirit animal/})).toBeVisible();
+        expect(canvasElement.querySelectorAll('.image-pie-chart__slice')).toHaveLength(2);
+        expect(canvasElement.querySelector('.pie-chart__disc')).toBeNull();
+        expect(canvas.getByText('A')).toBeVisible();
+        expect(canvas.getByText('Cat')).toBeVisible();
+    },
+};
diff --git a/resources/js/stories/VerticalBarChart.stories.ts b/resources/js/stories/VerticalBarChart.stories.ts
new file mode 100644
index 00000000000..1603bebec90
--- /dev/null
+++ b/resources/js/stories/VerticalBarChart.stories.ts
@@ -0,0 +1,82 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {expect, within} from 'storybook/test';
+import {VerticalBarChart} from '@ui';
+
+const items = [
+    {label: '1', percent: 10, count: 25},
+    {label: '2', percent: 20, count: 50},
+    {label: '3', percent: 35, count: 87},
+    {label: '4', percent: 25, count: 62},
+    {label: '5', percent: 10, count: 25},
+];
+
+const meta = {
+    title: 'Charts/VerticalBarChart',
+    component: VerticalBarChart,
+    args: {
+        accessibleLabel: 'Rating distribution: 1: 10%, 2: 20%, 3: 35%, 4: 25%, 5: 10%',
+        items,
+    },
+    decorators: [() => ({template: '<div style="height: 16rem"><story /></div>'})],
+} satisfies Meta<typeof VerticalBarChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {docs: {source: {code: `<VerticalBarChart :items="items" accessible-label="Rating distribution" />`}}},
+};
+
+export const _Counts: Story = {
+    tags: ['!dev'],
+    args: {metric: 'count'},
+};
+
+export const _FixedScale: Story = {
+    tags: ['!dev'],
+    args: {maxValue: 100},
+    parameters: {docs: {source: {code: `<VerticalBarChart :items="items" :max-value="100" accessible-label="Rating distribution" />`}}},
+};
+
+const summaryCode = `
+<VerticalBarChart :items="items" accessible-label="Rating distribution. Average 3.2 out of 5.">
+    <template #summary>
+        <div class="inline-flex rounded-md border px-2 py-1">3.2 Average</div>
+    </template>
+</VerticalBarChart>
+`;
+
+export const _WithSummary: Story = {
+    tags: ['!dev'],
+    parameters: {docs: {source: {code: summaryCode}}},
+    render: (args) => ({
+        components: {VerticalBarChart},
+        setup: () => ({args}),
+        template: `
+            <VerticalBarChart v-bind="args">
+                <template #summary>
+                    <div class="inline-flex rounded-md border border-gray-200 px-2 py-1 text-sm dark:border-gray-700">
+                        <strong class="me-2">3.2</strong> Average
+                    </div>
+                </template>
+            </VerticalBarChart>
+        `,
+    }),
+};
+
+export const TestRendersAccessibleChartAndScalesBars: Story = {
+    tags: ['!dev', 'test'],
+    play: async ({canvasElement}) => {
+        const canvas = within(canvasElement);
+        const chart = canvas.getByRole('img', {name: /Rating distribution/});
+        const bars = chart.querySelector('.vertical-bar-chart') as HTMLElement;
+        const fill = chart.querySelector('.vertical-bar-chart__fill') as HTMLElement;
+
+        expect(chart).toBeVisible();
+        expect(getComputedStyle(chart).display).toBe('grid');
+        expect(getComputedStyle(bars).display).toBe('flex');
+        expect(getComputedStyle(fill).maxWidth).toBe('32px');
+        expect(fill).toHaveStyle({flexBasis: `${(10 / 35) * 100}%`});
+    },
+};
diff --git a/resources/js/stories/docs/HorizontalBarChart.mdx b/resources/js/stories/docs/HorizontalBarChart.mdx
new file mode 100644
index 00000000000..f3dbb53dbfc
--- /dev/null
+++ b/resources/js/stories/docs/HorizontalBarChart.mdx
@@ -0,0 +1,38 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as HorizontalBarChartStories from '../HorizontalBarChart.stories';
+
+<Meta of={HorizontalBarChartStories} />
+
+# HorizontalBarChart
+A horizontal comparison chart for labelled response data. Pass an accessible summary because the visual rows are hidden from assistive technology.
+<Canvas of={HorizontalBarChartStories._DocsIntro} sourceState={'shown'} />
+
+Each item needs a `label` and `percent`. Add `count` when users can switch metrics, and `icon` to replace the colour swatch with an icon marker.
+
+```js
+const items = [
+    { label: 'Yes', percent: 55, count: 136 },
+    { label: 'No', percent: 35, count: 87 },
+];
+```
+
+## Response counts
+Set `metric` to `count` to show response totals instead of percentages.
+<Canvas of={HorizontalBarChartStories._Counts} sourceState={'shown'} />
+
+## Metric placement
+Move metrics to the end and hide markers for distributions where the labels should lead each row.
+<Canvas of={HorizontalBarChartStories._MetricAtEnd} sourceState={'shown'} />
+
+## Custom markers
+The `marker` slot receives the current `item` and `index`. Use it for field-specific icons, images, or badges.
+<Canvas of={HorizontalBarChartStories._CustomMarkers} sourceState={'shown'} />
+
+## Inside a widget
+Charts only render the visualization. Wrap one in a `Widget` when it needs a title, icon, actions, or card treatment.
+<Canvas of={HorizontalBarChartStories._InsideAWidget} sourceState={'shown'} />
+
+Use the `summary` slot for aggregate information above the rows. The `bar` slot receives `item`, `index`, and the calculated `width` when the fill needs custom styling.
+
+## Arguments
+<ArgTypes of={HorizontalBarChartStories} />
diff --git a/resources/js/stories/docs/HorizontalLollipopChart.mdx b/resources/js/stories/docs/HorizontalLollipopChart.mdx
new file mode 100644
index 00000000000..22e7b09b8ed
--- /dev/null
+++ b/resources/js/stories/docs/HorizontalLollipopChart.mdx
@@ -0,0 +1,25 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as HorizontalLollipopChartStories from '../HorizontalLollipopChart.stories';
+
+<Meta of={HorizontalLollipopChartStories} />
+
+# HorizontalLollipopChart
+A ranked comparison chart. Use the marker and endpoint slots to add field-specific symbols without changing the chart structure.
+<Canvas of={HorizontalLollipopChartStories._DocsIntro} sourceState={'shown'} />
+
+Items use the shared `label`, `percent`, and `count` shape. Ranks default to their position in the array.
+
+## Response counts
+Set `metric` to `count` when absolute totals are more useful than percentages.
+<Canvas of={HorizontalLollipopChartStories._Counts} sourceState={'shown'} />
+
+## Custom endpoints
+Use `endpoint` for flags, avatars, or another symbol at the end of each line. Set `showMarker` to `false` when that endpoint provides enough visual distinction.
+<Canvas of={HorizontalLollipopChartStories._CustomEndpoints} sourceState={'shown'} />
+
+## Continuing ranks
+Provide an explicit `rank` for paginated data or rankings that do not start at one.
+<Canvas of={HorizontalLollipopChartStories._ContinuingRanks} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={HorizontalLollipopChartStories} />
diff --git a/resources/js/stories/docs/PieChart.mdx b/resources/js/stories/docs/PieChart.mdx
new file mode 100644
index 00000000000..f302e601a7c
--- /dev/null
+++ b/resources/js/stories/docs/PieChart.mdx
@@ -0,0 +1,32 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as PieChartStories from '../PieChart.stories';
+
+<Meta of={PieChartStories} />
+
+# PieChart
+A pie chart for up to four segments. Legend items may be clickable, and `segments` can preserve the original pie while displaying a focused segment breakdown. When every item has an `image` (and there are at most two), the slices are filled with those images instead of colors.
+<Canvas of={PieChartStories._DocsIntro} sourceState={'shown'} />
+
+Keep the items ordered by significance and supply an `accessibleLabel` that states the same result in plain language. Pie charts reject more than four segments; group smaller values before passing them in.
+
+## Response counts
+<Canvas of={PieChartStories._Counts} sourceState={'shown'} />
+
+## Interactive breakdown
+Set `clickable: true` on a legend item and handle `select` to reveal its detail. On the detail chart, pass the original items as `segments` and the selected zero-based index as `focusedIndex`.
+<Canvas of={PieChartStories._InteractiveBreakdown} sourceState={'shown'} />
+
+## Focused segment
+This is the detail state by itself. The original segments retain the shape of the pie while the new `items` populate its legend.
+<Canvas of={PieChartStories._FocusedSegment} sourceState={'shown'} />
+
+## Custom markers
+Replace legend swatches through the `marker` slot. It receives the current `item` and `index`.
+<Canvas of={PieChartStories._CustomMarkers} sourceState={'shown'} />
+
+## Image slices
+When every item carries an `image` and there are no more than two, each slice is filled with its image. Items may also carry a `badge` shown in the legend.
+<Canvas of={PieChartStories._ImageSlices} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={PieChartStories} />
diff --git a/resources/js/stories/docs/VerticalBarChart.mdx b/resources/js/stories/docs/VerticalBarChart.mdx
new file mode 100644
index 00000000000..1f71dcf6686
--- /dev/null
+++ b/resources/js/stories/docs/VerticalBarChart.mdx
@@ -0,0 +1,24 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as VerticalBarChartStories from '../VerticalBarChart.stories';
+
+<Meta of={VerticalBarChartStories} />
+
+# VerticalBarChart
+A vertical distribution chart. Bar heights scale against the largest item's percentage unless `maxValue` is provided.
+<Canvas of={VerticalBarChartStories._DocsIntro} sourceState={'shown'} />
+
+Use vertical bars for ordered scales where the labels are short, such as ratings or scores. Each item supports `label`, `percent`, and `count`.
+
+## Response counts
+<Canvas of={VerticalBarChartStories._Counts} sourceState={'shown'} />
+
+## Fixed scale
+By default, the largest item fills the available height. Set `maxValue` when multiple charts need a shared scale or when the scale has a known ceiling.
+<Canvas of={VerticalBarChartStories._FixedScale} sourceState={'shown'} />
+
+## Summary
+Use the `summary` slot for an average, range, or other aggregate. Include that information in `accessibleLabel` too.
+<Canvas of={VerticalBarChartStories._WithSummary} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={VerticalBarChartStories} />
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index 1c7cbb83664..bd7ba5907db 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -168,6 +168,8 @@ it('exports ui', async () => {
         'Field',
         'Header',
         'Heading',
+        'HorizontalBarChart',
+        'HorizontalLollipopChart',
         'HoverCard',
         'Icon',
         'Input',
@@ -183,6 +185,7 @@ it('exports ui', async () => {
         'Panel',
         'PanelFooter',
         'PanelHeader',
+        'PieChart',
         'Popover',
         'Radio',
         'RadioGroup',
@@ -219,6 +222,7 @@ it('exports ui', async () => {
         'Timezones',
         'ToggleGroup',
         'ToggleItem',
+        'VerticalBarChart',
         'registerIconSet',
         'registerIconSetFromStrings',
         'Avatar',
diff --git a/resources/js/tests/components/ChartWidget.test.js b/resources/js/tests/components/ChartWidget.test.js
new file mode 100644
index 00000000000..f02893e9753
--- /dev/null
+++ b/resources/js/tests/components/ChartWidget.test.js
@@ -0,0 +1,94 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, expect, test, vi } from 'vitest';
+import ChartWidget from '@/components/forms/summary/ChartWidget.vue';
+import { PieChart } from '@ui';
+
+beforeEach(() => {
+    vi.stubGlobal('__', (key, replacements = {}) => {
+        return Object.entries(replacements).reduce((text, [search, replace]) => {
+            return text.replace(`:${search}`, replace);
+        }, key);
+    });
+});
+
+const field = {
+    handle: 'wake_me_up',
+    display: 'Wake me up',
+    icon: 'fieldtype-radio',
+    fieldtype: 'multi_choice',
+    number: 3,
+    responses: 248,
+    chart: {
+        handle: 'pie',
+        component: 'ui-pie-chart',
+        props: {
+            items: [
+                { key: 'go_go', label: 'Before you Go Go', count: 112, percent: 45 },
+                { key: 'back_to_life', label: 'Bring me Back to Life', count: 74, percent: 30 },
+                { key: 'september', label: 'When September Ends', count: 37, percent: 15 },
+                { key: 'other', label: 'Other', count: 25, percent: 10, other: true },
+            ],
+            drilldown: {
+                items: [
+                    { key: 'bohemian', label: 'Bohemian Rhapsody', count: 18, percent: 7 },
+                    { key: 'wonderwall', label: 'Wonderwall', count: 7, percent: 3 },
+                ],
+                segments: [],
+                focusedIndex: 3,
+            },
+        },
+    },
+    insights: [],
+};
+
+function mountCard(props = {}) {
+    return mount(ChartWidget, {
+        props: { field, ...props },
+        global: { components: { 'ui-pie-chart': PieChart } },
+    });
+}
+
+test('it renders the chart items', () => {
+    const wrapper = mountCard();
+
+    expect(wrapper.text()).toContain('Wake me up');
+    expect(wrapper.text()).toContain('Before you Go Go');
+    expect(wrapper.text()).toContain('Other');
+    expect(wrapper.text()).not.toContain('Bohemian Rhapsody');
+});
+
+test('the other slice drills down into the truncated items and back again', async () => {
+    const wrapper = mountCard();
+
+    await wrapper.find('.pie-chart-legend__link').trigger('click');
+
+    expect(wrapper.text()).toContain('Bohemian Rhapsody');
+    expect(wrapper.text()).not.toContain('Before you Go Go');
+
+    await wrapper.findAll('button').find((button) => button.text() === 'Back').trigger('click');
+
+    expect(wrapper.text()).toContain('Before you Go Go');
+});
+
+test('charts without drilldown props dont make the other item clickable', () => {
+    const wrapper = mountCard({
+        field: {
+            ...field,
+            chart: { ...field.chart, props: { items: field.chart.props.items } },
+        },
+    });
+
+    expect(wrapper.find('.pie-chart-legend__link').exists()).toBe(false);
+});
+
+test('it prefixes the field number when enabled', () => {
+    const wrapper = mountCard({ showNumber: true });
+
+    expect(wrapper.text()).toContain('3. Wake me up');
+});
+
+test('the submission summary components compile', async () => {
+    const summary = await import('@/components/forms/summary/Summary.vue');
+
+    expect(summary.default).toBeTruthy();
+});
diff --git a/resources/svg/icons/chart-increase.svg b/resources/svg/icons/chart-increase.svg
new file mode 100644
index 00000000000..670276fdd78
--- /dev/null
+++ b/resources/svg/icons/chart-increase.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+  <g>
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.7313 1.55729c-0.0441 0.06759 -4.59157 6.66316 -5.37571 7.21502 -1.02787 0.7234 -1.50644 -2.20844 -2.70205 -2.11494C3.1652 6.77377 0.530522 12.4525 0.5 12.501" stroke-width="1"></path>
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.84814 2.29236c1.09785 -0.62946 2.65556 -0.92473 3.89426 -0.7382 0.6009 1.15021 0.8827 2.78223 0.7047 4.08006" stroke-width="1"></path>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/resources/svg/icons/charts-bar-horizontal.svg b/resources/svg/icons/charts-bar-horizontal.svg
new file mode 100644
index 00000000000..0e65b31c38e
--- /dev/null
+++ b/resources/svg/icons/charts-bar-horizontal.svg
@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" transform="matrix(0 -1 -1 0 13.99987 13.99987)"><path d="m4.842 13.25h-3.067c-.526 0-.963-.407-.987-.932-.052-1.179-.051-2.345.005-3.525.023-.48.394-.872.872-.91.818-.066 1.535-.066 2.353 0 .479.038.849.43.872.91.071 1.49.055 2.957-.048 4.457z"/><path d="m9.025 13.25h-4c-.111-2.663-.121-5.262-.03-7.914.016-.461.349-.856.807-.918.853-.117 1.593-.117 2.446 0 .458.062.791.457.807.918.091 2.652.081 5.251-.03 7.914z"/><path d="m12.199 13.25h-3.041c-.112-2.687-.121-8.325-.027-11.495.013-.462.346-.854.804-.917.853-.117 1.593-.117 2.446 0 .458.063.791.455.805.916.083 2.831.085 7.63.005 10.538-.015.536-.456.958-.992.958z"/></g></svg>
\ No newline at end of file
diff --git a/resources/svg/icons/checkbox-filled.svg b/resources/svg/icons/checkbox-filled.svg
new file mode 100644
index 00000000000..041e6573a49
--- /dev/null
+++ b/resources/svg/icons/checkbox-filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M0.959867 10.2685C1.114 11.7092 2.2727 12.8679 3.71266 13.0284 4.78221 13.1476 5.88037 13.25 7 13.25s2.21779 -0.1024 3.2873 -0.2216c1.44 -0.1605 2.5987 -1.3192 2.7528 -2.7599 0.1138 -1.06348 0.2099 -2.15535 0.2099 -3.2685 0 -1.11316 -0.0961 -2.20502 -0.2099 -3.26853 -0.1541 -1.44065 -1.3128 -2.59936 -2.7528 -2.759861C9.21779 0.852392 8.11963 0.75 7 0.75S4.78221 0.852392 3.71266 0.971609C2.2727 1.13211 1.114 2.29082 0.959867 3.73147 0.846083 4.79498 0.75 5.88684 0.75 7c0 1.11315 0.096084 2.20502 0.209867 3.2685Z"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4.5 7.625 6.31818 9.5c0.85557 -2.45768 1.5681 -3.53614 3.18182 -5"/></svg>
diff --git a/resources/svg/icons/star-filled.svg b/resources/svg/icons/star-filled.svg
new file mode 100644
index 00000000000..d30668937bd
--- /dev/null
+++ b/resources/svg/icons/star-filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" d="M9.263 4.348c-.314-1.325-.81-2.45-1.562-3.483a.852.852 0 0 0-1.399 0c-.753 1.032-1.251 2.158-1.565 3.483-1.278-.047-2.454.105-3.62.499-.567.19-.797.884-.46 1.397.7 1.063 1.563 1.899 2.68 2.603a11.3 11.3 0 0 0-.652 3.705c-.006.638.57 1.094 1.153.905 1.162-.378 2.183-.966 3.16-1.83.979.864 2.001 1.452 3.164 1.83.584.189 1.16-.267 1.153-.905a11.3 11.3 0 0 0-.652-3.705c1.117-.704 1.98-1.54 2.68-2.603.337-.513.107-1.206-.46-1.398-1.166-.393-2.343-.545-3.62-.498Z"/></svg>
diff --git a/routes/cp.php b/routes/cp.php
index 9469da9b92e..35748bdea41 100644
--- a/routes/cp.php
+++ b/routes/cp.php
@@ -72,8 +72,10 @@
 use Statamic\Http\Controllers\CP\Forms\FormLogicController;
 use Statamic\Http\Controllers\CP\Forms\FormsController;
 use Statamic\Http\Controllers\CP\Forms\FormSubmissionsController;
+use Statamic\Http\Controllers\CP\Forms\FormSummaryController;
 use Statamic\Http\Controllers\CP\Forms\GenerateFakeSubmissionController;
 use Statamic\Http\Controllers\CP\Forms\SubmissionActionController;
+use Statamic\Http\Controllers\CP\Forms\UpdateFormChartsController;
 use Statamic\Http\Controllers\CP\Globals\GlobalsBlueprintController;
 use Statamic\Http\Controllers\CP\Globals\GlobalsController;
 use Statamic\Http\Controllers\CP\Globals\GlobalSetActionController;
@@ -351,6 +353,8 @@
     Route::post('forms/{form}/submissions/generate-fake', GenerateFakeSubmissionController::class)->name('forms.submissions.generate-fake');
     Route::resource('forms', FormsController::class);
     Route::get('forms/{form}/submissions', [FormSubmissionsController::class, 'index'])->name('forms.submissions.index');
+    Route::get('forms/{form}/submissions/summary', FormSummaryController::class)->name('forms.submissions.summary');
+    Route::patch('forms/{form}/submissions/charts', UpdateFormChartsController::class)->name('forms.submissions.charts.update');
     Route::get('forms/{form}/submissions/{submission}', [FormSubmissionsController::class, 'show'])->name('forms.submissions.show');
     Route::delete('forms/{form}/submissions/{submission}', [FormSubmissionsController::class, 'destroy'])->name('forms.submissions.destroy');
     Route::get('forms/{form}/builder', [FormBuilderController::class, 'edit'])->name('forms.builder.edit');
diff --git a/src/CP/Color.php b/src/CP/Color.php
index 1fa4fbaa1d1..44bc4790f82 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -420,6 +420,32 @@ public static function defaults(bool $dark = false): array
             'ui-accent-text' => 'var(--theme-color-ui-accent-bg)',
             'dark-ui-accent-text' => self::Indigo[400],
             'switch-bg' => 'var(--theme-color-ui-accent-bg)',
+
+            // Twilight Meadow chart theme
+            'chart-1' => self::Indigo[500],
+            'chart-2' => self::Zinc[800],
+            'chart-3' => self::Lime[500],
+            'chart-4' => self::Indigo[200],
+            'dark-chart-1' => self::Indigo[600],
+            'dark-chart-2' => self::Indigo[200],
+            'dark-chart-3' => self::Lime[500],
+            'dark-chart-4' => self::Orange[500],
+            'chart-1-label-bg' => self::Indigo[600],
+            'chart-2-label-bg' => self::Transparent,
+            'chart-3-label-bg' => self::Lime[600],
+            'chart-4-label-bg' => self::Indigo[400],
+            'dark-chart-1-label-bg' => self::Indigo[700],
+            'dark-chart-2-label-bg' => self::Indigo[400],
+            'dark-chart-3-label-bg' => self::Lime[600],
+            'dark-chart-4-label-bg' => self::Orange[600],
+            'chart-1-legend' => self::Indigo[500],
+            'chart-2-legend' => self::Zinc[800],
+            'chart-3-legend' => self::Lime[500],
+            'chart-4-legend' => self::Indigo[300],
+            'dark-chart-1-legend' => self::Indigo[600],
+            'dark-chart-2-legend' => self::Indigo[300],
+            'dark-chart-3-legend' => self::Lime[500],
+            'dark-chart-4-legend' => self::Orange[500],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
             ->all();
diff --git a/src/Forms/Charts/Chart.php b/src/Forms/Charts/Chart.php
new file mode 100644
index 00000000000..766f2d845ef
--- /dev/null
+++ b/src/Forms/Charts/Chart.php
@@ -0,0 +1,133 @@
+<?php
+
+namespace Statamic\Forms\Charts;
+
+use Illuminate\Support\Collection;
+use Statamic\Extend\HasHandle;
+use Statamic\Extend\HasTitle;
+use Statamic\Extend\RegistersItself;
+
+use function Statamic\trans as __;
+
+abstract class Chart
+{
+    use HasHandle, HasTitle, RegistersItself;
+
+    protected ?string $component = null;
+    protected ?string $icon = null;
+    protected ?int $limit = null;
+
+    public function component(): string
+    {
+        return $this->component;
+    }
+
+    public function icon(): ?string
+    {
+        return $this->icon;
+    }
+
+    public function props(Collection $values, ?Collection $options = null): array
+    {
+        [$items] = $this->truncatedItems($values, $options);
+
+        return ['items' => $items->all()];
+    }
+
+    protected function truncatedItems(Collection $values, ?Collection $options): array
+    {
+        $total = $values->count();
+        $items = $this->items($values, $options, $total);
+
+        if (! $this->limit || $items->count() <= $this->limit) {
+            return [$items->values(), collect()];
+        }
+
+        $keep = $items->sortByDesc('count')->take($this->limit - 1)->pluck('key');
+
+        [$items, $other] = $items->partition(fn ($item): bool => $keep->contains($item['key']));
+
+        $items->push([
+            'key' => 'other',
+            'label' => __('Other'),
+            'count' => $count = $other->sum('count'),
+            'percent' => $this->percent($count, $total),
+            'other' => true,
+        ]);
+
+        return [$items->values(), $other->values()];
+    }
+
+    private function items(Collection $values, ?Collection $options, int $total): Collection
+    {
+        $counts = $values->flatten()->countBy(fn ($value) => $this->key($value));
+
+        if ($options === null && $this->shouldBin($counts)) {
+            return $this->binnedItems($counts, $total);
+        }
+
+        $options ??= $this->optionsFromValues($counts);
+
+        return $options->map(fn (ChartOption $option) => array_filter([
+            'key' => $option->key,
+            'label' => $option->label,
+            'count' => $count = $counts->get($option->key, 0),
+            'percent' => $this->percent($count, $total),
+            'icon' => $option->icon,
+            'image' => $option->image,
+            'badge' => $option->badge,
+        ], fn ($value) => $value !== null));
+    }
+
+    private function shouldBin(Collection $counts): bool
+    {
+        return $counts->count() > 10 && $counts->keys()->every(fn ($key) => is_numeric($key));
+    }
+
+    private function binnedItems(Collection $counts, int $total): Collection
+    {
+        $keys = $counts->keys()->map(fn ($key) => (float) $key);
+        $min = (int) floor($keys->min());
+        $max = (int) ceil($keys->max());
+        $step = max(1, (int) ceil(($max - $min + 1) / 8));
+
+        return collect(range($min, $max, $step))->map(function ($start) use ($counts, $total, $step, $max) {
+            $end = min($start + $step - 1, $max);
+            $count = $counts
+                ->filter(fn ($count, $key) => (float) $key >= $start && (float) $key < $start + $step)
+                ->sum();
+
+            return [
+                'key' => "{$start}-{$end}",
+                'label' => $start === $end ? (string) $start : "{$start}–{$end}",
+                'count' => $count,
+                'percent' => $this->percent($count, $total),
+            ];
+        })->values();
+    }
+
+    private function optionsFromValues(Collection $counts): Collection
+    {
+        $keys = $counts->keys();
+
+        $keys = $keys->every(fn ($key) => is_numeric($key))
+            ? $keys->sortBy(fn ($key) => (float) $key)
+            : $keys->sortByDesc(fn ($key) => $counts->get($key));
+
+        return $keys->map(fn ($value) => new ChartOption((string) $value));
+    }
+
+    private function key($value): string
+    {
+        if (is_bool($value)) {
+            return $value ? 'true' : 'false';
+        }
+
+        return (string) $value;
+    }
+
+    protected function percent(int $count, int $total): int
+    {
+        return $total ? (int) round($count / $total * 100) : 0;
+    }
+}
diff --git a/src/Forms/Charts/ChartOption.php b/src/Forms/Charts/ChartOption.php
new file mode 100644
index 00000000000..d1f91e42330
--- /dev/null
+++ b/src/Forms/Charts/ChartOption.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace Statamic\Forms\Charts;
+
+readonly class ChartOption
+{
+    public string $label;
+
+    public function __construct(
+        public string $key,
+        ?string $label = null,
+        public ?string $icon = null,
+        public ?string $image = null,
+        public ?string $badge = null,
+    ) {
+        $this->label = $label ?? $key;
+    }
+}
diff --git a/src/Forms/Charts/HorizontalBar.php b/src/Forms/Charts/HorizontalBar.php
new file mode 100644
index 00000000000..ac6caf2504a
--- /dev/null
+++ b/src/Forms/Charts/HorizontalBar.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace Statamic\Forms\Charts;
+
+class HorizontalBar extends Chart
+{
+    protected static $title = 'Bar chart';
+
+    protected ?string $component = 'ui-horizontal-bar-chart';
+    protected ?string $icon = 'charts-bar-horizontal';
+    protected ?int $limit = 5;
+}
diff --git a/src/Forms/Charts/Lollipop.php b/src/Forms/Charts/Lollipop.php
new file mode 100644
index 00000000000..9eee0d36e68
--- /dev/null
+++ b/src/Forms/Charts/Lollipop.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace Statamic\Forms\Charts;
+
+class Lollipop extends Chart
+{
+    protected static $title = 'Lollipop chart';
+
+    protected ?string $component = 'ui-horizontal-lollipop-chart';
+    protected ?string $icon = 'charts-bar-horizontal';
+    protected ?int $limit = 5;
+}
diff --git a/src/Forms/Charts/Pie.php b/src/Forms/Charts/Pie.php
new file mode 100644
index 00000000000..ccc7428cdac
--- /dev/null
+++ b/src/Forms/Charts/Pie.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace Statamic\Forms\Charts;
+
+use Illuminate\Support\Collection;
+
+use function Statamic\trans as __;
+
+class Pie extends Chart
+{
+    protected static $title = 'Pie chart';
+
+    protected ?string $component = 'ui-pie-chart';
+    protected ?string $icon = 'money-graph-pie-chart';
+    protected ?int $limit = 4;
+
+    public function props(Collection $values, ?Collection $options = null): array
+    {
+        [$items, $other] = $this->truncatedItems($values, $options);
+
+        $props = ['items' => $items->all()];
+
+        if ($other->isEmpty()) {
+            return $props;
+        }
+
+        // The pie keeps its shape while the "other" slice is highlighted and its items are listed.
+        $props['drilldown'] = [
+            'items' => $this->cappedItems($other, $values->count())->all(),
+            'segments' => $items->all(),
+            'focusedIndex' => $items->search(fn (array $item): bool => $item['other'] ?? false),
+        ];
+
+        return $props;
+    }
+
+    private function cappedItems(Collection $other, int $total): Collection
+    {
+        if ($other->count() <= $this->limit) {
+            return $other;
+        }
+
+        $rest = $other->slice($this->limit - 1);
+
+        return $other
+            ->take($this->limit - 1)
+            ->push([
+                'key' => 'more',
+                'label' => __('+:count more', ['count' => $rest->count()]),
+                'count' => $count = $rest->sum('count'),
+                'percent' => $this->percent($count, $total),
+            ])
+            ->values();
+    }
+}
diff --git a/src/Forms/Charts/RankedOptions.php b/src/Forms/Charts/RankedOptions.php
new file mode 100644
index 00000000000..0bd1e1792e9
--- /dev/null
+++ b/src/Forms/Charts/RankedOptions.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace Statamic\Forms\Charts;
+
+use Illuminate\Support\Collection;
+
+class RankedOptions extends Chart
+{
+    protected static $title = 'Ranking';
+
+    protected ?string $component = 'ui-horizontal-lollipop-chart';
+    protected ?string $icon = 'rank';
+
+    public function props(Collection $values, ?Collection $options = null): array
+    {
+        $options ??= collect();
+
+        $rankings = $values
+            ->filter(fn ($value): bool => is_array($value))
+            ->map(fn (array $value): array => array_map('strval', array_values($value)))
+            ->values();
+
+        $maxPoints = $rankings->count() * $options->count();
+
+        $items = $options
+            ->map(function (ChartOption $option) use ($rankings, $options): array {
+                $positions = $rankings
+                    ->map(fn ($ranking) => array_search($option->key, $ranking, true))
+                    ->filter(fn ($position): bool => $position !== false)
+                    ->map(fn ($position): int => $position + 1);
+
+                return [
+                    'key' => $option->key,
+                    'label' => $option->label,
+                    'count' => $positions->filter(fn ($position) => $position === 1)->count(),
+                    'points' => $positions->map(fn ($position) => $options->count() - $position + 1)->sum(),
+                    'average' => $positions->avg(),
+                ];
+            })
+            ->sortBy(fn ($item): float => $item['average'] ?? PHP_FLOAT_MAX)
+            ->values()
+            ->map(fn ($item, $index): array => [
+                'key' => $item['key'],
+                'label' => $item['label'],
+                'rank' => $index + 1,
+                'count' => $item['count'],
+                'percent' => $this->percent($item['points'], $maxPoints),
+            ]);
+
+        return ['items' => $items->all()];
+    }
+}
diff --git a/src/Forms/Charts/SummaryChart.php b/src/Forms/Charts/SummaryChart.php
new file mode 100644
index 00000000000..dd4c522872e
--- /dev/null
+++ b/src/Forms/Charts/SummaryChart.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace Statamic\Forms\Charts;
+
+use Illuminate\Support\Collection;
+use Statamic\Forms\Fields\FormField;
+
+readonly class SummaryChart
+{
+    public function __construct(private FormField $field, private Chart $chart)
+    {
+    }
+
+    public function field(): FormField
+    {
+        return $this->field;
+    }
+
+    public function chart(): Chart
+    {
+        return $this->chart;
+    }
+
+    public function props(Collection $values): array
+    {
+        return $this->chart->props($values, $this->field->fieldtype()->chartOptions($values));
+    }
+}
diff --git a/src/Forms/Charts/VerticalBar.php b/src/Forms/Charts/VerticalBar.php
new file mode 100644
index 00000000000..ca09dcbe1c3
--- /dev/null
+++ b/src/Forms/Charts/VerticalBar.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace Statamic\Forms\Charts;
+
+class VerticalBar extends Chart
+{
+    protected static $title = 'Column chart';
+
+    protected ?string $component = 'ui-vertical-bar-chart';
+    protected ?string $icon = 'chart-increase';
+    protected ?int $limit = 12;
+}
diff --git a/src/Forms/Fields/FormFieldtype.php b/src/Forms/Fields/FormFieldtype.php
index d3e6c8bf07b..8a02938718e 100644
--- a/src/Forms/Fields/FormFieldtype.php
+++ b/src/Forms/Fields/FormFieldtype.php
@@ -4,6 +4,7 @@
 
 use Facades\Statamic\Forms\Fields\FormFieldtypeRepository;
 use Illuminate\Contracts\Support\Arrayable;
+use Illuminate\Support\Collection;
 use Statamic\Extend\HasHandle;
 use Statamic\Extend\RegistersItself;
 use Statamic\Facades\Blink;
@@ -169,6 +170,21 @@ public function example(): ?array
         return null;
     }
 
+    public function defaultChart(): ?string
+    {
+        return null;
+    }
+
+    public function chartOptions(Collection $values): ?Collection
+    {
+        return null;
+    }
+
+    public function insights(): array
+    {
+        return [];
+    }
+
     public function view(): string
     {
         $handle = $this->handle();
diff --git a/src/Forms/Fieldtypes/Checkboxes.php b/src/Forms/Fieldtypes/Checkboxes.php
index 3633b177778..f6fe86ed840 100644
--- a/src/Forms/Fieldtypes/Checkboxes.php
+++ b/src/Forms/Fieldtypes/Checkboxes.php
@@ -2,6 +2,9 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Illuminate\Support\Collection;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -50,6 +53,18 @@ private function enabledOptions(): array
             ->all();
     }
 
+    public function defaultChart(): ?string
+    {
+        return HorizontalBar::class;
+    }
+
+    public function chartOptions(Collection $values): ?Collection
+    {
+        return collect($this->enabledOptions())
+            ->map(fn ($label, $key) => new ChartOption($key, $label, icon: 'checkbox-filled'))
+            ->values();
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/Currency.php b/src/Forms/Fieldtypes/Currency.php
index a202b135cd4..247f8df0bcb 100644
--- a/src/Forms/Fieldtypes/Currency.php
+++ b/src/Forms/Fieldtypes/Currency.php
@@ -3,7 +3,10 @@
 namespace Statamic\Forms\Fieldtypes;
 
 use Statamic\Facades\Dictionary;
+use Statamic\Forms\Charts\VerticalBar;
 use Statamic\Forms\Fields\FormFieldtype;
+use Statamic\Forms\Insights\Average;
+use Statamic\Forms\Insights\MinMax;
 use Statamic\Support\Arr;
 
 use function Statamic\trans as __;
@@ -42,6 +45,23 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return VerticalBar::class;
+    }
+
+    public function insights(): array
+    {
+        $extra = Dictionary::find('currencies')->get($this->config('currency'))->extra();
+        $symbol = Arr::get($extra, 'symbol');
+        $decimals = Arr::get($extra, 'decimals', 2);
+
+        return [
+            new MinMax(prefix: $symbol, decimals: $decimals),
+            new Average(prefix: $symbol, decimals: $decimals),
+        ];
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/Dictionary.php b/src/Forms/Fieldtypes/Dictionary.php
index ea0caa72da4..64cdc4dddbe 100644
--- a/src/Forms/Fieldtypes/Dictionary.php
+++ b/src/Forms/Fieldtypes/Dictionary.php
@@ -2,6 +2,9 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Illuminate\Support\Collection;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\Lollipop;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -45,6 +48,22 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return Lollipop::class;
+    }
+
+    public function chartOptions(Collection $values): ?Collection
+    {
+        $dictionary = $this->toField()->fieldtype()->dictionary();
+
+        return $values->flatten()
+            ->countBy(fn ($value) => (string) $value)
+            ->sortDesc()
+            ->keys()
+            ->map(fn ($value) => new ChartOption((string) $value, $dictionary->get((string) $value)?->label()));
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/Dropdown.php b/src/Forms/Fieldtypes/Dropdown.php
index bc55effc128..a06a5b87adf 100644
--- a/src/Forms/Fieldtypes/Dropdown.php
+++ b/src/Forms/Fieldtypes/Dropdown.php
@@ -2,6 +2,9 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Illuminate\Support\Collection;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -77,6 +80,18 @@ private function enabledOptions(): array
             ->all();
     }
 
+    public function defaultChart(): ?string
+    {
+        return HorizontalBar::class;
+    }
+
+    public function chartOptions(Collection $values): ?Collection
+    {
+        return collect($this->enabledOptions())
+            ->map(fn ($label, $key) => new ChartOption($key, $label))
+            ->values();
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/Email.php b/src/Forms/Fieldtypes/Email.php
index a8ba2e059a2..50e66069150 100644
--- a/src/Forms/Fieldtypes/Email.php
+++ b/src/Forms/Fieldtypes/Email.php
@@ -2,6 +2,7 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -37,6 +38,11 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return HorizontalBar::class;
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/ImageChoice.php b/src/Forms/Fieldtypes/ImageChoice.php
index 6bc0f428181..16b78d45205 100644
--- a/src/Forms/Fieldtypes/ImageChoice.php
+++ b/src/Forms/Fieldtypes/ImageChoice.php
@@ -2,6 +2,9 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Illuminate\Support\Collection;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -102,6 +105,17 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return HorizontalBar::class;
+    }
+
+    public function chartOptions(Collection $values): ?Collection
+    {
+        return collect($this->toField()->fieldtype()->preload()['options'])
+            ->map(fn ($option) => new ChartOption($option['key'], $option['label'], image: $option['image'], badge: $option['letter']));
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/LongAnswer.php b/src/Forms/Fieldtypes/LongAnswer.php
index 7ce06999f90..43846e12b6c 100644
--- a/src/Forms/Fieldtypes/LongAnswer.php
+++ b/src/Forms/Fieldtypes/LongAnswer.php
@@ -2,6 +2,7 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -36,6 +37,11 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return HorizontalBar::class;
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/MultiChoice.php b/src/Forms/Fieldtypes/MultiChoice.php
index c0893984730..635bcfcd114 100644
--- a/src/Forms/Fieldtypes/MultiChoice.php
+++ b/src/Forms/Fieldtypes/MultiChoice.php
@@ -2,6 +2,9 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Illuminate\Support\Collection;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\Pie;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -51,6 +54,18 @@ private function enabledOptions(): array
             ->all();
     }
 
+    public function defaultChart(): ?string
+    {
+        return Pie::class;
+    }
+
+    public function chartOptions(Collection $values): ?Collection
+    {
+        return collect($this->enabledOptions())
+            ->map(fn ($label, $key) => new ChartOption($key, $label))
+            ->values();
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/Number.php b/src/Forms/Fieldtypes/Number.php
index 532601534af..b8a934c9194 100644
--- a/src/Forms/Fieldtypes/Number.php
+++ b/src/Forms/Fieldtypes/Number.php
@@ -2,7 +2,10 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Statamic\Forms\Charts\VerticalBar;
 use Statamic\Forms\Fields\FormFieldtype;
+use Statamic\Forms\Insights\Average;
+use Statamic\Forms\Insights\MinMax;
 use Statamic\Support\Arr;
 
 use function Statamic\trans as __;
@@ -44,6 +47,16 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return VerticalBar::class;
+    }
+
+    public function insights(): array
+    {
+        return [new MinMax, new Average];
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/OpinionScale.php b/src/Forms/Fieldtypes/OpinionScale.php
index 48bb12e1568..61752837a01 100644
--- a/src/Forms/Fieldtypes/OpinionScale.php
+++ b/src/Forms/Fieldtypes/OpinionScale.php
@@ -2,7 +2,11 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Illuminate\Support\Collection;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\VerticalBar;
 use Statamic\Forms\Fields\FormFieldtype;
+use Statamic\Forms\Insights\Average;
 use Statamic\Support\Arr;
 
 use function Statamic\trans as __;
@@ -67,6 +71,24 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return VerticalBar::class;
+    }
+
+    public function chartOptions(Collection $values): ?Collection
+    {
+        [$min, $max] = $this->normalizedRange();
+
+        return collect(range($min, $max))
+            ->map(fn ($value) => new ChartOption((string) $value));
+    }
+
+    public function insights(): array
+    {
+        return [new Average];
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/Phone.php b/src/Forms/Fieldtypes/Phone.php
index 56df4958a11..672b80ff1dc 100644
--- a/src/Forms/Fieldtypes/Phone.php
+++ b/src/Forms/Fieldtypes/Phone.php
@@ -2,6 +2,7 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -35,6 +36,11 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return HorizontalBar::class;
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/Ranking.php b/src/Forms/Fieldtypes/Ranking.php
index 9a40b695dcd..ee5f8f7508e 100644
--- a/src/Forms/Fieldtypes/Ranking.php
+++ b/src/Forms/Fieldtypes/Ranking.php
@@ -2,6 +2,9 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Illuminate\Support\Collection;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\RankedOptions;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -49,6 +52,18 @@ private function enabledOptions(): array
             ->all();
     }
 
+    public function defaultChart(): ?string
+    {
+        return RankedOptions::class;
+    }
+
+    public function chartOptions(Collection $values): ?Collection
+    {
+        return collect($this->enabledOptions())
+            ->map(fn ($label, $key) => new ChartOption($key, $label))
+            ->values();
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/ShortAnswer.php b/src/Forms/Fieldtypes/ShortAnswer.php
index cc342b829b9..b748a98f0c4 100644
--- a/src/Forms/Fieldtypes/ShortAnswer.php
+++ b/src/Forms/Fieldtypes/ShortAnswer.php
@@ -2,6 +2,7 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -36,6 +37,11 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return HorizontalBar::class;
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/StarRating.php b/src/Forms/Fieldtypes/StarRating.php
index ac514d0b292..30b291201ca 100644
--- a/src/Forms/Fieldtypes/StarRating.php
+++ b/src/Forms/Fieldtypes/StarRating.php
@@ -2,7 +2,11 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Illuminate\Support\Collection;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormFieldtype;
+use Statamic\Forms\Insights\StarRating as StarRatingInsight;
 use Statamic\Support\Arr;
 
 use function Statamic\trans as __;
@@ -53,6 +57,38 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return HorizontalBar::class;
+    }
+
+    public function chartOptions(Collection $values): ?Collection
+    {
+        $options = collect();
+        $step = $this->config('allow_half_stars') ? 0.5 : 1;
+
+        for ($stars = $this->maxStars(); $stars >= $step; $stars -= $step) {
+            $options->push(new ChartOption($this->starKey($stars), icon: 'star-filled'));
+        }
+
+        return $options;
+    }
+
+    private function starKey(float $stars): string
+    {
+        return $stars == (int) $stars ? (string) (int) $stars : (string) $stars;
+    }
+
+    private function maxStars(): int
+    {
+        return max(1, min(10, (int) $this->config('max_stars', 5)));
+    }
+
+    public function insights(): array
+    {
+        return [new StarRatingInsight(total: $this->maxStars())];
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/Toggle.php b/src/Forms/Fieldtypes/Toggle.php
index 17382fca445..f6d542087b8 100644
--- a/src/Forms/Fieldtypes/Toggle.php
+++ b/src/Forms/Fieldtypes/Toggle.php
@@ -2,7 +2,11 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Illuminate\Support\Collection;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormFieldtype;
+use Statamic\Forms\Insights\Checked;
 use Statamic\Support\Arr;
 
 use function Statamic\trans as __;
@@ -36,6 +40,24 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return HorizontalBar::class;
+    }
+
+    public function chartOptions(Collection $values): ?Collection
+    {
+        return collect([
+            new ChartOption('true', __('Yes'), icon: 'checkmark-circle-filled'),
+            new ChartOption('false', __('No'), icon: 'delete-circle-filled'),
+        ]);
+    }
+
+    public function insights(): array
+    {
+        return [new Checked];
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/Website.php b/src/Forms/Fieldtypes/Website.php
index 2f8733f7a95..c6f736babb6 100644
--- a/src/Forms/Fieldtypes/Website.php
+++ b/src/Forms/Fieldtypes/Website.php
@@ -2,6 +2,7 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -38,6 +39,11 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return HorizontalBar::class;
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Fieldtypes/YesNo.php b/src/Forms/Fieldtypes/YesNo.php
index 1c6ced7e0b0..172013905ff 100644
--- a/src/Forms/Fieldtypes/YesNo.php
+++ b/src/Forms/Fieldtypes/YesNo.php
@@ -2,6 +2,9 @@
 
 namespace Statamic\Forms\Fieldtypes;
 
+use Illuminate\Support\Collection;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Support\Arr;
 
@@ -34,6 +37,19 @@ public function toFieldArray(): array
         ];
     }
 
+    public function defaultChart(): ?string
+    {
+        return HorizontalBar::class;
+    }
+
+    public function chartOptions(Collection $values): ?Collection
+    {
+        return collect([
+            new ChartOption('yes', __('Yes'), icon: 'checkmark-circle-filled'),
+            new ChartOption('no', __('No'), icon: 'delete-circle-filled'),
+        ]);
+    }
+
     public function example(): ?array
     {
         return [
diff --git a/src/Forms/Form.php b/src/Forms/Form.php
index 30ec825563d..7b82b4db06f 100644
--- a/src/Forms/Form.php
+++ b/src/Forms/Form.php
@@ -4,6 +4,7 @@
 
 use Carbon\Carbon;
 use Illuminate\Contracts\Support\Arrayable;
+use Illuminate\Support\Collection;
 use Statamic\Contracts\Data\Augmentable;
 use Statamic\Contracts\Data\Augmented;
 use Statamic\Contracts\Forms\Form as FormContract;
@@ -27,7 +28,10 @@
 use Statamic\Facades\User;
 use Statamic\Facades\YAML;
 use Statamic\Fields\Blueprint;
+use Statamic\Forms\Charts\Chart;
+use Statamic\Forms\Charts\SummaryChart;
 use Statamic\Forms\Exporters\Exporter;
+use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fields\FormFields;
 use Statamic\Statamic;
 use Statamic\Support\Arr;
@@ -46,6 +50,7 @@ class Form implements Arrayable, Augmentable, ContainsQueryableValues, FormContr
     protected $honeypot;
     protected $store;
     protected $email;
+    protected $charts;
     protected $afterSaveCallbacks = [];
     protected $withEvents = true;
 
@@ -302,6 +307,55 @@ public function email($emails = null)
         return $this->fluentlyGetOrSet('email')->args(func_get_args());
     }
 
+    /**
+     * Get or set the submission summary charts.
+     *
+     * @param  mixed  $charts
+     * @return mixed
+     */
+    public function charts($charts = null)
+    {
+        return $this->fluentlyGetOrSet('charts')->args(func_get_args());
+    }
+
+    /**
+     * Get the resolved charts for the submission summary.
+     */
+    public function summaryCharts(): Collection
+    {
+        $fields = $this->formFields()->fields()
+            ->reject(fn (FormField $field): bool => $field->config()['hidden'] ?? false);
+
+        if (is_null($this->charts)) {
+            return $fields
+                ->filter(fn (FormField $field): bool => $field->fieldtype()->defaultChart() !== null)
+                ->map(fn (FormField $field): SummaryChart => new SummaryChart($field, app($field->fieldtype()->defaultChart())))
+                ->values();
+        }
+
+        return collect($this->charts)
+            ->map(function ($config) use ($fields): ?SummaryChart {
+                if (! $field = $fields->get(Arr::get($config, 'field'))) {
+                    return null;
+                }
+
+                if (! $chart = $this->resolveChart($field, Arr::get($config, 'chart'))) {
+                    return null;
+                }
+
+                return new SummaryChart($field, $chart);
+            })
+            ->filter()
+            ->values();
+    }
+
+    private function resolveChart(FormField $field, ?string $handle): ?Chart
+    {
+        $class = app('statamic.form-charts')->get($handle) ?? $field->fieldtype()->defaultChart();
+
+        return $class ? app($class) : null;
+    }
+
     /**
      * Get the form fields off the blueprint.
      *
@@ -362,6 +416,7 @@ public function save()
         $data = $this->data->merge(collect([
             'title' => $this->title,
             'fields' => $this->formFields()->contents(),
+            'charts' => $this->charts,
             'honeypot' => $this->honeypot,
             'email' => collect(isset($this->email['to']) ? [$this->email] : $this->email)->map(function ($email) {
                 $email['markdown'] = Arr::get($email, 'markdown') === true ? true : null;
@@ -375,6 +430,10 @@ public function save()
             $data['store'] = false;
         }
 
+        if ($this->charts === []) {
+            $data['charts'] = [];
+        }
+
         if ($this->get('generate_fake_submissions') === false) {
             $data['generate_fake_submissions'] = false;
         }
@@ -439,6 +498,7 @@ public function hydrate()
 
         $methods = [
             'title',
+            'charts',
             'honeypot',
             'store',
             'email',
diff --git a/src/Forms/Insights/Average.php b/src/Forms/Insights/Average.php
new file mode 100644
index 00000000000..0e4eacd6adc
--- /dev/null
+++ b/src/Forms/Insights/Average.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Statamic\Forms\Insights;
+
+use Illuminate\Support\Collection;
+
+class Average extends Insight
+{
+    public function __construct(private ?string $prefix = null, private ?string $suffix = null, private int $decimals = 1)
+    {
+    }
+
+    public function props(Collection $values): array
+    {
+        $values = $values->filter(fn ($value) => is_numeric($value));
+
+        return array_filter([
+            'average' => number_format($values->avg() ?? 0, $this->decimals),
+            'prefix' => $this->prefix,
+            'suffix' => $this->suffix,
+        ], fn ($value) => $value !== null);
+    }
+}
diff --git a/src/Forms/Insights/Checked.php b/src/Forms/Insights/Checked.php
new file mode 100644
index 00000000000..00e20f0be49
--- /dev/null
+++ b/src/Forms/Insights/Checked.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Statamic\Forms\Insights;
+
+use Illuminate\Support\Collection;
+
+class Checked extends Insight
+{
+    public function props(Collection $values): array
+    {
+        $total = $values->count();
+        $checked = $values->filter(fn ($value) => filter_var($value, FILTER_VALIDATE_BOOLEAN))->count();
+
+        return [
+            'count' => $checked,
+            'percent' => $total ? (int) round($checked / $total * 100) : 0,
+        ];
+    }
+}
diff --git a/src/Forms/Insights/Insight.php b/src/Forms/Insights/Insight.php
new file mode 100644
index 00000000000..de3f89f4660
--- /dev/null
+++ b/src/Forms/Insights/Insight.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace Statamic\Forms\Insights;
+
+use Illuminate\Support\Collection;
+use Statamic\Extend\HasHandle;
+use Statamic\Extend\HasTitle;
+use Statamic\Extend\RegistersItself;
+
+abstract class Insight
+{
+    use HasHandle, HasTitle, RegistersItself;
+
+    protected ?string $component = null;
+
+    public function component(): string
+    {
+        return $this->component ?? str_replace('_', '-', static::handle()).'-insight';
+    }
+
+    abstract public function props(Collection $values): array;
+}
diff --git a/src/Forms/Insights/MinMax.php b/src/Forms/Insights/MinMax.php
new file mode 100644
index 00000000000..7d8b86ea1d4
--- /dev/null
+++ b/src/Forms/Insights/MinMax.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Statamic\Forms\Insights;
+
+use Illuminate\Support\Collection;
+
+class MinMax extends Insight
+{
+    public function __construct(private ?string $prefix = null, private ?string $suffix = null, private int $decimals = 0)
+    {
+    }
+
+    public function props(Collection $values): array
+    {
+        $values = $values->filter(fn ($value) => is_numeric($value));
+
+        return array_filter([
+            'min' => number_format($values->min() ?? 0, $this->decimals),
+            'max' => number_format($values->max() ?? 0, $this->decimals),
+            'prefix' => $this->prefix,
+            'suffix' => $this->suffix,
+        ], fn ($value) => $value !== null);
+    }
+}
diff --git a/src/Forms/Insights/StarRating.php b/src/Forms/Insights/StarRating.php
new file mode 100644
index 00000000000..5208d021422
--- /dev/null
+++ b/src/Forms/Insights/StarRating.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace Statamic\Forms\Insights;
+
+use Illuminate\Support\Collection;
+
+class StarRating extends Insight
+{
+    public function __construct(private int $total)
+    {
+    }
+
+    public function props(Collection $values): array
+    {
+        $values = $values->filter(fn ($value) => is_numeric($value));
+
+        return [
+            'average' => round($values->avg() ?? 0, 1),
+            'total' => $this->total,
+        ];
+    }
+}
diff --git a/src/Http/Controllers/CP/Forms/FormSubmissionsController.php b/src/Http/Controllers/CP/Forms/FormSubmissionsController.php
index 5cf37133f99..0015d02010b 100644
--- a/src/Http/Controllers/CP/Forms/FormSubmissionsController.php
+++ b/src/Http/Controllers/CP/Forms/FormSubmissionsController.php
@@ -55,6 +55,8 @@ public function index(FilteredRequest $request, $form)
             ]),
             'actionUrl' => cp_route('forms.submissions.actions.run', $form->handle()),
             'generateFakeSubmissionUrl' => cp_route('forms.submissions.generate-fake', $form->handle()),
+            'summaryUrl' => Statamic::formsProInstalled() ? cp_route('forms.submissions.summary', $form->handle()) : null,
+            'chartsUpdateUrl' => Statamic::formsProInstalled() ? cp_route('forms.submissions.charts.update', $form->handle()) : null,
             'exporters' => $form->exporters()->map(fn ($exporter) => [
                 'handle' => $exporter->handle(),
                 'title' => $exporter->title(),
diff --git a/src/Http/Controllers/CP/Forms/FormSummaryController.php b/src/Http/Controllers/CP/Forms/FormSummaryController.php
new file mode 100644
index 00000000000..ffb8f3dd046
--- /dev/null
+++ b/src/Http/Controllers/CP/Forms/FormSummaryController.php
@@ -0,0 +1,142 @@
+<?php
+
+namespace Statamic\Http\Controllers\CP\Forms;
+
+use Illuminate\Support\Collection;
+use Statamic\Contracts\Forms\SubmissionQueryBuilder;
+use Statamic\Facades\User;
+use Statamic\Forms\Charts\SummaryChart;
+use Statamic\Forms\Fields\FormField;
+use Statamic\Forms\Insights\Insight;
+use Statamic\Http\Controllers\CP\CpController;
+use Statamic\Http\Controllers\CP\Forms\Concerns\QueriesFormSubmissionSearch;
+use Statamic\Http\Requests\FilteredRequest;
+use Statamic\Query\Scopes\Filters\Concerns\QueriesFilters;
+use Statamic\Statamic;
+
+class FormSummaryController extends CpController
+{
+    use QueriesFilters, QueriesFormSubmissionSearch;
+
+    public function __invoke(FilteredRequest $request, $form): array
+    {
+        abort_unless(Statamic::formsProInstalled(), 404);
+
+        $this->authorize('viewSubmissions', $form);
+
+        $charts = $form->summaryCharts();
+        $numbers = $this->fieldNumbers($form);
+
+        [$total, $values] = $this->collectValues($this->query($request, $form), $charts);
+
+        return [
+            'total' => $total,
+            'fields' => $charts
+                ->map(fn (SummaryChart $summary): array => $this->summarizeField(
+                    $summary,
+                    $values[$summary->field()->handle()],
+                    $numbers->get($summary->field()->handle())
+                ))
+                ->values(),
+            'meta' => $this->meta($form),
+        ];
+    }
+
+    private function fieldNumbers($form): Collection
+    {
+        return $form->formFields()->fields()
+            ->reject(fn (FormField $field): bool => $field->config()['hidden'] ?? false)
+            ->filter(fn (FormField $field): bool => $field->fieldtype()->collectsValue())
+            ->values()
+            ->mapWithKeys(fn (FormField $field, int $index): array => [$field->handle() => $index + 1]);
+    }
+
+    private function query(FilteredRequest $request, $form): SubmissionQueryBuilder
+    {
+        $query = $form->querySubmissions();
+
+        $this->queryFilters($query, $request->filters, ['form' => $form->handle()]);
+
+        $this->applySubmissionSearch($query, $form, $request->input('search'));
+
+        return $query;
+    }
+
+    private function collectValues(SubmissionQueryBuilder $query, Collection $charts): array
+    {
+        $total = 0;
+        $values = $charts->mapWithKeys(fn (SummaryChart $summary) => [$summary->field()->handle() => collect()]);
+
+        foreach ($query->lazy(500) as $submission) {
+            $total++;
+
+            $values->each(function (Collection $collected, string $handle) use ($submission) {
+                if (filled($value = $submission->get($handle))) {
+                    $collected->put($submission->id(), $value);
+                }
+            });
+        }
+
+        return [$total, $values];
+    }
+
+    private function summarizeField(SummaryChart $summary, Collection $values, ?int $number): array
+    {
+        $field = $summary->field();
+        $fieldtype = $field->fieldtype();
+        $chart = $summary->chart();
+
+        return [
+            'handle' => $field->handle(),
+            'display' => $field->display(),
+            'icon' => $fieldtype->icon(),
+            'fieldtype' => $fieldtype->handle(),
+            'number' => $number,
+            'responses' => $values->count(),
+            'chart' => [
+                'handle' => $chart::handle(),
+                'component' => $chart->component(),
+                'props' => $summary->props($values),
+            ],
+            'insights' => collect($fieldtype->insights())
+                ->map(fn (Insight $insight): array => [
+                    'handle' => $insight::handle(),
+                    'component' => $insight->component(),
+                    'props' => $insight->props($values),
+                ])
+                ->values(),
+        ];
+    }
+
+    private function meta($form): array
+    {
+        if (! User::current()->can('edit', $form)) {
+            return [];
+        }
+
+        return [
+            'charts' => app('statamic.form-charts')
+                ->map(function (string $class): array {
+                    $chart = app($class);
+
+                    return [
+                        'handle' => $chart::handle(),
+                        'title' => $chart::title(),
+                        'icon' => $chart->icon(),
+                        'component' => $chart->component(),
+                    ];
+                })
+                ->values(),
+            'fields' => $form->formFields()->fields()
+                ->reject(fn (FormField $field): bool => $field->config()['hidden'] ?? false)
+                ->filter(fn (FormField $field): bool => $field->fieldtype()->defaultChart() !== null)
+                ->map(fn (FormField $field): array => [
+                    'handle' => $field->handle(),
+                    'display' => $field->display(),
+                    'icon' => $field->fieldtype()->icon(),
+                    'default_chart' => $field->fieldtype()->defaultChart()::handle(),
+                ])
+                ->values(),
+        ];
+    }
+}
diff --git a/src/Http/Controllers/CP/Forms/UpdateFormChartsController.php b/src/Http/Controllers/CP/Forms/UpdateFormChartsController.php
new file mode 100644
index 00000000000..afd55470457
--- /dev/null
+++ b/src/Http/Controllers/CP/Forms/UpdateFormChartsController.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace Statamic\Http\Controllers\CP\Forms;
+
+use Illuminate\Http\Request;
+use Illuminate\Validation\ValidationException;
+use Statamic\Http\Controllers\CP\CpController;
+use Statamic\Statamic;
+
+use function Statamic\trans as __;
+
+class UpdateFormChartsController extends CpController
+{
+    public function __invoke(Request $request, $form)
+    {
+        abort_unless(Statamic::formsProInstalled(), 404);
+
+        $this->authorize('edit', $form);
+
+        $request->validate([
+            'charts' => 'present|array',
+            'charts.*.field' => 'required|string|distinct',
+            'charts.*.chart' => 'required|string',
+        ]);
+
+        $charts = collect($request->input('charts'))
+            ->map(fn (array $config): array => [
+                'field' => $config['field'],
+                'chart' => $config['chart'],
+            ])
+            ->each(fn ($config) => $this->validateChart($form, $config));
+
+        $form->charts($charts->values()->all())->save();
+
+        return response()->noContent();
+    }
+
+    private function validateChart($form, array $config): void
+    {
+        $field = $form->formFields()->field($config['field']);
+
+        if (! $field) {
+            throw ValidationException::withMessages([
+                'charts' => __('statamic::validation.form_chart_unknown_field', ['field' => $config['field']]),
+            ]);
+        }
+
+        if ($field->config()['hidden'] ?? false) {
+            throw ValidationException::withMessages([
+                'charts' => __('statamic::validation.form_chart_hidden_field', ['field' => $config['field']]),
+            ]);
+        }
+
+        if (! app('statamic.form-charts')->has($config['chart'])) {
+            throw ValidationException::withMessages([
+                'charts' => __('statamic::validation.form_chart_unknown_chart', ['chart' => $config['chart']]),
+            ]);
+        }
+    }
+}
diff --git a/src/Providers/AddonServiceProvider.php b/src/Providers/AddonServiceProvider.php
index c9ae334e811..cf389fd08f9 100644
--- a/src/Providers/AddonServiceProvider.php
+++ b/src/Providers/AddonServiceProvider.php
@@ -21,7 +21,9 @@
 use Statamic\Facades\Path;
 use Statamic\Facades\YAML;
 use Statamic\Fields\Fieldtype;
+use Statamic\Forms\Charts\Chart;
 use Statamic\Forms\Fields\FormFieldtype;
+use Statamic\Forms\Insights\Insight;
 use Statamic\Forms\JsDrivers\JsDriver;
 use Statamic\Modifiers\Modifier;
 use Statamic\Query\Scopes\Scope;
@@ -76,6 +78,16 @@ abstract class AddonServiceProvider extends ServiceProvider
      */
     protected $formFieldtypes = [];
 
+    /**
+     * @var list<class-string<Chart>>
+     */
+    protected $formCharts = [];
+
+    /**
+     * @var list<class-string<Insight>>
+     */
+    protected $formInsights = [];
+
     /**
      * @var list<class-string<Modifier>>
      */
@@ -210,6 +222,8 @@ public function boot()
                 ->bootDictionaries()
                 ->bootFieldtypes()
                 ->bootFormFieldtypes()
+                ->bootFormCharts()
+                ->bootFormInsights()
                 ->bootModifiers()
                 ->bootWidgets()
                 ->bootFormJsDrivers()
@@ -381,6 +395,32 @@ protected function bootFormFieldtypes()
         return $this;
     }
 
+    protected function bootFormCharts()
+    {
+        $formCharts = collect($this->formCharts)
+            ->merge($this->autoloadFilesFromFolder('FormCharts', Chart::class))
+            ->unique();
+
+        foreach ($formCharts as $class) {
+            $class::register();
+        }
+
+        return $this;
+    }
+
+    protected function bootFormInsights()
+    {
+        $formInsights = collect($this->formInsights)
+            ->merge($this->autoloadFilesFromFolder('FormInsights', Insight::class))
+            ->unique();
+
+        foreach ($formInsights as $class) {
+            $class::register();
+        }
+
+        return $this;
+    }
+
     protected function bootModifiers()
     {
         $modifiers = collect($this->modifiers)
diff --git a/src/Providers/ExtensionServiceProvider.php b/src/Providers/ExtensionServiceProvider.php
index d0f524d1433..3caefe52c13 100644
--- a/src/Providers/ExtensionServiceProvider.php
+++ b/src/Providers/ExtensionServiceProvider.php
@@ -13,7 +13,9 @@
 use Statamic\Fields\Fieldtype;
 use Statamic\Fieldtypes;
 use Statamic\Forms;
+use Statamic\Forms\Charts\Chart;
 use Statamic\Forms\Fields\FormFieldtype;
+use Statamic\Forms\Insights\Insight;
 use Statamic\Forms\JsDrivers;
 use Statamic\Modifiers\CoreModifiers;
 use Statamic\Modifiers\Modifier;
@@ -170,6 +172,21 @@ class ExtensionServiceProvider extends ServiceProvider
         Forms\Fieldtypes\YesNo::class,
     ];
 
+    protected $formCharts = [
+        Forms\Charts\HorizontalBar::class,
+        Forms\Charts\Lollipop::class,
+        Forms\Charts\Pie::class,
+        Forms\Charts\RankedOptions::class,
+        Forms\Charts\VerticalBar::class,
+    ];
+
+    protected $formInsights = [
+        Forms\Insights\Average::class,
+        Forms\Insights\Checked::class,
+        Forms\Insights\MinMax::class,
+        Forms\Insights\StarRating::class,
+    ];
+
     protected $modifierAliases = [
         '+' => 'add',
         '-' => 'subtract',
@@ -359,6 +376,16 @@ protected function registerExtensions()
                 'directory' => 'FormFieldtypes',
                 'extensions' => $this->formFieldtypes,
             ],
+            'form-charts' => [
+                'class' => Chart::class,
+                'directory' => 'FormCharts',
+                'extensions' => $this->formCharts,
+            ],
+            'form-insights' => [
+                'class' => Insight::class,
+                'directory' => 'FormInsights',
+                'extensions' => $this->formInsights,
+            ],
             'modifiers' => [
                 'class' => Modifier::class,
                 'directory' => 'Modifiers',
diff --git a/tests/Feature/Forms/FormSummaryTest.php b/tests/Feature/Forms/FormSummaryTest.php
new file mode 100644
index 00000000000..70c145925dc
--- /dev/null
+++ b/tests/Feature/Forms/FormSummaryTest.php
@@ -0,0 +1,215 @@
+<?php
+
+namespace Tests\Feature\Forms;
+
+use Facades\Statamic\Console\Processes\Composer;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\Form;
+use Statamic\Facades\FormSubmission;
+use Statamic\Facades\User;
+use Tests\FakesRoles;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class FormSummaryTest extends TestCase
+{
+    use FakesRoles;
+    use PreventSavingStacheItemsToDisk;
+
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        Composer::shouldReceive('isInstalled')->with('statamic/forms-pro')->andReturnTrue()->byDefault();
+    }
+
+    protected function resolveApplicationConfiguration($app)
+    {
+        parent::resolveApplicationConfiguration($app);
+
+        $app['config']['statamic.forms.forms'] = $this->fakeStacheDirectory.'/forms';
+    }
+
+    #[Test]
+    public function it_requires_forms_pro()
+    {
+        Composer::shouldReceive('isInstalled')->with('statamic/forms-pro')->andReturnFalse();
+
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($this->superUser())
+            ->getJson(cp_route('forms.submissions.summary', $form->handle()))
+            ->assertNotFound();
+    }
+
+    #[Test]
+    public function it_shows_the_summary_with_the_view_form_submissions_permission()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'view form submissions']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($user)
+            ->getJson(cp_route('forms.submissions.summary', $form->handle()))
+            ->assertOk();
+    }
+
+    #[Test]
+    public function it_denies_access_without_permission()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = $this->makeForm();
+
+        $this
+            ->from('/original')
+            ->actingAs($user)
+            ->get(cp_route('forms.submissions.summary', $form->handle()))
+            ->assertRedirect('/original')
+            ->assertSessionHas('error');
+    }
+
+    #[Test]
+    public function it_summarizes_fields_with_a_default_chart_in_blueprint_order()
+    {
+        $form = $this->makeForm();
+
+        $this->submit($form, ['name' => 'Alice', 'color' => 'red', 'rating' => 5]);
+        $this->submit($form, ['name' => 'Bob', 'color' => 'red', 'rating' => 4]);
+        $this->submit($form, ['name' => 'Carol', 'color' => 'blue']);
+
+        $response = $this
+            ->actingAs($this->superUser())
+            ->getJson(cp_route('forms.submissions.summary', $form->handle()))
+            ->assertOk()
+            ->assertJsonPath('total', 3)
+            ->assertJsonPath('fields.0.handle', 'name')
+            ->assertJsonPath('fields.1.handle', 'color')
+            ->assertJsonPath('fields.1.fieldtype', 'multi_choice')
+            ->assertJsonPath('fields.1.responses', 3)
+            ->assertJsonPath('fields.1.chart.handle', 'pie')
+            ->assertJsonPath('fields.1.chart.component', 'ui-pie-chart')
+            ->assertJsonPath('fields.2.handle', 'rating')
+            ->assertJsonPath('fields.2.responses', 2)
+            ->assertJsonPath('fields.2.insights.0.handle', 'star_rating')
+            ->assertJsonPath('fields.2.insights.0.component', 'star-rating-insight')
+            ->assertJsonPath('fields.2.insights.0.props.average', 4.5)
+            ->assertJsonPath('fields.2.insights.0.props.total', 5);
+
+        $this->assertEquals([
+            ['key' => 'red', 'label' => 'Red', 'count' => 2, 'percent' => 67],
+            ['key' => 'blue', 'label' => 'Blue', 'count' => 1, 'percent' => 33],
+        ], $response->json('fields.1.chart.props.items'));
+
+        $this->assertCount(3, $response->json('fields'));
+    }
+
+    #[Test]
+    public function it_ignores_fields_that_cant_be_charted()
+    {
+        $form = tap(Form::make('survey')->formFields([
+            'sections' => [
+                [
+                    'fields' => [
+                        ['handle' => 'intro', 'field' => ['type' => 'heading', 'display' => 'Tell us about yourself']],
+                        ['handle' => 'joined', 'field' => ['type' => 'date_picker', 'display' => 'When did you join?']],
+                        ['handle' => 'color', 'field' => ['type' => 'multi_choice', 'options' => ['red' => 'Red']]],
+                    ],
+                ],
+            ],
+        ]))->save();
+
+        $this
+            ->actingAs($this->superUser())
+            ->getJson(cp_route('forms.submissions.summary', $form->handle()))
+            ->assertOk()
+            ->assertJsonCount(1, 'fields')
+            ->assertJsonPath('fields.0.handle', 'color')
+            ->assertJsonCount(1, 'meta.fields')
+            ->assertJsonPath('meta.fields.0.handle', 'color');
+    }
+
+    #[Test]
+    public function it_uses_the_saved_chart_layout()
+    {
+        $form = $this->makeForm();
+        $form->charts([['field' => 'rating', 'chart' => 'horizontal_bar']])->save();
+
+        $this
+            ->actingAs($this->superUser())
+            ->getJson(cp_route('forms.submissions.summary', $form->handle()))
+            ->assertOk()
+            ->assertJsonCount(1, 'fields')
+            ->assertJsonPath('fields.0.handle', 'rating')
+            ->assertJsonPath('fields.0.chart.handle', 'horizontal_bar');
+    }
+
+    #[Test]
+    public function it_scopes_counts_to_the_search_query()
+    {
+        $form = $this->makeForm();
+
+        $this->submit($form, ['name' => 'Alice', 'color' => 'red']);
+        $this->submit($form, ['name' => 'Bob', 'color' => 'blue']);
+
+        $this
+            ->actingAs($this->superUser())
+            ->getJson(cp_route('forms.submissions.summary', $form->handle()).'?search=alice')
+            ->assertOk()
+            ->assertJsonPath('total', 1)
+            ->assertJsonPath('fields.1.chart.props.items.0.count', 1)
+            ->assertJsonPath('fields.1.chart.props.items.1.count', 0);
+    }
+
+    #[Test]
+    public function it_only_includes_meta_for_users_who_can_edit_the_form()
+    {
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($this->superUser())
+            ->getJson(cp_route('forms.submissions.summary', $form->handle()))
+            ->assertJsonCount(5, 'meta.charts')
+            ->assertJsonPath('meta.charts.0.handle', 'horizontal_bar')
+            ->assertJsonPath('meta.charts.0.component', 'ui-horizontal-bar-chart')
+            ->assertJsonPath('meta.fields.0.handle', 'name')
+            ->assertJsonPath('meta.fields.1.handle', 'color')
+            ->assertJsonPath('meta.fields.1.default_chart', 'pie')
+            ->assertJsonPath('meta.fields.2.handle', 'rating');
+
+        $this->setTestRoles(['test' => ['access cp', 'view form submissions']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+
+        $this
+            ->actingAs($user)
+            ->getJson(cp_route('forms.submissions.summary', $form->handle()))
+            ->assertJsonPath('meta', []);
+    }
+
+    private function makeForm()
+    {
+        return tap(Form::make('survey')->formFields([
+            'sections' => [
+                [
+                    'fields' => [
+                        ['handle' => 'name', 'field' => ['type' => 'short_answer']],
+                        ['handle' => 'color', 'field' => ['type' => 'multi_choice', 'options' => ['red' => 'Red', 'blue' => 'Blue']]],
+                        ['handle' => 'rating', 'field' => ['type' => 'star_rating']],
+                    ],
+                ],
+            ],
+        ]))->save();
+    }
+
+    private function submit($form, array $data)
+    {
+        FormSubmission::make()->form($form)->data($data)->save();
+    }
+
+    private function superUser()
+    {
+        return tap(User::make()->makeSuper())->save();
+    }
+}
diff --git a/tests/Feature/Forms/UpdateFormChartsTest.php b/tests/Feature/Forms/UpdateFormChartsTest.php
new file mode 100644
index 00000000000..ec044c62954
--- /dev/null
+++ b/tests/Feature/Forms/UpdateFormChartsTest.php
@@ -0,0 +1,203 @@
+<?php
+
+namespace Tests\Feature\Forms;
+
+use Facades\Statamic\Console\Processes\Composer;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\Form;
+use Statamic\Facades\User;
+use Tests\FakesRoles;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class UpdateFormChartsTest extends TestCase
+{
+    use FakesRoles;
+    use PreventSavingStacheItemsToDisk;
+
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        Composer::shouldReceive('isInstalled')->with('statamic/forms-pro')->andReturnTrue()->byDefault();
+    }
+
+    protected function resolveApplicationConfiguration($app)
+    {
+        parent::resolveApplicationConfiguration($app);
+
+        $app['config']['statamic.forms.forms'] = $this->fakeStacheDirectory.'/forms';
+    }
+
+    #[Test]
+    public function it_requires_forms_pro()
+    {
+        Composer::shouldReceive('isInstalled')->with('statamic/forms-pro')->andReturnFalse();
+
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($this->userWithPermission())
+            ->patchJson(cp_route('forms.submissions.charts.update', $form->handle()), ['charts' => []])
+            ->assertNotFound();
+    }
+
+    #[Test]
+    public function it_denies_access_without_permission()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'view form submissions']]);
+        $user = tap(User::make()->assignRole('test'))->save();
+        $form = $this->makeForm();
+
+        $this
+            ->from('/original')
+            ->actingAs($user)
+            ->patch(cp_route('forms.submissions.charts.update', $form->handle()), ['charts' => []])
+            ->assertRedirect('/original')
+            ->assertSessionHas('error');
+    }
+
+    #[Test]
+    public function it_saves_the_chart_layout()
+    {
+        $form = $this->makeForm();
+
+        $charts = [
+            ['field' => 'rating', 'chart' => 'horizontal_bar'],
+            ['field' => 'color', 'chart' => 'pie'],
+        ];
+
+        $this
+            ->actingAs($this->userWithPermission())
+            ->patchJson(cp_route('forms.submissions.charts.update', $form->handle()), ['charts' => $charts])
+            ->assertNoContent();
+
+        $this->assertEquals($charts, Form::find('survey')->charts());
+    }
+
+    #[Test]
+    public function it_saves_an_empty_layout()
+    {
+        $form = $this->makeForm();
+        $form->charts([['field' => 'color', 'chart' => 'pie']])->save();
+
+        $this
+            ->actingAs($this->userWithPermission())
+            ->patchJson(cp_route('forms.submissions.charts.update', $form->handle()), ['charts' => []])
+            ->assertNoContent();
+
+        $this->assertEquals([], Form::find('survey')->charts());
+        $this->assertCount(0, Form::find('survey')->summaryCharts());
+    }
+
+    #[Test]
+    public function it_rejects_fields_that_dont_exist_on_the_form()
+    {
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($this->userWithPermission())
+            ->patchJson(cp_route('forms.submissions.charts.update', $form->handle()), [
+                'charts' => [['field' => 'missing', 'chart' => 'pie']],
+            ])
+            ->assertUnprocessable()
+            ->assertJsonValidationErrors('charts');
+
+        $this->assertNull(Form::find('survey')->charts());
+    }
+
+    #[Test]
+    public function it_rejects_hidden_fields()
+    {
+        $form = tap(Form::make('survey')->formFields([
+            'sections' => [
+                [
+                    'fields' => [
+                        ['handle' => 'color', 'field' => ['type' => 'multi_choice', 'options' => ['red' => 'Red'], 'hidden' => true]],
+                    ],
+                ],
+            ],
+        ]))->save();
+
+        $this
+            ->actingAs($this->userWithPermission())
+            ->patchJson(cp_route('forms.submissions.charts.update', $form->handle()), [
+                'charts' => [['field' => 'color', 'chart' => 'pie']],
+            ])
+            ->assertUnprocessable()
+            ->assertJsonValidationErrors('charts');
+
+        $this->assertNull(Form::find('survey')->charts());
+    }
+
+    #[Test]
+    public function it_rejects_duplicate_fields()
+    {
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($this->userWithPermission())
+            ->patchJson(cp_route('forms.submissions.charts.update', $form->handle()), [
+                'charts' => [
+                    ['field' => 'color', 'chart' => 'pie'],
+                    ['field' => 'color', 'chart' => 'horizontal_bar'],
+                ],
+            ])
+            ->assertUnprocessable()
+            ->assertJsonValidationErrors('charts.0.field');
+
+        $this->assertNull(Form::find('survey')->charts());
+    }
+
+    #[Test]
+    public function it_allows_any_registered_chart_for_any_field()
+    {
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($this->userWithPermission())
+            ->patchJson(cp_route('forms.submissions.charts.update', $form->handle()), [
+                'charts' => [['field' => 'color', 'chart' => 'ranked_options']],
+            ])
+            ->assertNoContent();
+
+        $this->assertEquals([['field' => 'color', 'chart' => 'ranked_options']], Form::find('survey')->charts());
+    }
+
+    #[Test]
+    public function it_rejects_unknown_charts()
+    {
+        $form = $this->makeForm();
+
+        $this
+            ->actingAs($this->userWithPermission())
+            ->patchJson(cp_route('forms.submissions.charts.update', $form->handle()), [
+                'charts' => [['field' => 'color', 'chart' => 'line']],
+            ])
+            ->assertUnprocessable()
+            ->assertJsonValidationErrors('charts');
+
+        $this->assertNull(Form::find('survey')->charts());
+    }
+
+    private function makeForm()
+    {
+        return tap(Form::make('survey')->formFields([
+            'sections' => [
+                [
+                    'fields' => [
+                        ['handle' => 'color', 'field' => ['type' => 'multi_choice', 'options' => ['red' => 'Red', 'blue' => 'Blue']]],
+                        ['handle' => 'rating', 'field' => ['type' => 'star_rating']],
+                    ],
+                ],
+            ],
+        ]))->save();
+    }
+
+    private function userWithPermission()
+    {
+        $this->setTestRoles(['test' => ['access cp', 'edit forms']]);
+
+        return tap(User::make()->assignRole('test'))->save();
+    }
+}
diff --git a/tests/Feature/Forms/ViewSubmissionsListingTest.php b/tests/Feature/Forms/ViewSubmissionsListingTest.php
index 4392a4e7d73..f8dd0ed9ccf 100644
--- a/tests/Feature/Forms/ViewSubmissionsListingTest.php
+++ b/tests/Feature/Forms/ViewSubmissionsListingTest.php
@@ -2,6 +2,7 @@
 
 namespace Tests\Feature\Forms;
 
+use Facades\Statamic\Console\Processes\Composer;
 use PHPUnit\Framework\Attributes\Test;
 use Statamic\Facades\Form;
 use Statamic\Facades\FormSubmission;
@@ -15,6 +16,13 @@ class ViewSubmissionsListingTest extends TestCase
     use FakesRoles;
     use PreventSavingStacheItemsToDisk;
 
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        Composer::shouldReceive('isInstalled')->with('statamic/forms-pro')->andReturnTrue()->byDefault();
+    }
+
     protected function resolveApplicationConfiguration($app)
     {
         parent::resolveApplicationConfiguration($app);
diff --git a/tests/Forms/Charts/ChartTest.php b/tests/Forms/Charts/ChartTest.php
new file mode 100644
index 00000000000..c1d1a1650ee
--- /dev/null
+++ b/tests/Forms/Charts/ChartTest.php
@@ -0,0 +1,159 @@
+<?php
+
+namespace Tests\Forms\Charts;
+
+use Illuminate\Support\Collection;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\HorizontalBar;
+use Statamic\Forms\Charts\VerticalBar;
+use Tests\TestCase;
+
+class ChartTest extends TestCase
+{
+    #[Test]
+    public function it_counts_values_per_option()
+    {
+        $props = (new HorizontalBar)->props(
+            collect(['red', 'red', 'green']),
+            $this->chartOptions(['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue'])
+        );
+
+        $this->assertEquals([
+            ['key' => 'red', 'label' => 'Red', 'count' => 2, 'percent' => 67],
+            ['key' => 'green', 'label' => 'Green', 'count' => 1, 'percent' => 33],
+            ['key' => 'blue', 'label' => 'Blue', 'count' => 0, 'percent' => 0],
+        ], $props['items']);
+    }
+
+    #[Test]
+    public function it_flattens_multi_value_fields_and_counts_each_selection()
+    {
+        $props = (new HorizontalBar)->props(
+            collect([['tea', 'coffee'], ['tea'], ['coffee']]),
+            $this->chartOptions(['tea' => 'Tea', 'coffee' => 'Coffee', 'water' => 'Water'])
+        );
+
+        $this->assertEquals([
+            ['key' => 'tea', 'label' => 'Tea', 'count' => 2, 'percent' => 67],
+            ['key' => 'coffee', 'label' => 'Coffee', 'count' => 2, 'percent' => 67],
+            ['key' => 'water', 'label' => 'Water', 'count' => 0, 'percent' => 0],
+        ], $props['items']);
+    }
+
+    #[Test]
+    public function it_normalizes_boolean_values()
+    {
+        $props = (new HorizontalBar)->props(
+            collect([true, true, false]),
+            $this->chartOptions(['true' => 'Yes', 'false' => 'No'])
+        );
+
+        $this->assertEquals([
+            ['key' => 'true', 'label' => 'Yes', 'count' => 2, 'percent' => 67],
+            ['key' => 'false', 'label' => 'No', 'count' => 1, 'percent' => 33],
+        ], $props['items']);
+    }
+
+    #[Test]
+    public function it_passes_option_extras_through_to_items()
+    {
+        $props = (new HorizontalBar)->props(collect(['cat']), collect([
+            new ChartOption('cat', 'Cat', icon: 'star-filled', image: '/cat.jpg', badge: 'A'),
+        ]));
+
+        $this->assertEquals([
+            ['key' => 'cat', 'label' => 'Cat', 'count' => 1, 'percent' => 100, 'icon' => 'star-filled', 'image' => '/cat.jpg', 'badge' => 'A'],
+        ], $props['items']);
+    }
+
+    #[Test]
+    public function it_truncates_to_the_limit_and_lumps_the_rest_into_other()
+    {
+        $props = (new HorizontalBar)->props($this->weightedValues(range('a', 'h')), $this->chartOptions(
+            collect(range('a', 'h'))->mapWithKeys(fn ($key) => [$key => strtoupper($key)])->all()
+        ));
+
+        $this->assertEquals([
+            ['key' => 'a', 'label' => 'A', 'count' => 10, 'percent' => 19],
+            ['key' => 'b', 'label' => 'B', 'count' => 9, 'percent' => 17],
+            ['key' => 'c', 'label' => 'C', 'count' => 8, 'percent' => 15],
+            ['key' => 'd', 'label' => 'D', 'count' => 7, 'percent' => 13],
+            ['key' => 'other', 'label' => 'Other', 'count' => 18, 'percent' => 35, 'other' => true],
+        ], $props['items']);
+
+        $this->assertEquals(['items'], array_keys($props));
+    }
+
+    #[Test]
+    public function vertical_bars_truncate_unbounded_answers_too()
+    {
+        $props = (new VerticalBar)->props($this->weightedValues(range('a', 'n')), $this->chartOptions(
+            collect(range('a', 'n'))->mapWithKeys(fn ($key) => [$key => strtoupper($key)])->all()
+        ));
+
+        $this->assertCount(12, $props['items']);
+        $this->assertEquals('other', collect($props['items'])->last()['key']);
+    }
+
+    #[Test]
+    public function it_counts_unique_values_when_there_are_no_options()
+    {
+        $props = (new HorizontalBar)->props(collect(['Alice', 'Alice', 'Bob']));
+
+        $this->assertEquals([
+            ['key' => 'Alice', 'label' => 'Alice', 'count' => 2, 'percent' => 67],
+            ['key' => 'Bob', 'label' => 'Bob', 'count' => 1, 'percent' => 33],
+        ], $props['items']);
+    }
+
+    #[Test]
+    public function it_sorts_unique_numeric_values_ascending()
+    {
+        $props = (new VerticalBar)->props(collect([3, 1, 3, 10]));
+
+        $this->assertEquals([
+            ['key' => '1', 'label' => '1', 'count' => 1, 'percent' => 25],
+            ['key' => '3', 'label' => '3', 'count' => 2, 'percent' => 50],
+            ['key' => '10', 'label' => '10', 'count' => 1, 'percent' => 25],
+        ], $props['items']);
+    }
+
+    #[Test]
+    public function it_bins_numeric_values_when_there_are_many_unique_ones()
+    {
+        $props = (new VerticalBar)->props(collect(range(1, 20)));
+
+        $this->assertEquals([
+            ['key' => '1-3', 'label' => '1–3', 'count' => 3, 'percent' => 15],
+            ['key' => '4-6', 'label' => '4–6', 'count' => 3, 'percent' => 15],
+            ['key' => '7-9', 'label' => '7–9', 'count' => 3, 'percent' => 15],
+            ['key' => '10-12', 'label' => '10–12', 'count' => 3, 'percent' => 15],
+            ['key' => '13-15', 'label' => '13–15', 'count' => 3, 'percent' => 15],
+            ['key' => '16-18', 'label' => '16–18', 'count' => 3, 'percent' => 15],
+            ['key' => '19-20', 'label' => '19–20', 'count' => 2, 'percent' => 10],
+        ], $props['items']);
+    }
+
+    #[Test]
+    public function it_doesnt_bin_numeric_values_when_the_field_has_options()
+    {
+        $props = (new VerticalBar)->props(
+            collect(range(0, 10)),
+            $this->chartOptions(collect(range(0, 10))->mapWithKeys(fn ($value) => [$value => (string) $value])->all())
+        );
+
+        $this->assertCount(11, $props['items']);
+        $this->assertEquals('0', $props['items'][0]['key']);
+    }
+
+    private function weightedValues(array $keys): Collection
+    {
+        return collect($keys)->flatMap(fn ($key, $index) => array_fill(0, count($keys) + 2 - $index, $key));
+    }
+
+    private function chartOptions(array $options): Collection
+    {
+        return collect($options)->map(fn ($label, $key) => new ChartOption((string) $key, $label))->values();
+    }
+}
diff --git a/tests/Forms/Charts/PieTest.php b/tests/Forms/Charts/PieTest.php
new file mode 100644
index 00000000000..97ee9b5c877
--- /dev/null
+++ b/tests/Forms/Charts/PieTest.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace Tests\Forms\Charts;
+
+use Illuminate\Support\Collection;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\Pie;
+use Tests\TestCase;
+
+class PieTest extends TestCase
+{
+    #[Test]
+    public function it_doesnt_drill_down_when_everything_fits()
+    {
+        $props = (new Pie)->props(
+            collect(['red', 'red', 'green']),
+            $this->chartOptions(['red' => 'Red', 'green' => 'Green'])
+        );
+
+        $this->assertEquals(['items'], array_keys($props));
+    }
+
+    #[Test]
+    public function it_drills_down_into_the_items_that_didnt_fit()
+    {
+        $props = (new Pie)->props($this->weightedValues(range('a', 'f')), $this->chartOptions(
+            collect(range('a', 'f'))->mapWithKeys(fn ($key) => [$key => strtoupper($key)])->all()
+        ));
+
+        $this->assertEquals([
+            ['key' => 'd', 'label' => 'D', 'count' => 5, 'percent' => 15],
+            ['key' => 'e', 'label' => 'E', 'count' => 4, 'percent' => 12],
+            ['key' => 'f', 'label' => 'F', 'count' => 3, 'percent' => 9],
+        ], $props['drilldown']['items']);
+    }
+
+    #[Test]
+    public function it_keeps_the_pie_intact_while_drilled_in()
+    {
+        $props = (new Pie)->props($this->weightedValues(range('a', 'f')), $this->chartOptions(
+            collect(range('a', 'f'))->mapWithKeys(fn ($key) => [$key => strtoupper($key)])->all()
+        ));
+
+        $this->assertEquals($props['items'], $props['drilldown']['segments']);
+        $this->assertEquals(3, $props['drilldown']['focusedIndex']);
+    }
+
+    #[Test]
+    public function it_caps_the_drilldown_items_and_summarizes_the_rest()
+    {
+        $props = (new Pie)->props($this->weightedValues(range('a', 'h')), $this->chartOptions(
+            collect(range('a', 'h'))->mapWithKeys(fn ($key) => [$key => strtoupper($key)])->all()
+        ));
+
+        $this->assertEquals([
+            ['key' => 'd', 'label' => 'D', 'count' => 7, 'percent' => 13],
+            ['key' => 'e', 'label' => 'E', 'count' => 6, 'percent' => 12],
+            ['key' => 'f', 'label' => 'F', 'count' => 5, 'percent' => 10],
+            ['key' => 'more', 'label' => '+2 more', 'count' => 7, 'percent' => 13],
+        ], $props['drilldown']['items']);
+    }
+
+    private function weightedValues(array $keys): Collection
+    {
+        return collect($keys)->flatMap(fn ($key, $index) => array_fill(0, count($keys) + 2 - $index, $key));
+    }
+
+    private function chartOptions(array $options): Collection
+    {
+        return collect($options)->map(fn ($label, $key) => new ChartOption((string) $key, $label))->values();
+    }
+}
diff --git a/tests/Forms/Charts/RankedOptionsTest.php b/tests/Forms/Charts/RankedOptionsTest.php
new file mode 100644
index 00000000000..f361f6f2a51
--- /dev/null
+++ b/tests/Forms/Charts/RankedOptionsTest.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace Tests\Forms\Charts;
+
+use Illuminate\Support\Collection;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\ChartOption;
+use Statamic\Forms\Charts\RankedOptions;
+use Tests\TestCase;
+
+class RankedOptionsTest extends TestCase
+{
+    #[Test]
+    public function it_ranks_options_by_average_position()
+    {
+        $props = (new RankedOptions)->props(
+            collect([
+                ['summer', 'spring', 'winter'],
+                ['summer', 'winter', 'spring'],
+                ['spring', 'summer', 'winter'],
+            ]),
+            $this->chartOptions(['spring' => 'Spring', 'summer' => 'Summer', 'winter' => 'Winter'])
+        );
+
+        $this->assertEquals([
+            ['key' => 'summer', 'label' => 'Summer', 'rank' => 1, 'count' => 2, 'percent' => 89],
+            ['key' => 'spring', 'label' => 'Spring', 'rank' => 2, 'count' => 1, 'percent' => 67],
+            ['key' => 'winter', 'label' => 'Winter', 'rank' => 3, 'count' => 0, 'percent' => 44],
+        ], $props['items']);
+    }
+
+    private function chartOptions(array $options): Collection
+    {
+        return collect($options)->map(fn ($label, $key) => new ChartOption((string) $key, $label))->values();
+    }
+}
diff --git a/tests/Forms/Fieldtypes/CheckboxesTest.php b/tests/Forms/Fieldtypes/CheckboxesTest.php
index 9468a7eb2f3..db3101a1f1f 100644
--- a/tests/Forms/Fieldtypes/CheckboxesTest.php
+++ b/tests/Forms/Fieldtypes/CheckboxesTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\Checkboxes;
 use Tests\TestCase;
@@ -52,4 +53,25 @@ public function it_passes_through_extra_config()
             'default' => ['music'],
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_bar_chart()
+    {
+        $this->assertEquals(HorizontalBar::class, (new Checkboxes)->defaultChart());
+    }
+
+    #[Test]
+    public function it_returns_its_options_as_chart_options_with_checkbox_icons()
+    {
+        $fieldtype = (new Checkboxes)->setField(new FormField('interests', [
+            'type' => 'checkboxes',
+            'options' => ['music' => 'Music', 'sports' => 'Sports'],
+        ]));
+
+        $options = $fieldtype->chartOptions(collect());
+
+        $this->assertEquals(['music', 'sports'], $options->map->key->all());
+        $this->assertEquals(['Music', 'Sports'], $options->map->label->all());
+        $this->assertEquals(['checkbox-filled', 'checkbox-filled'], $options->map->icon->all());
+    }
 }
diff --git a/tests/Forms/Fieldtypes/CurrencyTest.php b/tests/Forms/Fieldtypes/CurrencyTest.php
index 5a628c5276b..d5df896a07f 100644
--- a/tests/Forms/Fieldtypes/CurrencyTest.php
+++ b/tests/Forms/Fieldtypes/CurrencyTest.php
@@ -3,8 +3,11 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\VerticalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\Currency;
+use Statamic\Forms\Insights\Average;
+use Statamic\Forms\Insights\MinMax;
 use Tests\TestCase;
 
 class CurrencyTest extends TestCase
@@ -40,4 +43,27 @@ public function it_passes_through_extra_config()
             'default' => 100,
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_column_chart()
+    {
+        $this->assertEquals(VerticalBar::class, (new Currency)->defaultChart());
+    }
+
+    #[Test]
+    public function it_returns_insights_formatted_for_the_currency()
+    {
+        $fieldtype = (new Currency)->setField(new FormField('price', [
+            'type' => 'currency',
+            'currency' => 'GBP',
+        ]));
+
+        $insights = $fieldtype->insights();
+
+        $this->assertCount(2, $insights);
+        $this->assertInstanceOf(MinMax::class, $insights[0]);
+        $this->assertInstanceOf(Average::class, $insights[1]);
+        $this->assertEquals(['min' => '5.00', 'max' => '15.00', 'prefix' => '£'], $insights[0]->props(collect([5, 15])));
+        $this->assertEquals(['average' => '10.00', 'prefix' => '£'], $insights[1]->props(collect([5, 15])));
+    }
 }
diff --git a/tests/Forms/Fieldtypes/DictionaryTest.php b/tests/Forms/Fieldtypes/DictionaryTest.php
index 9d48e4dba76..df1f24d23a0 100644
--- a/tests/Forms/Fieldtypes/DictionaryTest.php
+++ b/tests/Forms/Fieldtypes/DictionaryTest.php
@@ -3,6 +3,8 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\Dictionary as Dictionaries;
+use Statamic\Forms\Charts\Lollipop;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\Dictionary;
 use Tests\TestCase;
@@ -46,4 +48,27 @@ public function it_passes_through_extra_config()
             'default' => 'USA',
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_lollipop_chart()
+    {
+        $this->assertEquals(Lollipop::class, (new Dictionary)->defaultChart());
+    }
+
+    #[Test]
+    public function it_derives_labelled_chart_options_from_the_submitted_values()
+    {
+        $fieldtype = (new Dictionary)->setField(new FormField('country', [
+            'type' => 'dictionary',
+            'dictionary' => 'countries',
+        ]));
+
+        $options = $fieldtype->chartOptions(collect(['USA', 'GBR', 'GBR']));
+
+        $this->assertEquals(['GBR', 'USA'], $options->map->key->all());
+        $this->assertEquals([
+            Dictionaries::find('countries')->get('GBR')->label(),
+            Dictionaries::find('countries')->get('USA')->label(),
+        ], $options->map->label->all());
+    }
 }
diff --git a/tests/Forms/Fieldtypes/DropdownTest.php b/tests/Forms/Fieldtypes/DropdownTest.php
index 7899b6c4ab8..baeb969eab4 100644
--- a/tests/Forms/Fieldtypes/DropdownTest.php
+++ b/tests/Forms/Fieldtypes/DropdownTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\Dropdown;
 use Tests\TestCase;
@@ -88,4 +89,24 @@ public function it_passes_through_extra_config()
             'default' => 'red',
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_bar_chart()
+    {
+        $this->assertEquals(HorizontalBar::class, (new Dropdown)->defaultChart());
+    }
+
+    #[Test]
+    public function it_returns_its_options_as_chart_options()
+    {
+        $fieldtype = (new Dropdown)->setField(new FormField('seen', [
+            'type' => 'dropdown',
+            'options' => ['yep' => 'Yep', 'nope' => 'Nope'],
+        ]));
+
+        $options = $fieldtype->chartOptions(collect());
+
+        $this->assertEquals(['yep', 'nope'], $options->map->key->all());
+        $this->assertEquals(['Yep', 'Nope'], $options->map->label->all());
+    }
 }
diff --git a/tests/Forms/Fieldtypes/EmailTest.php b/tests/Forms/Fieldtypes/EmailTest.php
index 42988dc8288..f5953aaad0f 100644
--- a/tests/Forms/Fieldtypes/EmailTest.php
+++ b/tests/Forms/Fieldtypes/EmailTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\Email;
 use Tests\TestCase;
@@ -70,4 +71,13 @@ public function it_passes_through_extra_config()
             'append' => '@example.com',
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_bar_chart_counting_unique_answers()
+    {
+        $fieldtype = (new Email);
+
+        $this->assertEquals(HorizontalBar::class, $fieldtype->defaultChart());
+        $this->assertNull($fieldtype->chartOptions(collect()));
+    }
 }
diff --git a/tests/Forms/Fieldtypes/ImageChoiceTest.php b/tests/Forms/Fieldtypes/ImageChoiceTest.php
index 79f1024979e..0b76a91571d 100644
--- a/tests/Forms/Fieldtypes/ImageChoiceTest.php
+++ b/tests/Forms/Fieldtypes/ImageChoiceTest.php
@@ -5,6 +5,7 @@
 use PHPUnit\Framework\Attributes\Test;
 use Statamic\Fields\Field;
 use Statamic\Fieldtypes\ImageChoice as ImageChoiceFieldtype;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\ImageChoice as ImageChoiceFormFieldtype;
 use Tests\TestCase;
@@ -116,4 +117,29 @@ public function it_normalizes_aspect_ratio()
 
         $this->assertSame('16/9', $invalid->toFieldArray()['aspect_ratio']);
     }
+
+    #[Test]
+    public function it_defaults_to_a_bar_chart()
+    {
+        $this->assertEquals(HorizontalBar::class, (new ImageChoiceFormFieldtype)->defaultChart());
+    }
+
+    #[Test]
+    public function it_returns_its_options_as_chart_options_with_images_and_badges()
+    {
+        $fieldtype = (new ImageChoiceFormFieldtype)->setField(new FormField('animal', [
+            'type' => 'image_choice',
+            'options' => [
+                ['key' => 'cat', 'label' => 'Cat', 'image' => 'https://example.com/cat.jpg'],
+                ['key' => 'dog', 'label' => 'Dog', 'image' => 'https://example.com/dog.jpg'],
+            ],
+        ]));
+
+        $options = $fieldtype->chartOptions(collect());
+
+        $this->assertEquals(['cat', 'dog'], $options->map->key->all());
+        $this->assertEquals(['Cat', 'Dog'], $options->map->label->all());
+        $this->assertEquals(['https://example.com/cat.jpg', 'https://example.com/dog.jpg'], $options->map->image->all());
+        $this->assertEquals(['A', 'B'], $options->map->badge->all());
+    }
 }
diff --git a/tests/Forms/Fieldtypes/LongAnswerTest.php b/tests/Forms/Fieldtypes/LongAnswerTest.php
index d646820059c..6c3577738fb 100644
--- a/tests/Forms/Fieldtypes/LongAnswerTest.php
+++ b/tests/Forms/Fieldtypes/LongAnswerTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\LongAnswer;
 use Tests\TestCase;
@@ -38,4 +39,13 @@ public function it_passes_through_extra_config()
             'default' => 'David Hasselhoff',
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_bar_chart_counting_unique_answers()
+    {
+        $fieldtype = (new LongAnswer);
+
+        $this->assertEquals(HorizontalBar::class, $fieldtype->defaultChart());
+        $this->assertNull($fieldtype->chartOptions(collect()));
+    }
 }
diff --git a/tests/Forms/Fieldtypes/MultiChoiceTest.php b/tests/Forms/Fieldtypes/MultiChoiceTest.php
index 9ce4a352cb6..d6f0b7055c5 100644
--- a/tests/Forms/Fieldtypes/MultiChoiceTest.php
+++ b/tests/Forms/Fieldtypes/MultiChoiceTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\Pie;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\MultiChoice;
 use Tests\TestCase;
@@ -52,4 +53,38 @@ public function it_passes_through_extra_config()
             'default' => 'red',
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_pie_chart()
+    {
+        $this->assertEquals(Pie::class, (new MultiChoice)->defaultChart());
+    }
+
+    #[Test]
+    public function it_returns_its_options_as_chart_options()
+    {
+        $fieldtype = (new MultiChoice)->setField(new FormField('color', [
+            'type' => 'multi_choice',
+            'options' => ['red' => 'Red', 'blue' => 'Blue'],
+        ]));
+
+        $options = $fieldtype->chartOptions(collect());
+
+        $this->assertEquals(['red', 'blue'], $options->map->key->all());
+        $this->assertEquals(['Red', 'Blue'], $options->map->label->all());
+    }
+
+    #[Test]
+    public function it_excludes_hidden_options_from_chart_options()
+    {
+        $fieldtype = (new MultiChoice)->setField(new FormField('color', [
+            'type' => 'multi_choice',
+            'options' => [
+                ['key' => 'red', 'value' => 'Red'],
+                ['key' => 'blue', 'value' => 'Blue', 'hidden' => true],
+            ],
+        ]));
+
+        $this->assertEquals(['red'], $fieldtype->chartOptions(collect())->map->key->all());
+    }
 }
diff --git a/tests/Forms/Fieldtypes/NumberTest.php b/tests/Forms/Fieldtypes/NumberTest.php
index 369914e4efb..558a3faee89 100644
--- a/tests/Forms/Fieldtypes/NumberTest.php
+++ b/tests/Forms/Fieldtypes/NumberTest.php
@@ -3,8 +3,11 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\VerticalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\Number;
+use Statamic\Forms\Insights\Average;
+use Statamic\Forms\Insights\MinMax;
 use Tests\TestCase;
 
 class NumberTest extends TestCase
@@ -42,4 +45,28 @@ public function it_passes_through_extra_config()
             'default' => 1,
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_column_chart()
+    {
+        $this->assertEquals(VerticalBar::class, (new Number)->defaultChart());
+    }
+
+    #[Test]
+    public function it_returns_no_chart_options_so_values_are_counted()
+    {
+        $fieldtype = (new Number)->setField(new FormField('age', ['type' => 'number']));
+
+        $this->assertNull($fieldtype->chartOptions(collect([1, 2])));
+    }
+
+    #[Test]
+    public function it_returns_min_max_and_average_insights()
+    {
+        $insights = (new Number)->setField(new FormField('age', ['type' => 'number']))->insights();
+
+        $this->assertCount(2, $insights);
+        $this->assertInstanceOf(MinMax::class, $insights[0]);
+        $this->assertInstanceOf(Average::class, $insights[1]);
+    }
 }
diff --git a/tests/Forms/Fieldtypes/OpinionScaleTest.php b/tests/Forms/Fieldtypes/OpinionScaleTest.php
index 5870d582a29..c52763cc384 100644
--- a/tests/Forms/Fieldtypes/OpinionScaleTest.php
+++ b/tests/Forms/Fieldtypes/OpinionScaleTest.php
@@ -3,8 +3,10 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\VerticalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\OpinionScale;
+use Statamic\Forms\Insights\Average;
 use Tests\TestCase;
 
 class OpinionScaleTest extends TestCase
@@ -71,4 +73,31 @@ public function it_clamps_min_and_max_to_a_sensible_range()
         $this->assertEquals(5, $fieldtype->toFieldArray()['min']);
         $this->assertEquals(10, $fieldtype->toFieldArray()['max']);
     }
+
+    #[Test]
+    public function it_defaults_to_a_column_chart()
+    {
+        $this->assertEquals(VerticalBar::class, (new OpinionScale)->defaultChart());
+    }
+
+    #[Test]
+    public function it_returns_its_range_as_chart_options()
+    {
+        $fieldtype = (new OpinionScale)->setField(new FormField('satisfaction', [
+            'type' => 'opinion_scale',
+            'min' => 1,
+            'max' => 5,
+        ]));
+
+        $this->assertEquals(['1', '2', '3', '4', '5'], $fieldtype->chartOptions(collect())->map->key->all());
+    }
+
+    #[Test]
+    public function it_returns_an_average_insight()
+    {
+        $insights = (new OpinionScale)->setField(new FormField('satisfaction', ['type' => 'opinion_scale']))->insights();
+
+        $this->assertCount(1, $insights);
+        $this->assertInstanceOf(Average::class, $insights[0]);
+    }
 }
diff --git a/tests/Forms/Fieldtypes/PhoneTest.php b/tests/Forms/Fieldtypes/PhoneTest.php
index 6e79eacf2b7..884a2d5bcfd 100644
--- a/tests/Forms/Fieldtypes/PhoneTest.php
+++ b/tests/Forms/Fieldtypes/PhoneTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\Phone;
 use Tests\TestCase;
@@ -40,4 +41,13 @@ public function it_passes_through_extra_config()
             'default' => '(555) 000-0000',
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_bar_chart_counting_unique_answers()
+    {
+        $fieldtype = (new Phone);
+
+        $this->assertEquals(HorizontalBar::class, $fieldtype->defaultChart());
+        $this->assertNull($fieldtype->chartOptions(collect()));
+    }
 }
diff --git a/tests/Forms/Fieldtypes/RankingTest.php b/tests/Forms/Fieldtypes/RankingTest.php
index 808b0e8c930..026d4d1923e 100644
--- a/tests/Forms/Fieldtypes/RankingTest.php
+++ b/tests/Forms/Fieldtypes/RankingTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\RankedOptions;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\Ranking;
 use Tests\TestCase;
@@ -30,4 +31,24 @@ public function it_returns_field_array()
             'winter' => 'Winter',
         ], $array['options']);
     }
+
+    #[Test]
+    public function it_defaults_to_a_ranking_chart()
+    {
+        $this->assertEquals(RankedOptions::class, (new Ranking)->defaultChart());
+    }
+
+    #[Test]
+    public function it_returns_its_options_as_chart_options()
+    {
+        $fieldtype = (new Ranking)->setField(new FormField('preferences', [
+            'type' => 'ranking',
+            'options' => ['spring' => 'Spring', 'summer' => 'Summer'],
+        ]));
+
+        $options = $fieldtype->chartOptions(collect());
+
+        $this->assertEquals(['spring', 'summer'], $options->map->key->all());
+        $this->assertEquals(['Spring', 'Summer'], $options->map->label->all());
+    }
 }
diff --git a/tests/Forms/Fieldtypes/ShortAnswerTest.php b/tests/Forms/Fieldtypes/ShortAnswerTest.php
index 87b24d112a6..5c1d3d3dedc 100644
--- a/tests/Forms/Fieldtypes/ShortAnswerTest.php
+++ b/tests/Forms/Fieldtypes/ShortAnswerTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\ShortAnswer;
 use Tests\TestCase;
@@ -38,4 +39,13 @@ public function it_passes_through_extra_config()
             'default' => 'David Hasselhoff',
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_bar_chart_counting_unique_answers()
+    {
+        $fieldtype = (new ShortAnswer);
+
+        $this->assertEquals(HorizontalBar::class, $fieldtype->defaultChart());
+        $this->assertNull($fieldtype->chartOptions(collect()));
+    }
 }
diff --git a/tests/Forms/Fieldtypes/StarRatingTest.php b/tests/Forms/Fieldtypes/StarRatingTest.php
index b0bb7ebd79c..4af129e1d9a 100644
--- a/tests/Forms/Fieldtypes/StarRatingTest.php
+++ b/tests/Forms/Fieldtypes/StarRatingTest.php
@@ -3,8 +3,10 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\StarRating;
+use Statamic\Forms\Insights\StarRating as StarRatingInsight;
 use Tests\TestCase;
 
 class StarRatingTest extends TestCase
@@ -77,4 +79,51 @@ public function it_provides_half_star_step_when_enabled()
         $this->assertSame(0.5, $array['min']);
         $this->assertSame(0.5, $array['step']);
     }
+
+    #[Test]
+    public function it_defaults_to_a_bar_chart()
+    {
+        $this->assertEquals(HorizontalBar::class, (new StarRating)->defaultChart());
+    }
+
+    #[Test]
+    public function it_returns_a_chart_option_for_each_star()
+    {
+        $fieldtype = (new StarRating)->setField(new FormField('rating', [
+            'type' => 'star_rating',
+            'max_stars' => 3,
+        ]));
+
+        $options = $fieldtype->chartOptions(collect());
+
+        $this->assertEquals(['3', '2', '1'], $options->map->key->all());
+        $this->assertEquals(['star-filled', 'star-filled', 'star-filled'], $options->map->icon->all());
+    }
+
+    #[Test]
+    public function it_returns_half_star_chart_options_when_enabled()
+    {
+        $fieldtype = (new StarRating)->setField(new FormField('rating', [
+            'type' => 'star_rating',
+            'max_stars' => 3,
+            'allow_half_stars' => true,
+        ]));
+
+        $this->assertEquals(['3', '2.5', '2', '1.5', '1', '0.5'], $fieldtype->chartOptions(collect())->map->key->all());
+    }
+
+    #[Test]
+    public function it_returns_a_star_rating_insight()
+    {
+        $fieldtype = (new StarRating)->setField(new FormField('rating', [
+            'type' => 'star_rating',
+            'max_stars' => 3,
+        ]));
+
+        $insights = $fieldtype->insights();
+
+        $this->assertCount(1, $insights);
+        $this->assertInstanceOf(StarRatingInsight::class, $insights[0]);
+        $this->assertEquals(['average' => 2.0, 'total' => 3], $insights[0]->props(collect([1, 3])));
+    }
 }
diff --git a/tests/Forms/Fieldtypes/ToggleTest.php b/tests/Forms/Fieldtypes/ToggleTest.php
index f6de8df60ef..5bd0f7a6ed0 100644
--- a/tests/Forms/Fieldtypes/ToggleTest.php
+++ b/tests/Forms/Fieldtypes/ToggleTest.php
@@ -3,8 +3,10 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\Toggle;
+use Statamic\Forms\Insights\Checked;
 use Tests\TestCase;
 
 class ToggleTest extends TestCase
@@ -38,4 +40,29 @@ public function it_passes_through_extra_config()
             'default' => true,
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_bar_chart()
+    {
+        $this->assertEquals(HorizontalBar::class, (new Toggle)->defaultChart());
+    }
+
+    #[Test]
+    public function it_returns_boolean_chart_options()
+    {
+        $options = (new Toggle)->setField(new FormField('agree', ['type' => 'toggle']))->chartOptions(collect());
+
+        $this->assertEquals(['true', 'false'], $options->map->key->all());
+        $this->assertEquals(['Yes', 'No'], $options->map->label->all());
+        $this->assertEquals(['checkmark-circle-filled', 'delete-circle-filled'], $options->map->icon->all());
+    }
+
+    #[Test]
+    public function it_returns_a_checked_insight()
+    {
+        $insights = (new Toggle)->setField(new FormField('agree', ['type' => 'toggle']))->insights();
+
+        $this->assertCount(1, $insights);
+        $this->assertInstanceOf(Checked::class, $insights[0]);
+    }
 }
diff --git a/tests/Forms/Fieldtypes/WebsiteTest.php b/tests/Forms/Fieldtypes/WebsiteTest.php
index 7e808a0adbe..7a93db606f0 100644
--- a/tests/Forms/Fieldtypes/WebsiteTest.php
+++ b/tests/Forms/Fieldtypes/WebsiteTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\Website;
 use Tests\TestCase;
@@ -76,4 +77,13 @@ public function it_passes_through_extra_config()
             'default' => 'https://statamic.com',
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_bar_chart_counting_unique_answers()
+    {
+        $fieldtype = (new Website);
+
+        $this->assertEquals(HorizontalBar::class, $fieldtype->defaultChart());
+        $this->assertNull($fieldtype->chartOptions(collect()));
+    }
 }
diff --git a/tests/Forms/Fieldtypes/YesNoTest.php b/tests/Forms/Fieldtypes/YesNoTest.php
index fd16fe6e04a..a3915bf085e 100644
--- a/tests/Forms/Fieldtypes/YesNoTest.php
+++ b/tests/Forms/Fieldtypes/YesNoTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Forms\Fieldtypes;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Charts\HorizontalBar;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fieldtypes\YesNo;
 use Tests\TestCase;
@@ -44,4 +45,20 @@ public function it_passes_through_extra_config()
             'display' => 'Would you recommend this product?',
         ], $fieldtype->toFieldArray());
     }
+
+    #[Test]
+    public function it_defaults_to_a_bar_chart()
+    {
+        $this->assertEquals(HorizontalBar::class, (new YesNo)->defaultChart());
+    }
+
+    #[Test]
+    public function it_returns_yes_and_no_chart_options()
+    {
+        $options = (new YesNo)->setField(new FormField('pint', ['type' => 'yes_no']))->chartOptions(collect());
+
+        $this->assertEquals(['yes', 'no'], $options->map->key->all());
+        $this->assertEquals(['Yes', 'No'], $options->map->label->all());
+        $this->assertEquals(['checkmark-circle-filled', 'delete-circle-filled'], $options->map->icon->all());
+    }
 }
diff --git a/tests/Forms/FormTest.php b/tests/Forms/FormTest.php
index 6733db041f9..56411abb38e 100644
--- a/tests/Forms/FormTest.php
+++ b/tests/Forms/FormTest.php
@@ -15,6 +15,8 @@
 use Statamic\Facades\File;
 use Statamic\Facades\Form;
 use Statamic\Facades\YAML;
+use Statamic\Forms\Charts\HorizontalBar;
+use Statamic\Forms\Charts\Pie;
 use Statamic\Forms\Fields\FormFields;
 use Tests\TestCase;
 
@@ -377,4 +379,110 @@ public function it_hydrates_form_fields_from_yaml()
         $this->assertEquals('email', $formFields->field('email')->handle());
         $this->assertEquals('name', $formFields->field('name')->handle());
     }
+
+    #[Test]
+    public function it_saves_charts_to_yaml_and_hydrates_them_back()
+    {
+        $charts = [
+            ['field' => 'color', 'chart' => 'pie'],
+            ['field' => 'rating', 'chart' => 'horizontal_bar'],
+        ];
+
+        $form = tap(Form::make('contact_us')->charts($charts))->save();
+
+        $this->assertEquals($charts, YAML::parse(File::get($form->path()))['charts']);
+        $this->assertEquals($charts, Form::find('contact_us')->charts());
+    }
+
+    #[Test]
+    public function it_saves_an_explicitly_emptied_charts_list()
+    {
+        $form = tap(Form::make('contact_us')->charts([]))->save();
+
+        $this->assertEquals([], YAML::parse(File::get($form->path()))['charts']);
+        $this->assertEquals([], Form::find('contact_us')->charts());
+    }
+
+    #[Test]
+    public function it_doesnt_save_charts_when_never_configured()
+    {
+        $form = tap(Form::make('contact_us'))->save();
+
+        $this->assertArrayNotHasKey('charts', YAML::parse(File::get($form->path())));
+        $this->assertNull(Form::find('contact_us')->charts());
+    }
+
+    #[Test]
+    public function summary_charts_default_to_fields_with_a_default_chart()
+    {
+        $form = $this->formWithChartableFields();
+
+        $charts = $form->summaryCharts();
+
+        $this->assertEquals(['name', 'color', 'rating'], $charts->map(fn ($summary) => $summary->field()->handle())->all());
+        $this->assertInstanceOf(HorizontalBar::class, $charts[0]->chart());
+        $this->assertInstanceOf(Pie::class, $charts[1]->chart());
+        $this->assertInstanceOf(HorizontalBar::class, $charts[2]->chart());
+    }
+
+    #[Test]
+    public function summary_charts_use_the_saved_layout()
+    {
+        $form = $this->formWithChartableFields()->charts([
+            ['field' => 'rating', 'chart' => 'horizontal_bar'],
+            ['field' => 'color', 'chart' => 'horizontal_bar'],
+        ]);
+
+        $charts = $form->summaryCharts();
+
+        $this->assertEquals(['rating', 'color'], $charts->map(fn ($summary) => $summary->field()->handle())->all());
+        $this->assertInstanceOf(HorizontalBar::class, $charts[0]->chart());
+        $this->assertInstanceOf(HorizontalBar::class, $charts[1]->chart());
+    }
+
+    #[Test]
+    public function summary_charts_skip_unknown_fields_and_fall_back_on_unknown_charts()
+    {
+        $form = $this->formWithChartableFields()->charts([
+            ['field' => 'missing', 'chart' => 'pie'],
+            ['field' => 'color', 'chart' => 'line'],
+        ]);
+
+        $charts = $form->summaryCharts();
+
+        $this->assertEquals(['color'], $charts->map(fn ($summary) => $summary->field()->handle())->all());
+        $this->assertInstanceOf(Pie::class, $charts[0]->chart());
+    }
+
+    #[Test]
+    public function summary_charts_exclude_hidden_fields()
+    {
+        $form = Form::make('survey')->formFields([
+            'sections' => [
+                [
+                    'fields' => [
+                        ['handle' => 'color', 'field' => ['type' => 'multi_choice', 'options' => ['red' => 'Red'], 'hidden' => true]],
+                        ['handle' => 'rating', 'field' => ['type' => 'star_rating']],
+                    ],
+                ],
+            ],
+        ]);
+
+        $this->assertEquals(['rating'], $form->summaryCharts()->map(fn ($summary) => $summary->field()->handle())->all());
+    }
+
+    private function formWithChartableFields()
+    {
+        return Form::make('survey')->formFields([
+            'sections' => [
+                [
+                    'fields' => [
+                        ['handle' => 'name', 'field' => ['type' => 'short_answer']],
+                        ['handle' => 'color', 'field' => ['type' => 'multi_choice', 'options' => ['red' => 'Red', 'blue' => 'Blue']]],
+                        ['handle' => 'rating', 'field' => ['type' => 'star_rating']],
+                    ],
+                ],
+            ],
+        ]);
+    }
 }
diff --git a/tests/Forms/InsightsTest.php b/tests/Forms/InsightsTest.php
new file mode 100644
index 00000000000..40a5872bf87
--- /dev/null
+++ b/tests/Forms/InsightsTest.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace Tests\Forms;
+
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Forms\Insights\Average;
+use Statamic\Forms\Insights\Checked;
+use Statamic\Forms\Insights\MinMax;
+use Statamic\Forms\Insights\StarRating;
+use Tests\TestCase;
+
+class InsightsTest extends TestCase
+{
+    #[Test]
+    public function average_averages_numeric_values()
+    {
+        $this->assertEquals(
+            ['average' => '2.3'],
+            (new Average)->props(collect([1, 2, 4, 'nonsense']))
+        );
+    }
+
+    #[Test]
+    public function average_can_be_prefixed_and_rounded()
+    {
+        $this->assertEquals(
+            ['average' => '2.33', 'prefix' => '£'],
+            (new Average(prefix: '£', decimals: 2))->props(collect([1, 2, 4]))
+        );
+    }
+
+    #[Test]
+    public function min_max_uses_the_lowest_and_highest_values()
+    {
+        $this->assertEquals(
+            ['min' => '4', 'max' => '44'],
+            (new MinMax)->props(collect([26, 4, 44, 'nonsense']))
+        );
+
+        $this->assertEquals(
+            ['min' => '5.00', 'max' => '50.00', 'prefix' => '£'],
+            (new MinMax(prefix: '£', decimals: 2))->props(collect([5, 50, 30]))
+        );
+    }
+
+    #[Test]
+    public function checked_counts_truthy_values()
+    {
+        $this->assertEquals(
+            ['count' => 2, 'percent' => 40],
+            (new Checked)->props(collect([true, true, false, false, false]))
+        );
+    }
+
+    #[Test]
+    public function star_rating_includes_the_total()
+    {
+        $this->assertEquals(
+            ['average' => 4.3, 'total' => 5],
+            (new StarRating(total: 5))->props(collect([4, 4.5, 4.5]))
+        );
+    }
+
+    #[Test]
+    public function insights_handle_having_no_responses()
+    {
+        $this->assertEquals(['average' => '0.0'], (new Average)->props(collect()));
+        $this->assertEquals(['min' => '0', 'max' => '0'], (new MinMax)->props(collect()));
+        $this->assertEquals(['count' => 0, 'percent' => 0], (new Checked)->props(collect()));
+        $this->assertEquals(['average' => 0.0, 'total' => 5], (new StarRating(total: 5))->props(collect()));
+    }
+}