diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index 60698f5e0..971805372 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -4,47 +4,85 @@
     class="block"
     @submit.prevent="saveChart"
   >
-    <div class="grid lg:grid-cols-12 gap-4">
+    <div class="grid lg:grid-cols-12 gap-4 lg:gap-8">
       <div class="col-span-7 space-y-4 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
-        <div>
-          <label
-            for="chart-title"
-            class="font-bold fr-label"
-          >{{ $t('Titre') }}</label>
-          <input
-            id="chart-title"
-            v-model="title"
-            type="text"
-            class="w-full fr-input"
-          >
-        </div>
+        <template v-if="selectedResource">
+          <div>
+            <label
+              for="chart-title"
+              class="font-bold fr-label"
+            >{{ $t('Titre') }}</label>
+            <input
+              id="chart-title"
+              v-model="form.title"
+              type="text"
+              class="w-full fr-input"
+            >
+          </div>
 
-        <div>
-          <label
-            for="chart-description"
-            class="font-bold fr-label"
-          >{{ $t('Description') }}</label>
-          <textarea
-            id="chart-description"
-            v-model="desc"
-            class="w-full fr-input"
-            rows="2"
-          />
-        </div>
-        <div class="mt-4">
-          <ClientOnly>
-            <ChartViewerWrapper
-              :chart="toChartApi(form)"
-              @columns="columns = $event"
+          <div>
+            <label
+              for="chart-description"
+              class="font-bold fr-label"
+            >{{ $t('Description') }}</label>
+            <textarea
+              id="chart-description"
+              v-model="form.description"
+              class="w-full fr-input"
+              rows="2"
             />
-          </ClientOnly>
+          </div>
+          <div>
+            <div class="mt-8 pt-4 border-t border-new-gray-light">
+              <h3 class="font-medium text-lg text-new-gray-dark mb-0">
+                {{ form.title || $t('Sans titre') }}
+              </h3>
+              <p
+                v-if="form.description"
+                class="text-new-gray-medium mt-4 mb-0"
+              >
+                {{ form.description }}
+              </p>
+            </div>
+            <div>
+              <ClientOnly>
+                <ChartViewerWrapper
+                  :chart="chartForViewer"
+                  @columns="columns = $event"
+                />
+              </ClientOnly>
+            </div>
+            <div
+              v-if="sourceText"
+              class="text-sm text-new-gray-medium"
+            >
+              {{ $t('Source') }}: {{ sourceText }}
+            </div>
+          </div>
+        </template>
+        <div
+          v-else
+          class="flex flex-col items-center justify-center h-full py-24"
+        >
+          <img
+            src="/illustrations/chart.svg"
+            class="size-32 shrink-0"
+            alt=""
+          >
+
+          <p class="text-new-gray-dark font-medium mb-0">
+            {{ $t('Aucune source sélectionnée') }}
+          </p>
+          <p class="text-new-gray-medium text-sm mt-1.5 text-center">
+            {{ $t('Choisissez un jeu de données depuis le panneau de configuration pour commencer à visualiser.') }}
+          </p>
         </div>
       </div>
 
-      <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
+      <div class="col-span-5 space-y-6 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
         <fieldset
           v-if="isAdmin"
-          class="px-6 space-y-4"
+          class="min-w-0 space-y-4"
         >
           <label
             for="existing-charts"
@@ -82,7 +120,18 @@
             </button>
           </div>
         </fieldset>
-        <fieldset class="px-6">
+        <fieldset class="min-w-0">
+          <ProducerSelect
+            v-model="producer"
+            :label="$t('Avec qui souhaitez-vous publier ?')"
+            :required="true"
+            all
+          />
+        </fieldset>
+        <fieldset
+          v-if="producer"
+          class="min-w-0"
+        >
           <p class="mb-2 font-bold">
             {{ $t('Source de données') }}
           </p>
@@ -96,415 +145,518 @@
             :suggest="suggestDataset"
             class="mb-4"
           />
-          <label
-            for="resource-select"
-            class="fr-label"
-          >{{ $t('Choix de la ressource') }}</label>
-          <select
-            id="resource-select"
-            v-model="selectedResource"
-            class="w-full fr-select"
-            :disabled="!dataset"
-          >
-            <option
-              value=""
-              disabled
-            >
-              {{ dataset ? $t('Sélectionnez une ressource') : $t('Sélectionnez d\'abord un jeu de données') }}
-            </option>
-            <option
-              v-for="resource in resources"
-              :key="resource.id"
-              :value="resource.id"
-            >
-              {{ resource.title }}
-            </option>
-          </select>
-        </fieldset>
-        <fieldset class="min-w-0 border-t border-new-gray-light py-4 px-6 space-y-4">
-          <p class="font-bold mb-2">
-            {{ $t('Filtres') }}
-          </p>
-          <div class="space-y-3">
-            <template
-              v-for="(filter, index) in filterList"
-              :key="index"
-            >
-              <ChartFilterRow
-                v-if="'column' in filter"
-                :model-value="filter"
-                :index="index"
-                :column-options="columnDetails"
-                :condition-options="conditionOptions"
-                @update:model-value="updateFilter(index, $event)"
-                @remove="removeFilter(index)"
-              />
-            </template>
-          </div>
-          <BrandedButton
-            size="sm"
-            color="tertiary"
-            :icon="RiAddLine"
-            @click="addFilter"
-          >
-            {{ $t('Ajouter un filtre') }}
-          </BrandedButton>
-        </fieldset>
-
-        <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-          <label
-            for="chart-type"
-            class="fr-label font-bold"
-          >
-            {{ $t('Type de graphique') }}
-          </label>
-          <div>
-            <select
-              id="chart-type"
-              v-model="form.chart_type"
-              class="w-full fr-select"
-            >
-              <option value="line">
-                {{ $t('Ligne') }}
-              </option>
-              <option value="histogram">
-                {{ $t('Histogramme') }}
-              </option>
-            </select>
-          </div>
-        </fieldset>
-        <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-          <p class="font-bold mb-2">
-            {{ $t('Axe X') }}
-          </p>
-          <div>
+          <div v-if="dataset">
             <label
-              for="x-axis-column"
+              for="resource-select"
               class="fr-label"
-            >{{ $t('Choisir quoi afficher') }}</label>
+            >{{ $t('Choix de la ressource') }}</label>
             <select
-              id="x-axis-column"
-              v-model="form.x_axis.column_x"
+              id="resource-select"
+              v-model="selectedResource"
               class="w-full fr-select"
             >
-              <optgroup
-                v-for="{ key, value } in columnsArray"
-                :key="key"
-                :label="savedResources[key]?.title ?? key"
+              <option
+                value=""
+                disabled
               >
-                <option
-                  v-for="column in value"
-                  :key="column"
-                  :value="column"
-                >
-                  {{ column }}
-                </option>
-              </optgroup>
-            </select>
-          </div>
-          <div>
-            <label
-              for="x-axis-type"
-              class="fr-label"
-            >{{ $t('Type') }}</label>
-            <select
-              id="x-axis-type"
-              v-model="form.x_axis.type"
-              class="w-full fr-select"
-            >
-              <option value="discrete">
-                {{ $t('Discret (catégories)') }}
+                {{ $t('Sélectionnez une ressource') }}
               </option>
-              <option value="continuous">
-                {{ $t('Continu (valeurs)') }}
-              </option>
-            </select>
-          </div>
-          <div>
-            <label
-              for="x-axis-sort-combined"
-              class="fr-label"
-            >{{ $t('Trier par') }}</label>
-            <select
-              id="x-axis-sort-combined"
-              v-model="form.x_axis.sort_combined"
-              class="w-full fr-select"
-            >
               <option
-                v-for="(label, value) in sortOptionLabels"
-                :key="value"
-                :value
+                v-for="resource in resources"
+                :key="resource.id"
+                :value="resource.id"
               >
-                {{ label }}
+                {{ resource.title }}
               </option>
             </select>
           </div>
         </fieldset>
-
-        <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-          <p class="font-bold mb-2">
-            {{ $t('Série') }}
-          </p>
-          <div
-            v-for="(serie, index) in form.series"
-            :key="index"
-            class="space-y-4"
-          >
-            <div>
-              <label
-                :for="`column-y-${index}`"
-                class="fr-label"
-              >{{ $t('Colonne Y')
-              }}</label>
-              <select
-                :id="`column-y-${index}`"
-                v-model="serie.column_y"
-                class="w-full fr-select"
-              >
-                <template v-if="selectedResource && columns[selectedResource]">
-                  <option
-                    v-for="column in columns[selectedResource]"
-                    :key="column"
-                    :value="column"
-                  >
-                    {{ column }}
-                  </option>
-                </template>
-              </select>
-            </div>
-
-            <div>
-              <label
-                :for="`aggregate-y-${index}`"
-                class="fr-label"
-              >{{ $t('Agrégation')
-              }}</label>
-              <select
-                :id="`aggregate-y-${index}`"
-                v-model="serie.aggregate_y"
-                class="w-full fr-select"
-              >
-                <option :value="null">
-                  {{ $t('Non') }}
-                </option>
-                <option value="sum">
-                  {{ $t('Somme') }}
-                </option>
-                <option value="avg">
-                  {{ $t('Moyenne') }}
-                </option>
-              </select>
+        <template v-if="selectedResource">
+          <fieldset class="min-w-0 border-t border-new-gray-light py-4 space-y-4">
+            <p class="font-bold mb-2">
+              {{ $t('Filtres') }}
+            </p>
+            <div class="space-y-3">
+              <ChartFilterRow
+                v-for="(filter, index) in filterList"
+                :key="index"
+                :model-value="filter"
+                :index="index"
+                :column-options="columnDetails"
+                :condition-options="conditionOptions"
+                @update:model-value="updateFilter(index, $event)"
+                @remove="removeFilter(index)"
+              />
             </div>
-          </div>
-        </fieldset>
+            <BrandedButton
+              size="sm"
+              color="tertiary"
+              :icon="RiAddLine"
+              @click="addFilter"
+            >
+              {{ $t('Ajouter un filtre') }}
+            </BrandedButton>
+          </fieldset>
 
-        <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-          <p class="font-bold mb-2">
-            {{ $t('Axe Y') }}
-          </p>
-          <div>
+          <fieldset class="min-w-0 border-t border-new-gray-light py-4 space-y-4">
             <label
-              for="y-axis-label"
-              class="fr-label"
-            >{{ $t('Label') }}</label>
-            <input
-              id="y-axis-label"
-              v-model="form.y_axis.label"
-              type="text"
-              class="w-full fr-input"
+              for="chart-type"
+              class="fr-label font-bold"
             >
-          </div>
-          <div class="grid grid-cols-2 gap-4">
+              {{ $t('Type de graphique') }}
+            </label>
             <div>
-              <label
-                for="y-axis-min"
-                class="fr-label"
-              >{{ $t('Min') }}</label>
-              <input
-                id="y-axis-min"
-                v-model.number="form.y_axis.min"
-                type="number"
-                class="w-full fr-input"
-              >
-            </div>
-            <div>
-              <label
-                for="y-axis-max"
-                class="fr-label"
-              >{{ $t('Max') }}</label>
-              <input
-                id="y-axis-max"
-                v-model.number="form.y_axis.max"
-                type="number"
-                class="w-full fr-input"
+              <Listbox
+                id="chart-type"
+                v-model="chartTypeProxy"
+                class="w-full"
+                :options="chartTypeOptions"
+                :display-value="(opt) => opt?.label || ''"
+                :get-option-id="(opt) => opt?.value"
               >
+                <template #button>
+                  <div class="w-full flex items-center gap-2">
+                    <component
+                      :is="chartTypeProxy?.icon"
+                      class="size-4"
+                    />
+                    <span>{{ chartTypeProxy?.label }}</span>
+                  </div>
+                </template>
+                <template #option="{ option }">
+                  <component
+                    :is="option.icon"
+                    class="size-4"
+                  />
+                  {{ option.label }}
+                </template>
+              </Listbox>
             </div>
-          </div>
-          <div class="grid grid-cols-2 gap-4">
+          </fieldset>
+          <fieldset class="min-w-0 border-t border-new-gray-light py-4 space-y-4">
+            <p class="font-bold mb-2">
+              {{ $t('Axe X') }}
+            </p>
             <div>
-              <label
-                for="y-axis-unit"
-                class="fr-label"
-              >{{ $t('Unité') }}</label>
-              <input
-                id="y-axis-unit"
-                v-model="form.y_axis.unit"
-                type="text"
-                class="w-full fr-input"
-                :placeholder="$t('ex: €, %, kg')"
+              <SearchableSelect
+                id="x-axis-column"
+                v-model="xAxisColumnProxy"
+                :label="$t('Choisir quoi afficher')"
+                :placeholder="$t('Rechercher une colonne...')"
+                :options="xAxisColumnOptions"
+                :display-value="(opt: {name: string, colType: ColumnType, resourceId: string}) => opt.name"
+                :get-option-id="(opt: {name: string, colType: ColumnType, resourceId: string}) => opt.name"
+                :group-by="(opt: {name: string, colType: ColumnType, resourceId: string}) => typeConfig[opt.colType]?.label || opt.colType"
+                :multiple="false"
+                class="w-full"
               >
+                <template #option="{ option }">
+                  <component
+                    :is="getColumnTypeIcon(option.colType)"
+                    class="inline w-4 h-4 mr-2"
+                  />
+                  {{ option.name }}
+                </template>
+              </SearchableSelect>
             </div>
             <div>
               <label
-                for="y-axis-unit-position"
+                for="x-axis-type"
                 class="fr-label"
-              >{{ $t('Position unité')
-              }}</label>
+              >{{ $t('Type') }}</label>
               <select
-                id="y-axis-unit-position"
-                v-model="form.y_axis.unit_position"
+                id="x-axis-type"
+                v-model="form.x_axis.type"
                 class="w-full fr-select"
               >
-                <option value="suffix">
-                  {{ $t('Suffixe') }}
+                <option value="discrete">
+                  {{ $t('Discret (catégories)') }}
                 </option>
-                <option value="prefix">
-                  {{ $t('Préfixe') }}
+                <option value="continuous">
+                  {{ $t('Continu (valeurs)') }}
                 </option>
               </select>
             </div>
-          </div>
-        </fieldset>
+            <div class="min-w-0">
+              <label
+                for="x-axis-sort-combined"
+                class="fr-label"
+              >{{ $t('Trier par') }}</label>
+              <Listbox
+                id="x-axis-sort-combined"
+                v-model="sortProxy"
+                class="w-full"
+                :options="sortOptions"
+                :display-value="(opt) => opt ? `${opt.column}${opt.column ? ' - ' : ''}${opt.label}` : $t('Sélectionnez une option')"
+                :get-option-id="(opt) => opt.value"
+              >
+                <template #button>
+                  <div class="w-full flex items-center justify-between gap-2 min-w-0">
+                    <div
+                      class="truncate"
+                      :class="{ 'text-new-disabled-text': !sortProxy }"
+                    >
+                      {{ sortProxy ? `${sortProxy.column}${sortProxy.column ? ' - ' : ''}${sortProxy.label}` : $t('Sélectionnez une option') }}
+                    </div>
+                    <RiArrowDownSLine class="flex-none size-4 justify-self-end" />
+                  </div>
+                </template>
+                <template #option="{ option }">
+                  <div class="w-full flex items-center justify-between gap-2">
+                    <span class="truncate">{{ option.column }}{{ option.column ? ' - ' : '' }}{{ option.label }}</span>
+                    <component
+                      :is="option.icon"
+                      v-if="option.icon"
+                      class="size-4 text-new-gray-medium"
+                    />
+                  </div>
+                </template>
+              </Listbox>
+            </div>
+          </fieldset>
+
+          <fieldset class="min-w-0 border-t border-new-gray-light py-4 space-y-4">
+            <p class="font-bold mb-2">
+              {{ $t('Axe Y') }}
+            </p>
+            <div
+              v-for="(serie, index) in form.series"
+              :key="index"
+              class="space-y-4"
+            >
+              <div>
+                <SearchableSelect
+                  :id="`column-y-${index}`"
+                  :model-value="getSerieColumnYValue(serie)"
+                  :label="$t('Colonne Y')"
+                  :placeholder="$t('Rechercher une colonne...')"
+                  :options="yAxisColumnOptions"
+                  :display-value="(opt: {name: string, colType: ColumnType}) => opt.name"
+                  :get-option-id="(opt: {name: string, colType: ColumnType}) => opt.name"
+                  :group-by="(opt: {name: string, colType: ColumnType}) => typeConfig[opt.colType]?.label || opt.colType"
+                  :multiple="false"
+                  class="w-full"
+                  @update:model-value="(val) => serie.column_y = val?.name ?? ''"
+                >
+                  <template #option="{ option }">
+                    <component
+                      :is="getColumnTypeIcon(option.colType)"
+                      class="inline w-4 h-4 mr-2"
+                    />
+                    {{ option.name }}
+                  </template>
+                </SearchableSelect>
+              </div>
+
+              <div>
+                <label
+                  :for="`aggregate-y-${index}`"
+                  class="fr-label"
+                >{{ $t('Agrégation')
+                }}</label>
+                <select
+                  :id="`aggregate-y-${index}`"
+                  v-model="serie.aggregate_y"
+                  class="w-full fr-select"
+                >
+                  <option :value="null">
+                    {{ $t('Non') }}
+                  </option>
+                  <option value="sum">
+                    {{ $t('Somme') }}
+                  </option>
+                  <option value="avg">
+                    {{ $t('Moyenne') }}
+                  </option>
+                  <option value="min">
+                    {{ $t('Minimum') }}
+                  </option>
+                  <option value="max">
+                    {{ $t('Maximum') }}
+                  </option>
+                  <option value="median">
+                    {{ $t('Médiane') }}
+                  </option>
+                </select>
+              </div>
+            </div>
+            <AccordionGroup>
+              <Accordion title="Styles">
+                <div class="space-y-4">
+                  <div>
+                    <label
+                      for="y-axis-label"
+                      class="fr-label"
+                    >{{ $t('Label') }}</label>
+                    <input
+                      id="y-axis-label"
+                      v-model="form.y_axis.label"
+                      type="text"
+                      class="w-full fr-input"
+                    >
+                  </div>
+                  <div class="grid grid-cols-2 gap-4">
+                    <div>
+                      <label
+                        for="y-axis-min"
+                        class="fr-label"
+                      >{{ $t('Min') }}</label>
+                      <input
+                        id="y-axis-min"
+                        v-model.number="form.y_axis.min"
+                        type="number"
+                        class="w-full fr-input"
+                      >
+                    </div>
+                    <div>
+                      <label
+                        for="y-axis-max"
+                        class="fr-label"
+                      >{{ $t('Max') }}</label>
+                      <input
+                        id="y-axis-max"
+                        v-model.number="form.y_axis.max"
+                        type="number"
+                        class="w-full fr-input"
+                      >
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-2 gap-4">
+                    <div>
+                      <label
+                        for="y-axis-unit"
+                        class="fr-label"
+                      >{{ $t('Unité') }}</label>
+                      <input
+                        id="y-axis-unit"
+                        v-model="form.y_axis.unit"
+                        type="text"
+                        class="w-full fr-input"
+                        :placeholder="$t('ex: €, %, kg')"
+                      >
+                    </div>
+                    <div>
+                      <label
+                        for="y-axis-unit-position"
+                        class="fr-label"
+                      >{{ $t('Position unité')
+                      }}</label>
+                      <select
+                        id="y-axis-unit-position"
+                        v-model="form.y_axis.unit_position"
+                        class="w-full fr-select"
+                      >
+                        <option value="suffix">
+                          {{ $t('Suffixe') }}
+                        </option>
+                        <option value="prefix">
+                          {{ $t('Préfixe') }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </Accordion>
+            </AccordionGroup>
+          </fieldset>
 
-        <div
-          v-if="isAdmin"
-          class="px-6"
-        >
-          <BrandedButton type="submit">
-            {{ $t('Sauvegarder le graphique') }}
-          </BrandedButton>
-        </div>
+          <div
+            v-if="isAdmin"
+            class="min-w-0 space-y-4"
+          >
+            <BrandedButton type="submit">
+              {{ $t('Sauvegarder le graphique') }}
+            </BrandedButton>
+          </div>
+        </template>
       </div>
     </div>
   </form>
 </template>
 
 <script setup lang="ts">
-import type { Resource, PaginatedArray, ChartForm, Chart, Filter, FilterCondition, GenericFilter } from '@datagouv/components-next'
-import { useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, toChartApi, toChartForm, SearchableSelect } from '@datagouv/components-next'
+import type { Resource, PaginatedArray, ChartForm, Chart, Filter, AndFilters, GenericFilter, Owned, ColumnType, DataSeriesType, DataSeriesForm, FilterCondition } from '@datagouv/components-next'
+import { resolveColumnType, buildTypeConfig, useGetProfile, useHasTabularData, toast, BrandedButton, toChartApi, toChartForm, SearchableSelect, Listbox, useTranslation } from '@datagouv/components-next'
+import type { Component } from 'vue'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
-import { RiAddLine } from '@remixicon/vue'
+import { RiAddLine, RiArrowDownLine, RiArrowDownSLine, RiArrowUpLine, RiBarChartLine, RiLineChartLine, RiText } from '@remixicon/vue'
 import { useAPI } from '~/utils/api'
-
+import { isMeAdmin } from '~/utils/auth'
 import ChartFilterRow from './ChartFilterRow.vue'
+import ProducerSelect from '../ProducerSelect.vue'
+import Accordion from '~/components/Accordion/Accordion.global.vue'
+import AccordionGroup from '~/components/Accordion/AccordionGroup.global.vue'
 import type { DatasetSuggest } from '~/types/types'
 
+type CombinedSort = '' | 'axis_x-asc' | 'axis_x-desc' | 'axis_y-asc' | 'axis_y-desc'
+
+type SortOption = {
+  value: CombinedSort
+  column: string
+  direction: 'asc' | 'desc' | ''
+  label: string
+  icon: Component | null
+}
+
+const { $api } = useNuxtApp()
+const runtimeConfig = useRuntimeConfig()
+const { t } = useTranslation()
+const hasTabularData = useHasTabularData()
+const getProfile = useGetProfile()
+const isAdmin = isMeAdmin()
+const { data: charts, refresh } = await useAPI<PaginatedArray<Chart>>('/api/1/visualizations/', { lazy: true })
+
+const $chartsApi = $fetch.create({
+  baseURL: runtimeConfig.public.chartsApiBase as string,
+  onRequest({ options }) {
+    options.headers.set('Content-Type', 'application/json')
+    options.headers.set('Accept', 'application/json')
+  },
+})
+
+const typeConfig = buildTypeConfig(t)
 const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
 
 const form = defineModel<ChartForm>({
   required: true,
 })
 
-const { t } = useTranslation()
-
-const columns = ref<Record<string, Array<string>>>({})
-const columnsArray = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })))
-
-const dataset = ref<DatasetSuggest>({ id: '6170ae10981edd7b132f28a0', title: 'Logements et logements sociaux dans les EPCI' } as DatasetSuggest)
+const resourceProfiles = ref<Record<string, { profile: { categorical: string[] }, columns: Record<string, { python_type: string, format?: string }> }>>({})
+const columns = ref<Record<string, Array<{ name: string, type: ColumnType }>>>({})
+const producer = ref<Owned | null>(null)
+const dataset = ref<DatasetSuggest | null>(null)
 const savedResources = reactive<Record<string, Resource>>({})
-const selectedResource = ref('14dba482-41e3-4c54-b82a-d8c11d1d80eb')
+const selectedResource = ref<string | null>(null)
 const savedChart = ref<Chart | null>(null)
 const selectedChartId = ref('')
 
-const debounceMs = 300
-const title = ref(form.value.title)
-const desc = ref(form.value.description)
+const chartForViewer = ref(toChartApi(form.value))
 
-const { debounced: titleDebounced } = useDebouncedRef(title, debounceMs)
-const { debounced: descDebounced } = useDebouncedRef(desc, debounceMs)
+const chartTypeOptions = [
+  { value: 'line', label: t('Ligne'), icon: RiLineChartLine },
+  { value: 'histogram', label: t('Histogramme'), icon: RiBarChartLine },
+]
+
+const conditionOptions = ['exact', 'differs', 'is_null', 'is_not_null', 'greater', 'less', 'strictly_greater', 'strictly_less'] satisfies Array<FilterCondition>
 
 const resources = computed(() => Object.values(savedResources))
 
-const conditionOptions: Array<FilterCondition> = ['exact', 'differs', 'is_null', 'is_not_null', 'greater', 'less', 'strictly_greater', 'strictly_less']
+const sourceText = computed<string>(() => {
+  if (!dataset.value) return ''
+  const orgName = producer.value?.organization?.name || ''
+  return `${dataset.value.title}${orgName ? ` - ${orgName}` : ''} - datagouv.fr`
+})
 
-const sortOptionLabels = computed(() => {
+const chartTypeProxy = computed<{ value: string, label: string, icon: Component } | null>({
+  get: () => chartTypeOptions.find(o => o.value === form.value.chart_type) ?? null,
+  set: (val: { value: string, label: string, icon: Component } | null) => {
+    if (val) {
+      form.value.chart_type = val.value as DataSeriesType
+    }
+  },
+})
+
+const xAxisColumnProxy = computed<{ name: string, colType: ColumnType, resourceId: string } | null>({
+  get: () => {
+    const colName = form.value.x_axis.column_x
+    if (!colName) return null
+    return xAxisColumnOptions.value.find(opt => opt.name === colName) ?? null
+  },
+  set: (val: { name: string, colType: ColumnType, resourceId: string } | null) => {
+    form.value.x_axis.column_x = val?.name ?? ''
+  },
+})
+
+const xAxisColumnOptions = computed<Array<{ name: string, colType: ColumnType, resourceId: string }>>(() => {
+  const result: Array<{ name: string, colType: ColumnType, resourceId: string }> = []
+  for (const [resourceId, cols] of Object.entries(columns.value)) {
+    for (const col of cols) {
+      result.push({ name: col.name, colType: col.type, resourceId })
+    }
+  }
+  return result
+})
+
+const yAxisColumnOptions = computed<Array<{ name: string, colType: ColumnType }>>(() => {
+  const result: Array<{ name: string, colType: ColumnType }> = []
+  if (selectedResource.value && columns.value[selectedResource.value]) {
+    for (const col of columns.value[selectedResource.value]) {
+      if (col.type !== 'date') {
+        result.push({ name: col.name, colType: col.type })
+      }
+    }
+  }
+  return result
+})
+
+const sortOptions = computed<SortOption[]>(() => {
   const xAxisColumn = form.value.x_axis.column_x
   const yAxisColumn = form.value.series[0]?.column_y
-  return {
-    '': t('Aucun'),
-    'axis_x-asc': xAxisColumn ? `${xAxisColumn} - ${t('Ascendant')}` : t('Axe X - Ascendant'),
-    'axis_x-desc': xAxisColumn ? `${xAxisColumn} - ${t('Descendant')}` : t('Axe X - Descendant'),
-    'axis_y-asc': yAxisColumn ? `${yAxisColumn} - ${t('Ascendant')}` : t('Axe Y - Ascendant'),
-    'axis_y-desc': yAxisColumn ? `${yAxisColumn} - ${t('Descendant')}` : t('Axe Y - Descendant'),
-  }
+  return [
+    { value: '', column: '', direction: '', label: t('Aucun'), icon: null },
+    { value: 'axis_x-asc', column: xAxisColumn || t('Axe X'), direction: 'asc', label: t('Ascendant'), icon: RiArrowUpLine },
+    { value: 'axis_x-desc', column: xAxisColumn || t('Axe X'), direction: 'desc', label: t('Descendant'), icon: RiArrowDownLine },
+    { value: 'axis_y-asc', column: yAxisColumn || t('Axe Y'), direction: 'asc', label: t('Ascendant'), icon: RiArrowUpLine },
+    { value: 'axis_y-desc', column: yAxisColumn || t('Axe Y'), direction: 'desc', label: t('Descendant'), icon: RiArrowDownLine },
+  ]
 })
 
-const columnDetails = computed(() => {
-  const options = [{ key: '', value: t('Colonne'), disabled: true }]
-  const resourceColumns = columns.value[selectedResource.value]
+const sortProxy = computed<SortOption | null>({
+  get: () => sortOptions.value.find(o => o.value === form.value.x_axis.sort_combined) ?? null,
+  set: (val: SortOption | null) => {
+    if (val) {
+      form.value.x_axis.sort_combined = val.value
+    }
+  },
+})
+
+const columnDetails = computed<Array<{ key: string, value: string, disabled: boolean }>>(() => {
+  const options: Array<{ key: string, value: string, disabled: boolean }> = [{ key: '', value: t('Colonne'), disabled: true }]
+  const resourceColumns = columns.value[selectedResource.value ?? '']
 
   if (resourceColumns) {
-    options.push(...resourceColumns.map(c => ({ key: c, value: c, disabled: false })))
+    options.push(...resourceColumns.map(c => ({ key: c.name, value: c.name, disabled: false })))
   }
 
   return options
 })
 
-const { $api } = useNuxtApp()
-const runtimeConfig = useRuntimeConfig()
-const hasTabularData = useHasTabularData()
-const getProfile = useGetProfile()
-const isAdmin = isMeAdmin()
+function isFilter(f: GenericFilter | null): f is Filter {
+  return f?._cls === 'Filter'
+}
 
-// Create a new API client for chart-related API calls
-const $chartsApi = $fetch.create({
-  baseURL: runtimeConfig.public.chartsApiBase as string,
-  onRequest({ options }) {
-    options.headers.set('Content-Type', 'application/json')
-    options.headers.set('Accept', 'application/json')
-    options.credentials = 'include'
-  },
-})
+function isAndFilters(f: GenericFilter | null): f is AndFilters {
+  return f?._cls === 'AndFilters'
+}
 
-const { data: charts, refresh } = await useAPI<PaginatedArray<Chart>>('/api/1/visualizations/', { lazy: true })
+const filterList = computed<Array<Filter>>(() => {
+  if (!form.value.filter) return []
 
-watch(dataset, async (newDataset) => {
-  if (!newDataset) return
-  try {
-    const fetchedResources = await $chartsApi<PaginatedArray<Resource>>(`/api/2/datasets/${newDataset.id}/resources/`)
-    for (const r of fetchedResources.data.filter(resource => hasTabularData(resource))) {
-      savedResources[r.id] = r
-    }
+  const filter = form.value.filter
+  if (isFilter(filter)) {
+    return [filter]
   }
-  catch (error) {
-    console.error('Failed to fetch resources:', error)
-  }
-}, { immediate: true })
-
-watch(selectedResource, async (r) => {
-  if (r) {
-    await loadMissingResourcesForChart(new Set([r]))
-    if (columns.value[r]) {
-      return
+  else if (isAndFilters(filter)) {
+    const result: Array<Filter> = []
+    for (const f of filter.filters) {
+      if (isFilter(f)) {
+        result.push(f)
+      }
     }
-    const profile = await getProfile(r)
-    columns.value[r] = profile.profile.header
+    return result
   }
-}, { immediate: true })
-
-watch([titleDebounced, descDebounced], ([title, desc]) => {
-  form.value.title = title
-  form.value.description = desc
+  return []
 })
 
-watch(columns, (columnsPerResource) => {
-  const firstColumns = Object.values(columnsPerResource)
-  if (firstColumns.length === 0) return
-  const firstColumn = firstColumns[0].filter(c => c !== '__id')[0]
-  if (!form.value.x_axis.column_x && firstColumn) {
-    form.value.x_axis.column_x = firstColumn
-  }
-})
+function getColumnTypeIcon(colType: ColumnType): Component {
+  return typeConfig[colType]?.icon ?? RiText
+}
+
+function getSerieColumnYValue(serie: DataSeriesForm): { name: string, colType: ColumnType } | null {
+  const colName = serie.column_y
+  if (!colName) return null
+  return yAxisColumnOptions.value.find(opt => opt.name === colName) ?? null
+}
 
 async function loadMissingResourcesForChart(resourceIds: Set<string>) {
   for (const id of resourceIds) {
@@ -521,8 +673,14 @@ async function loadMissingResourcesForChart(resourceIds: Set<string>) {
 }
 
 async function suggestDataset(q: string): Promise<Array<DatasetSuggest>> {
-  return await $api<Array<DatasetSuggest>>('/api/1/datasets/suggest/', {
-    query: { q, size: 5 },
+  const query: Record<string, string> = { q, size: '5' }
+
+  if (!isAdmin && producer.value?.organization?.id) {
+    query.organization = producer.value.organization.id
+  }
+
+  return await $chartsApi<Array<DatasetSuggest>>('/api/1/datasets/suggest/', {
+    query,
   })
 }
 
@@ -540,8 +698,6 @@ async function loadChart(id: string) {
       }
 
       form.value = toChartForm(data)
-      title.value = data.title
-      desc.value = data.description
 
       await loadMissingResourcesForChart(chartResources)
 
@@ -586,39 +742,109 @@ async function saveChart() {
   }
 }
 
-const filterList = computed<Array<GenericFilter>>(() => {
-  if (!form.value.filter) return []
-  return [form.value.filter]
-})
-
 function removeFilter(index: number) {
   if (!form.value.filter) return
-  if (!('filters' in form.value.filter)) {
-    return form.value.filter = null
-  }
-  form.value.filter.filters.splice(index, 1)
-  if (form.value.filter.filters.length === 0) {
+
+  if (isFilter(form.value.filter)) {
     form.value.filter = null
   }
+  else if (isAndFilters(form.value.filter)) {
+    form.value.filter.filters.splice(index, 1)
+    if (form.value.filter.filters.length === 0) {
+      form.value.filter = null
+    }
+  }
 }
 
 function updateFilter(index: number, newFilter: Filter) {
-  if (!form.value.filter || !('filters' in form.value.filter)) {
-    form.value.filter = { _cls: 'AndFilters', filters: [] }
+  if (!form.value.filter) return
+
+  if (isFilter(form.value.filter)) {
+    form.value.filter = newFilter
+  }
+  else if (isAndFilters(form.value.filter)) {
+    form.value.filter.filters[index] = newFilter
   }
-  form.value.filter.filters[index] = newFilter
 }
 
 function addFilter() {
   const newFilter: Filter = { _cls: 'Filter', column: '', condition: 'exact' as const, value: '' }
+
   if (!form.value.filter) {
     form.value.filter = newFilter
   }
-  else if ('filters' in form.value.filter) {
-    form.value.filter.filters.push(newFilter)
+  else if (isFilter(form.value.filter)) {
+    form.value.filter = {
+      _cls: 'AndFilters',
+      filters: [form.value.filter, newFilter],
+    }
   }
-  else {
-    form.value.filter = { _cls: 'AndFilters', filters: [form.value.filter, newFilter] }
+  else if (isAndFilters(form.value.filter)) {
+    form.value.filter.filters.push(newFilter)
   }
 }
+
+watch(
+  () => ({
+    series: form.value.series,
+    x_axis: form.value.x_axis,
+    y_axis: form.value.y_axis,
+    filter: form.value.filter,
+    extras: form.value.extras,
+  }),
+  () => {
+    chartForViewer.value = toChartApi(form.value)
+  },
+  { deep: true, immediate: true },
+)
+
+watch(dataset, async (newDataset) => {
+  if (!newDataset) {
+    selectedResource.value = null
+    return
+  }
+  try {
+    const fetchedResources = await $chartsApi<PaginatedArray<Resource>>(`/api/2/datasets/${newDataset.id}/resources/`)
+    for (const r of fetchedResources.data.filter(resource => hasTabularData(resource))) {
+      savedResources[r.id] = r
+    }
+  }
+  catch (error) {
+    console.error('Failed to fetch resources:', error)
+  }
+}, { immediate: true })
+
+watch(producer, () => {
+  dataset.value = null
+  selectedResource.value = null
+})
+
+watch(selectedResource, async (r) => {
+  if (r) {
+    await loadMissingResourcesForChart(new Set([r]))
+    if (columns.value[r]?.length > 0) {
+      return
+    }
+    const profile = await getProfile(r)
+    resourceProfiles.value[r] = {
+      profile: { categorical: profile.profile.categorical },
+      columns: profile.profile.columns,
+    }
+    columns.value[r] = profile.profile.header.map((name) => {
+      const colInfo = profile.profile.columns[name]
+      const isCategorical = profile.profile.categorical.includes(name)
+      const colType = resolveColumnType(colInfo ?? { python_type: 'unknown', format: undefined }, isCategorical)
+      return { name, type: colType }
+    })
+  }
+}, { immediate: true })
+
+watch(columns, (columnsPerResource) => {
+  const firstColumns = Object.values(columnsPerResource)
+  if (firstColumns.length === 0) return
+  const firstColumn = firstColumns[0].filter(c => c.name !== '__id')[0]
+  if (!form.value.x_axis.column_x && firstColumn) {
+    form.value.x_axis.column_x = firstColumn.name
+  }
+})
 </script>
diff --git a/components/ProducerSelect.vue b/components/ProducerSelect.vue
index 40865dc60..afb7e6e75 100644
--- a/components/ProducerSelect.vue
+++ b/components/ProducerSelect.vue
@@ -49,7 +49,7 @@
         color="primary"
         @click="navigateTo('/admin/organizations/new/')"
       >
-        {{ t("Créer ou rejoindre une organisation") }}
+        <span class="block whitespace-normal">{{ t("Créer ou rejoindre une organisation") }}</span>
       </BrandedButton>
     </PaddedContainer>
   </div>
diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index 093da9eca..523a09325 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -22,7 +22,7 @@ const props = defineProps<{
   chart: Chart | ChartForApi
   series: {
     data: Record<string, Array<Record<string, unknown>>>
-    columns: Record<string, Array<string>>
+    columns: Record<string, Array<{ name: string, type: string }>>
   }
 }>()
 
@@ -32,7 +32,7 @@ let echartsInstance: EChartsType | null = null
 
 function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
   if (!xAxis) return 'category'
-  return (xAxis.type ?? 'discrete') === 'continuous' ? 'value' : 'category'
+  return xAxis.type === 'continuous' ? 'value' : 'category'
 }
 
 function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefined {
@@ -53,7 +53,8 @@ const echartsOption = computed(() => {
     const yColumn = s.aggregate_y ? `${s.column_y}__${s.aggregate_y}` : s.column_y
     const resourceId = s.resource_id
 
-    if (!xColumn || !yColumn || !resourceId || !s.type || !props.series.data[resourceId] || !props.series.columns[resourceId]) {
+    const resourceColumns = props.series.columns[resourceId]
+    if (!xColumn || !yColumn || !resourceId || !s.type || !props.series.data[resourceId] || !resourceColumns) {
       return null
     }
 
@@ -110,7 +111,7 @@ const echartsOption = computed(() => {
     return {
       series: {
         type: s.type === 'histogram' ? 'bar' : 'line',
-        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : resourceColumns.map(c => c.name),
         name: yColumn,
         encode: {
           x: xColumn,
@@ -119,7 +120,7 @@ const echartsOption = computed(() => {
       } as LineSeriesOption | BarSeriesOption,
       data: {
         source: sortedData,
-        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : resourceColumns.map(c => c.name),
       },
     }
   })
@@ -137,10 +138,10 @@ const echartsOption = computed(() => {
 
   return {
     dataset: [...seriesData.data],
-    title: {
-      text: props.chart.title,
-      left: 'center',
+    textStyle: {
+      fontFamily: 'Marianne, arial, sans-serif',
     },
+    color: '#000091',
     tooltip: {
       trigger: 'axis' as const,
       formatter: (params: Array<{ value: Record<string, unknown>, axisValueLabel: string, seriesName: string }>) => {
@@ -154,7 +155,7 @@ const echartsOption = computed(() => {
       },
     },
     legend: {
-      show: seriesData.series.length > 1,
+      show: false,
       bottom: 0,
     },
     grid: {
diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index 34dfc1182..3102a2001 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -18,20 +18,23 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import ChartViewer from './ChartViewer.vue'
 import LoadingBlock from '../../components/LoadingBlock.vue'
 import { useComponentsConfig } from '../../config'
 import { fetchTabularData, useGetProfile } from '../../functions/tabularApi'
 import type { Chart, ChartForApi } from '../../types/visualizations'
 import { useTranslation } from '../../composables/useTranslation'
+import { watchDebounced } from '@vueuse/shared'
+import { resolveColumnType } from '../../functions/tabular'
+import type { ColumnType } from '../TabularExplorer/types'
 
 const props = defineProps<{
   chart: Chart | ChartForApi
 }>()
 
 const emit = defineEmits<{
-  columns: [columns: Record<string, Array<string>>]
+  columns: [columns: Record<string, Array<{ name: string, type: ColumnType }>>]
 }>()
 
 const { t } = useTranslation()
@@ -45,12 +48,18 @@ const pendingOperations = ref(0)
 
 const series = reactive<{
   data: Record<string, Array<Record<string, unknown>>>
-  columns: Record<string, Array<string>>
+  columns: Record<string, Array<{ name: string, type: ColumnType }>>
 }>({
   data: {},
   columns: {},
 })
 
+const resourceIds = computed(() => {
+  return props.chart.series
+    .filter(s => s.resource_id)
+    .map(s => s.resource_id)
+})
+
 async function fetchSeriesProfile() {
   pendingOperations.value++
   status.value = 'pending'
@@ -78,7 +87,12 @@ async function fetchSeriesProfile() {
       .map(r => r.value)
     series.columns = Object.fromEntries(results.map(result => [
       result.id,
-      result.profile.profile.header,
+      result.profile.profile.header.map((name) => {
+        const colInfo = result.profile.profile.columns[name]
+        const isCategorical = result.profile.profile.categorical.includes(name)
+        const colType = resolveColumnType(colInfo ?? { python_type: 'unknown', format: undefined }, isCategorical)
+        return { name, type: colType }
+      }),
     ]))
   }
   catch (err) {
@@ -86,6 +100,7 @@ async function fetchSeriesProfile() {
     status.value = 'error'
     console.error(err)
     series.columns = {}
+    series.data = {}
   }
   finally {
     pendingOperations.value--
@@ -148,13 +163,16 @@ async function fetchSeriesData() {
   }
 }
 
-watch(() => props.chart.series, async () => {
+watch(resourceIds, async () => {
   await fetchSeriesProfile()
-}, { immediate: true, deep: true })
+}, { immediate: true })
 
-watch([() => props.chart.series, () => props.chart.x_axis.column_x], async () => {
+watchDebounced([
+  () => props.chart.series,
+  () => props.chart.x_axis.column_x,
+], async () => {
   await fetchSeriesData()
-}, { immediate: true, deep: true })
+}, { debounce: config.searchDebounce ?? 300, immediate: true, deep: true })
 
 watch(() => series.columns, () => {
   emit('columns', series.columns)
diff --git a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
index 93261c585..b79aeed94 100644
--- a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
+++ b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
@@ -474,7 +474,7 @@ import {
 import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
-import { buildTypeConfig, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy } from '../../functions/tabular'
+import { buildTypeConfig, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy, resolveColumnType } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import SimpleBanner from '../SimpleBanner.vue'
 import BrandedButton from '../BrandedButton.vue'
@@ -770,23 +770,18 @@ function toggleMobileFilterColumn(col: string) {
 }
 
 // Column type helpers
-function resolveColumnType(col: string): ColumnType {
+function getColumnTypeFromName(col: string): ColumnType {
   const profile = profileData.value?.profile
   if (!profile) return 'text'
   const colInfo = profile.columns[col]
   if (!colInfo) return 'text'
-  if (['int', 'float'].includes(colInfo.python_type)) return 'number'
-  if (colInfo.format === 'year') return 'date'
-  if (['date', 'datetime'].includes(colInfo.python_type)) return 'date'
-  if (colInfo.python_type === 'bool') return 'boolean'
-  if (profile.categorical.includes(col)) return 'categorical'
-  return 'text'
+  return resolveColumnType(colInfo, profile.categorical.includes(col))
 }
 
 const columnTypesMap = computed(() => {
   const map: Record<string, ColumnType> = {}
   for (const col of allColumns.value) {
-    map[col] = resolveColumnType(col)
+    map[col] = getColumnTypeFromName(col)
   }
   return map
 })
diff --git a/datagouv-components/src/functions/tabular.ts b/datagouv-components/src/functions/tabular.ts
index 2fb5233e3..3ac5000e1 100644
--- a/datagouv-components/src/functions/tabular.ts
+++ b/datagouv-components/src/functions/tabular.ts
@@ -25,6 +25,15 @@ export function buildTypeConfig(t: (s: string) => string): Record<ColumnType, {
   }
 }
 
+export function resolveColumnType(colInfo: { python_type: string, format?: string }, isCategorical: boolean): ColumnType {
+  if (['int', 'float'].includes(colInfo.python_type)) return 'number'
+  if (colInfo.format === 'year') return 'date'
+  if (['date', 'datetime'].includes(colInfo.python_type)) return 'date'
+  if (colInfo.python_type === 'bool') return 'boolean'
+  if (isCategorical) return 'categorical'
+  return 'text'
+}
+
 export function useFormatTabular() {
   const { locale } = useTranslation()
 
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 13e22404b..b036febc6 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -24,6 +24,7 @@ import type { Weight, WellType } from './types/ui'
 import type { User, UserReference } from './types/users'
 import type { Report, ReportSubject, ReportReason } from './types/reports'
 import type { Chart, ChartForm, ChartForApi, FilterCondition, Filter, AndFilters, GenericFilter, XAxisType, XAxisSortBy, SortDirection, XAxis, XAxisForm, UnitPosition, YAxis, DataSeriesType, DataSeries, DataSeriesForm } from './types/visualizations'
+import type { ColumnType } from './components/TabularExplorer/types'
 import type { GlobalSearchConfig, SearchType, SearchTypeConfig, SortOption, HiddenFilter, BuiltInFilterKey, DatasetSearchConfig, DatasetSearchFilters, DataserviceSearchConfig, DataserviceSearchFilters, ReuseSearchConfig, ReuseSearchFilters, OrganizationSearchConfig, OrganizationSearchFilters, TopicSearchConfig, TopicSearchFilters } from './types/search'
 import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultOrganizationConfig, getDefaultTopicConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
 import { useSearchFilter } from './composables/useSearchFilter'
@@ -247,6 +248,7 @@ export type {
   Chart,
   ChartForm,
   ChartForApi,
+  ColumnType,
   FilterCondition,
   Filter,
   AndFilters,
diff --git a/package.json b/package.json
index fc27811bd..2ba2a0e37 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "lint:fix": "eslint . --fix",
     "lint-staged": "lint-staged",
     "build": "NODE_OPTIONS=--max-old-space-size=8192 nuxt build",
-    "typecheck": "nuxt typecheck",
+    "typecheck": "NODE_OPTIONS=--max-old-space-size=8192 nuxt typecheck",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
diff --git a/pages/design/chart.vue b/pages/admin/beta/chart.vue
similarity index 78%
rename from pages/design/chart.vue
rename to pages/admin/beta/chart.vue
index ccbc5c3e4..d0d0fd916 100644
--- a/pages/design/chart.vue
+++ b/pages/admin/beta/chart.vue
@@ -1,17 +1,16 @@
 <template>
   <div>
     <Breadcrumb>
-      <BreadcrumbItem to="/design">
-        {{ $t('Système de design') }}
+      <BreadcrumbItem to="/">
+        {{ $t('Accueil') }}
       </BreadcrumbItem>
-      <BreadcrumbItem to="/design/chart">
-        {{ $t('Chart') }}
+      <BreadcrumbItem>
+        {{ $t('Visualisations') }}
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        {{ $t('Formulaire de publication') }}
       </BreadcrumbItem>
     </Breadcrumb>
-    <h1 class="mb-3">
-      Chart Configurator
-    </h1>
-
     <ChartConfigurator v-model="chart" />
   </div>
 </template>
@@ -21,12 +20,12 @@ import type { ChartForm } from '@datagouv/components-next'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 import ChartConfigurator from '~/components/Charts/ChartConfigurator.vue'
 
-const me = useMaybeMe()
+const me = useMe()
 
 const chart = ref<ChartForm>({
   owned: {
     organization: null,
-    owner: me.value ? me.value.id : 'dummyForDS',
+    owner: me.value.id,
   },
   title: 'Mon graphique',
   description: '',
diff --git a/public/illustrations/_chart.svg b/public/illustrations/chart.svg
similarity index 100%
rename from public/illustrations/_chart.svg
rename to public/illustrations/chart.svg
diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 15f66714c..cfc380500 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -1,103 +1,264 @@
 import type { Chart } from '@datagouv/components-next'
+import type { Page } from '@playwright/test'
 import { test, expect } from '../base'
+import { clickOutside } from '../helpers'
 
-test('dataset selector shows default dataset', async ({ page }) => {
-  await page.goto('/design/chart')
+async function setupChart(page: Page) {
+  await page.goto('/admin/beta/chart')
   await page.waitForLoadState('networkidle')
 
+  await page.getByTestId('producer-select').click()
+  await page.getByRole('option', { name: 'Admin User', exact: true }).click()
+
+  await page.getByTestId('searchable-select-jeu-de-donn-es').click()
+
+  const getPromise = page.waitForResponse('**/api/1/datasets/suggest/?q=logements+sociaux*')
   const datasetSelect = page.getByPlaceholder('Recherchez un jeu de données...')
-  // SearchableSelect displays the selected value in a different way
-  const displayedValue = await datasetSelect.inputValue()
-  await expect(datasetSelect).toBeVisible()
-  expect(displayedValue).toContain('Logements et logements sociaux')
+  await datasetSelect.fill('logements sociaux')
+  await getPromise
+
+  await page.getByRole('option', { name: 'Logements et logements sociaux dans les EPCI', exact: true }).click()
+  await clickOutside(page)
+
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('Enter')
+
+  const resourceSelect = page.getByLabel('Choix de la ressource')
+  await resourceSelect.selectOption({ index: 1 })
+
+  expect(page.getByLabel('Titre')).toBeVisible()
+}
+
+test('title input updates form value without debounce', async ({ page }) => {
+  await setupChart(page)
+
+  await page.getByLabel('Titre').fill('Nouveau titre de graphique')
+
+  expect(await page.getByLabel('Titre').inputValue()).toBe('Nouveau titre de graphique')
 })
 
-test('resource selector shows available resources', async ({ page }) => {
-  await page.goto('/design/chart')
-  await page.waitForLoadState('networkidle')
+test('description input updates form value without debounce', async ({ page }) => {
+  await setupChart(page)
+
+  await page.getByLabel('Description').fill('Nouvelle description de graphique')
 
-  const resourceOptions = await page.getByLabel('Choix de la ressource').locator('option').all()
+  expect(await page.getByLabel('Description').inputValue()).toBe('Nouvelle description de graphique')
+})
+
+test('chart type selector defaults to histogram', async ({ page }) => {
+  await setupChart(page)
 
-  expect(resourceOptions.length).toBeGreaterThan(1)
+  const chartTypeButton = page.locator('#chart-type').getByRole('button')
+  const chartTypeText = await chartTypeButton.textContent()
+  expect(chartTypeText).toContain('Histogramme')
+})
+
+test('chart type selector can switch to line chart', async ({ page }) => {
+  await setupChart(page)
+
+  const chartTypeButton = page.locator('#chart-type').getByRole('button')
+  await chartTypeButton.click()
+
+  await page.getByRole('option', { name: 'Ligne', exact: true }).click()
+
+  const chartTypeText = await chartTypeButton.textContent()
+  expect(chartTypeText).toContain('Ligne')
 })
 
 test('x-axis column selector shows available columns', async ({ page }) => {
-  await page.goto('/design/chart')
-  await page.waitForLoadState('networkidle')
+  await setupChart(page)
 
-  const columnOptions = await page.getByLabel('Choisir quoi afficher').locator('option').allTextContents()
+  await page.getByTestId('searchable-select-choisir-quoi-afficher').click()
 
-  expect(columnOptions).toContain('libellé_EPCI')
-  expect(columnOptions).toContain('nom_region')
+  await expect(page.getByRole('option', { name: 'libellé_EPCI', exact: true })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'nom_region', exact: true })).toBeVisible()
 })
 
 test('series column y selector shows available columns', async ({ page }) => {
-  await page.goto('/design/chart')
-  await page.waitForLoadState('networkidle')
+  await setupChart(page)
+
+  await page.getByTestId('searchable-select-colonne-y').click()
+
+  await expect(page.getByRole('option', { name: 'Nombre de logements', exact: true })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'libellé_EPCI', exact: true })).toBeVisible()
+})
 
-  const columnYOptions = await page.getByLabel('Colonne Y').locator('option').allTextContents()
+test('series aggregation defaults to none', async ({ page }) => {
+  await setupChart(page)
 
-  expect(columnYOptions).toContain('Nombre de logements')
-  expect(columnYOptions).toContain('libellé_EPCI')
+  const aggregationSelect = page.getByLabel('Agrégation')
+  const aggregation = await aggregationSelect.inputValue()
+  expect(aggregation).toBe('Non')
+})
+
+test('series aggregation can be changed to sum', async ({ page }) => {
+  await setupChart(page)
+
+  const aggregationSelect = page.getByLabel('Agrégation')
+  await aggregationSelect.selectOption('Somme')
+
+  const aggregation = await aggregationSelect.inputValue()
+  expect(aggregation).toBe('sum')
+})
+
+test('series aggregation can be changed to avg', async ({ page }) => {
+  await setupChart(page)
+
+  const aggregationSelect = page.getByLabel('Agrégation')
+  await aggregationSelect.selectOption('Moyenne')
+
+  const aggregation = await aggregationSelect.inputValue()
+  expect(aggregation).toBe('avg')
 })
 
 test('sort select displays dynamic column names', async ({ page }) => {
-  await page.goto('/design/chart')
-  await page.waitForLoadState('networkidle')
+  await setupChart(page)
 
-  // Check that the sort select now shows dynamic column names instead of static "Axe X - Ascendant"
-  const sortOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
+  const listbox = page.locator('#x-axis-sort-combined')
+  await listbox.click()
+
+  const sortOptions = await listbox.locator('role=option').allTextContents()
 
   expect(sortOptions[0]).toBe('Aucun')
 
-  // Second option should show the dynamic column name, not "Axe X - Ascendant"
   expect(sortOptions[1]).toContain('libellé_EPCI')
   expect(sortOptions[1]).not.toContain('Axe X - Ascendant')
 
-  await page.getByLabel('Trier par').selectOption({ label: 'libellé_EPCI - Descendant' })
+  await listbox.getByRole('option', { name: 'libellé_EPCI - Descendant' }).click()
 
-  const selectedValue = await page.getByLabel('Trier par').inputValue()
-  expect(selectedValue).toBe('axis_x-desc')
+  const buttonText = await listbox.locator('.input').textContent()
+  expect(buttonText).toContain('libellé_EPCI - Descendant')
 })
 
 test('sort select updates reactively when column changes', async ({ page }) => {
-  await page.goto('/design/chart')
-  await page.waitForLoadState('networkidle')
+  await setupChart(page)
 
-  const firstOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
+  const listbox = page.locator('#x-axis-sort-combined')
+  await listbox.click()
+
+  const firstOptions = await listbox.locator('role=option').allTextContents()
   expect(firstOptions[1]).toContain('libellé_EPCI')
+  await clickOutside(page)
 
-  await page.getByLabel('Choisir quoi afficher').selectOption('nom_region')
+  const xAxisSelect = page.getByTestId('searchable-select-choisir-quoi-afficher')
+  await xAxisSelect.click()
+  await expect(page.getByRole('option', { name: 'nom_region', exact: true })).toBeVisible()
+  await page.getByRole('option', { name: 'nom_region', exact: true }).click()
+  await clickOutside(page)
 
-  await page.waitForTimeout(500)
+  await listbox.click()
 
-  const updatedOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
+  const updatedOptions = await listbox.locator('role=option').allTextContents()
   expect(updatedOptions[1]).toContain('nom_region')
   expect(updatedOptions[1]).not.toContain('libellé_EPCI')
 })
 
 test('Y axis sort options show dynamic series column name too', async ({ page }) => {
-  await page.goto('/design/chart')
-  await page.waitForLoadState('networkidle')
+  await setupChart(page)
 
-  await page.waitForTimeout(1000)
+  const yAxisSelect = page.getByTestId('searchable-select-colonne-y')
+  await yAxisSelect.click()
+  await page.getByRole('option', { name: 'année_publication', exact: true }).click()
+  await clickOutside(page)
 
-  await page.getByLabel('Colonne Y').selectOption('Nombre de logements')
+  const listbox = page.locator('#x-axis-sort-combined')
+  await listbox.click()
+  const sortOptions = await listbox.locator('role=option').allTextContents()
 
-  const sortOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
-
-  // Y axis ascending option should show dynamic column name
-  expect(sortOptions[3]).toContain('Nombre de logements')
+  expect(sortOptions[3]).toContain('année_publication')
   expect(sortOptions[3]).not.toContain('Axe Y - Ascendant')
 })
 
+test('y-axis label input is initially empty', async ({ page }) => {
+  await setupChart(page)
+
+  await page.getByText('Styles').click()
+
+  const labelInput = page.getByLabel('Label')
+  const labelValue = await labelInput.inputValue()
+  expect(labelValue).toBe('')
+})
+
+test('y-axis label input can be filled', async ({ page }) => {
+  await setupChart(page)
+
+  await page.getByText('Styles').click()
+
+  const labelInput = page.getByLabel('Label')
+  await labelInput.fill('Nombre de logements sociaux')
+
+  const labelValue = await labelInput.inputValue()
+  expect(labelValue).toBe('Nombre de logements sociaux')
+})
+
+test('y-axis min and max inputs are initially empty', async ({ page }) => {
+  await setupChart(page)
+
+  await page.getByText('Styles').click()
+
+  const minInput = page.locator('#y-axis-min')
+  const maxInput = page.locator('#y-axis-max')
+  const minValue = await minInput.inputValue()
+  const maxValue = await maxInput.inputValue()
+
+  expect(minValue).toBe('')
+  expect(maxValue).toBe('')
+})
+
+test('y-axis min and max can be set', async ({ page }) => {
+  await setupChart(page)
+
+  await page.getByText('Styles').click()
+
+  const minInput = page.locator('#y-axis-min')
+  const maxInput = page.locator('#y-axis-max')
+  await minInput.fill('0')
+  await maxInput.fill('100')
+
+  const minValue = await minInput.inputValue()
+  const maxValue = await maxInput.inputValue()
+
+  expect(minValue).toBe('0')
+  expect(maxValue).toBe('100')
+})
+
+test('y-axis unit input is initially empty', async ({ page }) => {
+  await setupChart(page)
+
+  await page.getByText('Styles').click()
+
+  const unitInput = page.getByRole('textbox', { name: 'Unité' })
+  const unitValue = await unitInput.inputValue()
+  expect(unitValue).toBe('')
+})
+
+test('y-axis unit position defaults to suffix', async ({ page }) => {
+  await setupChart(page)
+
+  await page.getByText('Styles').click()
+
+  const unitPositionSelect = page.getByLabel('Position unité')
+  const unitPosition = await unitPositionSelect.inputValue()
+  expect(unitPosition).toBe('suffix')
+})
+
+test('y-axis unit position can be changed to prefix', async ({ page }) => {
+  await setupChart(page)
+
+  await page.getByText('Styles').click()
+
+  const unitPositionSelect = page.getByLabel('Position unité')
+  await unitPositionSelect.selectOption('Préfixe')
+
+  const unitPosition = await unitPositionSelect.inputValue()
+  expect(unitPosition).toBe('prefix')
+})
+
 test('saving chart sends correct data to API', async ({ page, baseURL }) => {
-  await page.goto('/design/chart')
-  await page.waitForLoadState('networkidle')
+  await setupChart(page)
 
   await page.getByLabel('Titre').fill('Test Chart')
   await page.getByLabel('Description').fill('Test Description')
-  await page.waitForTimeout(500)
 
   const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
@@ -112,25 +273,94 @@ test('saving chart sends correct data to API', async ({ page, baseURL }) => {
   await page.request.delete(`${baseURL}/api/1/visualizations/${responseBody!.id}/`)
 })
 
-test('complete chart configuration flow', async ({ page, baseURL }) => {
-  await page.goto('/design/chart')
+test('saving chart shows success message', async ({ page, baseURL }) => {
+  await setupChart(page)
+
+  await page.getByLabel('Titre').fill('Test Chart')
+  await page.getByLabel('Description').fill('Test Description')
+
+  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
+  const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
+
+  await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
+  const response = await responsePromise
+  const responseBody = (await response.json()) as Chart
+  await getPromise
+
+  await page.waitForTimeout(300)
+
+  await expect(page.getByText('Graphique sauvegardé !')).toBeVisible()
+
+  await page.request.delete(`${baseURL}/api/1/visualizations/${responseBody!.id}/`)
+})
+
+test('existing charts selector shows placeholder option', async ({ page }) => {
+  await page.goto('/admin/beta/chart')
+
   await page.waitForLoadState('networkidle')
 
+  const chartOptions = await page.getByLabel('Graphiques existants').locator('option').allTextContents()
+
+  expect(chartOptions[0]).toBe('Sélectionnez un graphique')
+})
+
+test('load button is disabled without selected chart', async ({ page }) => {
+  await page.goto('/admin/beta/chart')
+  await page.waitForLoadState('networkidle')
+
+  const loadButton = page.getByRole('button', { name: 'Charger' })
+  await expect(loadButton).toBeDisabled()
+})
+
+test('load button becomes enabled when chart is selected', async ({ page, baseURL }) => {
+  await setupChart(page)
+
+  await page.getByLabel('Titre').fill('Chart to load')
+  await page.getByLabel('Description').fill('Chart to load description')
+
+  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
+  const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
+
+  await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
+  const response = await responsePromise
+  const responseBody = (await response.json()) as Chart
+  await getPromise
+
+  const chartId = responseBody!.id
+
+  await page.getByLabel('Graphiques existants').selectOption(chartId)
+
+  const loadButton = page.getByRole('button', { name: 'Charger' })
+  await expect(loadButton).toBeEnabled()
+
+  await page.request.delete(`${baseURL}/api/1/visualizations/${chartId}/`)
+})
+
+test('complete chart configuration flow', async ({ page, baseURL }) => {
+  await setupChart(page)
+
   await page.getByLabel('Titre').fill('Graphique complet')
   await page.getByLabel('Description').fill('Test complet de configuration')
-  await page.waitForTimeout(500)
 
-  await page.getByLabel('Type de graphique').selectOption('line')
+  const chartTypeButton = page.locator('#chart-type').getByRole('button')
+  await chartTypeButton.click()
+  await page.getByRole('option', { name: 'Ligne', exact: true }).click()
+
+  await page.getByTestId('searchable-select-choisir-quoi-afficher').click()
+  await page.getByRole('option', { name: 'code_region', exact: true }).click()
 
-  await page.getByLabel('Choisir quoi afficher').selectOption('code_region')
   await page.getByLabel('Type', { exact: true }).first().selectOption('continuous')
 
-  await page.getByLabel('Colonne Y').selectOption('Parc social - Taux de logements vacants* (en %)')
-  await page.getByLabel('Agrégation').selectOption('avg')
+  await page.getByTestId('searchable-select-colonne-y').click()
+  await page.getByRole('option', { name: 'Taux de logements vacants* (en %)', exact: true }).click()
+
+  await page.getByLabel('Agrégation').selectOption('Moyenne')
+
+  await page.getByText('Styles').click()
 
   await page.getByLabel('Label').fill('Taux (%)')
-  await page.getByLabel('Min').fill('0')
-  await page.getByLabel('Max').fill('100')
+  await page.locator('#y-axis-min').fill('0')
+  await page.locator('#y-axis-max').fill('100')
   await page.locator('#y-axis-unit').fill('%')
   await page.getByLabel('Position unité').selectOption('prefix')
 
@@ -142,20 +372,24 @@ test('complete chart configuration flow', async ({ page, baseURL }) => {
   const responseBody = (await response.json()) as Chart
   await getPromise
 
+  await page.waitForTimeout(300)
+  await expect(page.getByText('Graphique sauvegardé !')).toBeVisible()
+
   expect(responseBody!.title).toBe('Graphique complet')
   expect(await page.getByLabel('Graphiques existants').inputValue()).toBe(responseBody!.id)
 
   expect(await page.getByLabel('Titre').inputValue()).toBe('Graphique complet')
   expect(await page.getByLabel('Description').inputValue()).toBe('Test complet de configuration')
-  expect(await page.getByLabel('Type de graphique').inputValue()).toBe('line')
-  expect(await page.getByLabel('Choisir quoi afficher').inputValue()).toBe('code_region')
+
+  const chartTypeText = await page.locator('#chart-type').getByRole('button').textContent()
+  expect(chartTypeText).toContain('Ligne')
+
   expect(await page.getByLabel('Type', { exact: true }).first().inputValue()).toBe('continuous')
-  expect(await page.getByLabel('Colonne Y').inputValue()).toBe('Parc social - Taux de logements vacants* (en %)')
   expect(await page.getByLabel('Agrégation').inputValue()).toBe('avg')
   expect(await page.getByLabel('Label').inputValue()).toBe('Taux (%)')
-  expect(await page.getByLabel('Min').inputValue()).toBe('0')
-  expect(await page.getByLabel('Max').inputValue()).toBe('100')
-  expect(await page.getByLabel('Unité', { exact: true }).inputValue()).toBe('%')
+  expect(await page.locator('#y-axis-min').inputValue()).toBe('0')
+  expect(await page.locator('#y-axis-max').inputValue()).toBe('100')
+  expect(await page.locator('#y-axis-unit').inputValue()).toBe('%')
   expect(await page.getByLabel('Position unité').inputValue()).toBe('prefix')
 
   await page.request.delete(`${baseURL}/api/1/visualizations/${responseBody!.id}/`)