diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
index 7e4ac9dc7..e386c6384 100644
--- a/app/charts/area/areas-state.tsx
+++ b/app/charts/area/areas-state.tsx
@@ -29,17 +29,17 @@ import {
   stackOffsetDivergingPositiveZeros,
   useOptionalNumericVariable,
   usePlottableData,
-  usePreparedData,
+  useDataAfterInteractiveFilters,
   useSegment,
   useStringVariable,
   useTemporalVariable,
 } from "@/charts/shared/chart-helpers";
+import { CommonChartState } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
-import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
+import { Observer, useWidth } from "@/charts/shared/use-width";
 import { AreaFields } from "@/configurator";
 import { isTemporalDimension, Observation } from "@/domain/data";
 import {
@@ -52,10 +52,11 @@ import { sortByIndex } from "@/utils/array";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
-export interface AreasState {
+export interface AreasState extends CommonChartState {
   chartType: "area";
   data: Observation[];
-  bounds: Bounds;
+  allData: Observation[];
+  preparedData: Observation[];
   getX: (d: Observation) => Date;
   xScale: ScaleTime<number, number>;
   xEntireScale: ScaleTime<number, number>;
@@ -92,8 +93,8 @@ const useAreasState = (
   } = chartProps;
   const width = useWidth();
   const formatNumber = useFormatNumber();
+  const estimateNumberWidth = (d: number) => estimateTextWidth(formatNumber(d));
   const timeFormatUnit = useTimeFormatUnit();
-  const [interactiveFilters] = useInteractiveFilters();
 
   const xDimension = dimensions.find((d) => d.iri === fields.x.componentIri);
 
@@ -133,10 +134,6 @@ const useAreasState = (
   );
 
   const xKey = fields.x.componentIri;
-  const hasInteractiveTimeFilter = useMemo(
-    () => interactiveFiltersConfig?.timeRange.active,
-    [interactiveFiltersConfig?.timeRange.active]
-  );
 
   // All Data (used for brushing)
   const sortedData = useMemo(
@@ -168,12 +165,9 @@ const useAreasState = (
     plotters: [getX, getY],
   });
 
-  // Data for chart
-  const preparedData = usePreparedData({
-    legendFilterActive: interactiveFiltersConfig?.legend.active,
-    timeRangeFilterActive: interactiveFiltersConfig?.timeRange.active,
+  const preparedData = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
-    interactiveFilters,
+    interactiveFiltersConfig,
     getX,
     getSegment,
   });
@@ -320,18 +314,18 @@ const useAreasState = (
   ]);
 
   /** Dimensions */
-  const left = hasInteractiveTimeFilter
-    ? estimateTextWidth(formatNumber(entireMaxTotalValue))
-    : Math.max(
-        estimateTextWidth(formatNumber(yScale.domain()[0])),
-        estimateTextWidth(formatNumber(yScale.domain()[1]))
-      );
-  const bottom = hasInteractiveTimeFilter ? BRUSH_BOTTOM_SPACE : 40;
+  const [yMin, yMax] = yScale.domain();
+  const left = interactiveFiltersConfig?.timeRange.active
+    ? estimateNumberWidth(entireMaxTotalValue)
+    : Math.max(estimateNumberWidth(yMin), estimateNumberWidth(yMax));
+  const bottom = interactiveFiltersConfig?.timeRange.active
+    ? BRUSH_BOTTOM_SPACE
+    : 40;
 
   const margins = {
     top: 50,
     right: 40,
-    bottom: bottom,
+    bottom,
     left: left + LEFT_MARGIN_OFFSET,
   };
   const chartWidth = width - margins.left - margins.right;
@@ -366,11 +360,8 @@ const useAreasState = (
     });
 
     const yAnchor = 0;
-
     const xPlacement = "center";
-
     const yPlacement = "top";
-
     const yValueFormatter = (value: number | null) =>
       formatNumberWithUnit(
         value,
@@ -400,8 +391,10 @@ const useAreasState = (
 
   return {
     chartType: "area",
-    data,
     bounds,
+    data,
+    allData: plottableSortedData,
+    preparedData,
     getX,
     xScale,
     xEntireScale,
diff --git a/app/charts/bar/bars-grouped-state.tsx b/app/charts/bar/bars-grouped-state.tsx
deleted file mode 100644
index 0989b7031..000000000
--- a/app/charts/bar/bars-grouped-state.tsx
+++ /dev/null
@@ -1,302 +0,0 @@
-import {
-  ascending,
-  descending,
-  group,
-  max,
-  min,
-  rollup,
-  scaleBand,
-  ScaleBand,
-  ScaleLinear,
-  scaleLinear,
-  ScaleOrdinal,
-  scaleOrdinal,
-  sum,
-} from "d3";
-import React, { ReactNode, useMemo } from "react";
-
-import {
-  BAR_HEIGHT,
-  BAR_SPACE_ON_TOP,
-  BOTTOM_MARGIN_OFFSET,
-} from "@/charts/bar/constants";
-import {
-  useNumericVariable,
-  useSegment,
-  useStringVariable,
-} from "@/charts/shared/chart-helpers";
-import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
-import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { InteractiveFiltersProvider } from "@/charts/shared/use-interactive-filters";
-import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
-import { BarFields, SortingOrder, SortingType } from "@/configurator";
-import { mkNumber } from "@/configurator/components/ui-helpers";
-import { Observation } from "@/domain/data";
-import { useLocale } from "@/locales/use-locale";
-import { getPalette } from "@/palettes";
-import { sortByIndex } from "@/utils/array";
-
-export interface GroupedBarsState {
-  chartType: string;
-  sortedData: Observation[];
-  bounds: Bounds;
-  getX: (d: Observation) => number;
-  xScale: ScaleLinear<number, number>;
-  getY: (d: Observation) => string;
-  yScale: ScaleBand<string>;
-  yScaleIn: ScaleBand<string>;
-  getSegment: (d: Observation) => string;
-  segments: string[];
-  xAxisLabel: string;
-  colors: ScaleOrdinal<string, string>;
-  grouped: [string, Observation[]][];
-}
-
-const useGroupedBarsState = ({
-  data,
-  fields,
-  dimensions,
-  measures,
-}: Pick<ChartProps, "data" | "dimensions" | "measures"> & {
-  fields: BarFields;
-}): GroupedBarsState => {
-  const locale = useLocale();
-  const width = useWidth();
-
-  const getX = useNumericVariable(fields.x.componentIri);
-  const getY = useStringVariable(fields.y.componentIri);
-  const getSegment = useSegment(fields.segment?.componentIri);
-
-  const xAxisLabel =
-    measures.find((d) => d.iri === fields.x.componentIri)?.label ??
-    fields.y.componentIri;
-
-  // Sort
-  const ySortingType = fields.y.sorting?.sortingType;
-  const ySortingOrder = fields.y.sorting?.sortingOrder;
-  const yOrder = [
-    ...rollup(
-      data,
-      (v) => sum(v, (x) => getX(x)),
-      (x) => getY(x)
-    ),
-  ]
-    .sort((a, b) => ascending(a[1], b[1]))
-    .map((d) => d[0]);
-
-  const sortedData = useMemo(
-    () =>
-      sortData({
-        data,
-        getY,
-        ySortingType,
-        ySortingOrder,
-        yOrder,
-      }),
-    [data, getY, ySortingType, ySortingOrder, yOrder]
-  );
-  // segments
-  const segmentSortingType = fields.segment?.sorting?.sortingType;
-  const segmentSortingOrder = fields.segment?.sorting?.sortingOrder;
-  const segmentsOrderedByName = Array.from(
-    new Set(sortedData.map((d) => getSegment(d)))
-  ).sort((a, b) =>
-    segmentSortingOrder === "asc"
-      ? a.localeCompare(b, locale)
-      : b.localeCompare(a, locale)
-  );
-
-  const segmentsOrderedByTotalValue = [
-    ...rollup(
-      sortedData,
-      (v) => sum(v, (x) => getX(x)),
-      (x) => getSegment(x)
-    ),
-  ]
-    .sort((a, b) =>
-      segmentSortingOrder === "asc"
-        ? ascending(a[1], b[1])
-        : descending(a[1], b[1])
-    )
-    .map((d) => d[0]);
-
-  const segments =
-    segmentSortingType === "byDimensionLabel"
-      ? segmentsOrderedByName
-      : segmentsOrderedByTotalValue;
-
-  // Map ordered segments to colors
-  const colors = scaleOrdinal<string, string>();
-  const segmentDimension = dimensions.find(
-    (d) => d.iri === fields.segment?.componentIri
-  ) as $FixMe;
-
-  if (fields.segment && segmentDimension && fields.segment.colorMapping) {
-    const orderedSegmentLabelsAndColors = segments.map((segment) => {
-      const dvIri = segmentDimension.values.find(
-        (s: $FixMe) => s.label === segment
-      ).value;
-
-      return {
-        label: segment,
-        color: fields.segment?.colorMapping![dvIri] || "#006699",
-      };
-    });
-
-    colors.domain(orderedSegmentLabelsAndColors.map((s) => s.label));
-    colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
-  } else {
-    colors.domain(segments);
-    colors.range(getPalette(fields.segment?.palette));
-  }
-
-  // x
-  const minValue = Math.min(mkNumber(min(sortedData, (d) => getX(d))), 0);
-  const maxValue = max(sortedData, (d) => getX(d)) as number;
-  const xScale = scaleLinear()
-    .domain([mkNumber(minValue), mkNumber(maxValue)])
-    .nice();
-
-  // y
-  const bandDomain = [...new Set(sortedData.map((d) => getY(d) as string))];
-  const chartHeight =
-    bandDomain.length * (BAR_HEIGHT * segments.length + BAR_SPACE_ON_TOP);
-
-  const yScale = scaleBand<string>().domain(bandDomain).range([0, chartHeight]);
-
-  const yScaleIn = scaleBand()
-    .domain(segments)
-    // .padding(0)
-    .range([0, BAR_HEIGHT * segments.length]);
-
-  // Group
-  const groupedMap = group(sortedData, getY);
-  const grouped = [...groupedMap];
-
-  // sort by segments
-  grouped.forEach((group) => {
-    return [
-      group[0],
-      sortByIndex({
-        data: group[1],
-        order: segments,
-        getCategory: getSegment,
-        sortOrder: segmentSortingOrder,
-      }),
-    ];
-  });
-
-  const margins = {
-    top: 0,
-    right: 40,
-    bottom: BOTTOM_MARGIN_OFFSET,
-    left: 0,
-  };
-  const chartWidth = width - margins.left - margins.right;
-  const bounds = {
-    width,
-    height: chartHeight + margins.top + margins.bottom,
-    margins,
-    chartWidth,
-    chartHeight,
-  };
-
-  xScale.range([0, chartWidth]);
-
-  return {
-    chartType: "bar",
-    sortedData,
-    bounds,
-    getX,
-    xScale,
-    getY,
-    yScale,
-    yScaleIn,
-    getSegment,
-    segments,
-    xAxisLabel,
-    colors,
-    grouped,
-  };
-};
-
-const GroupedBarsChartProvider = ({
-  data,
-  fields,
-  dimensions,
-  measures,
-
-  children,
-}: Pick<ChartProps, "data" | "dimensions" | "measures"> & {
-  children: ReactNode;
-  fields: BarFields;
-}) => {
-  const state = useGroupedBarsState({
-    data,
-    fields,
-    dimensions,
-    measures,
-  });
-  return (
-    <ChartContext.Provider value={state}>{children}</ChartContext.Provider>
-  );
-};
-
-export const GroupedBarsChart = ({
-  data,
-  fields,
-  dimensions,
-  measures,
-  children,
-}: Pick<ChartProps, "data" | "dimensions" | "measures"> & {
-  children: ReactNode;
-  fields: BarFields;
-}) => {
-  return (
-    <Observer>
-      <InteractionProvider>
-        <InteractiveFiltersProvider>
-          <GroupedBarsChartProvider
-            data={data}
-            fields={fields}
-            dimensions={dimensions}
-            measures={measures}
-          >
-            {children}
-          </GroupedBarsChartProvider>
-        </InteractiveFiltersProvider>
-      </InteractionProvider>
-    </Observer>
-  );
-};
-
-const sortData = ({
-  data,
-  getY,
-  ySortingType,
-  ySortingOrder,
-  yOrder,
-}: {
-  data: Observation[];
-  getY: (d: Observation) => string;
-  ySortingType: SortingType | undefined;
-  ySortingOrder: SortingOrder | undefined;
-  yOrder: string[];
-}) => {
-  if (ySortingOrder === "desc" && ySortingType === "byDimensionLabel") {
-    return [...data].sort((a, b) => descending(getY(a), getY(b)));
-  } else if (ySortingOrder === "asc" && ySortingType === "byDimensionLabel") {
-    return [...data].sort((a, b) => ascending(getY(a), getY(b)));
-  } else if (ySortingType === "byMeasure") {
-    const sd = sortByIndex({
-      data,
-      order: yOrder,
-      getCategory: getY,
-      sortOrder: ySortingOrder,
-    });
-    return sd;
-  } else {
-    // default to scending alphabetical
-    return [...data].sort((a, b) => ascending(getY(a), getY(b)));
-  }
-};
diff --git a/app/charts/bar/bars-grouped.tsx b/app/charts/bar/bars-grouped.tsx
deleted file mode 100644
index aaeb7b32a..000000000
--- a/app/charts/bar/bars-grouped.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { GroupedBarsState } from "@/charts/bar/bars-grouped-state";
-import { Bar } from "@/charts/bar/bars-simple";
-import { BAR_AXIS_OFFSET, BAR_SPACE_ON_TOP } from "@/charts/bar/constants";
-import { useChartState } from "@/charts/shared/use-chart-state";
-import { useChartTheme } from "@/charts/shared/use-chart-theme";
-import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
-
-export const BarsGrouped = () => {
-  const {
-    bounds,
-    xScale,
-    yScaleIn,
-    getX,
-    yScale,
-    getSegment,
-    colors,
-    grouped,
-  } = useChartState() as GroupedBarsState;
-  const { margins } = bounds;
-  const {
-    markBorderColor,
-    axisLabelFontSize,
-    axisLabelFontWeight,
-    axisLabelColor,
-  } = useChartTheme();
-  const [interactiveFilters] = useInteractiveFilters();
-  const { categories } = interactiveFilters;
-  const activeInteractiveFilters = Object.keys(categories);
-
-  return (
-    <g transform={`translate(${margins.left} ${margins.top})`}>
-      {grouped.map((segment, i) => {
-        return (
-          <g
-            key={`${segment[0]}-${i}`}
-            transform={`translate(0, ${yScale(segment[0])})`}
-          >
-            <text
-              x={xScale(0)}
-              y={BAR_SPACE_ON_TOP * (1 / 2)}
-              fontSize={axisLabelFontSize}
-              fontWeight={axisLabelFontWeight}
-              fill={axisLabelColor}
-              dx={6}
-            >
-              {segment[0]}
-            </text>
-            <g
-              transform={`translate(0, ${BAR_SPACE_ON_TOP - BAR_AXIS_OFFSET})`}
-            >
-              {segment[1].map((d, i) => (
-                <Bar
-                  key={i}
-                  y={yScaleIn(getSegment(d)) as number}
-                  x={xScale(Math.min(0, getX(d)))}
-                  width={
-                    activeInteractiveFilters.includes(getSegment(d))
-                      ? 0
-                      : Math.abs(xScale(getX(d)) - xScale(0))
-                  }
-                  height={yScaleIn.bandwidth()}
-                  color={colors(getSegment(d))}
-                  stroke={markBorderColor}
-                />
-              ))}
-            </g>
-          </g>
-        );
-      })}
-    </g>
-  );
-};
-
-export const BarsGroupedLabels = () => {
-  const { bounds, yScaleIn, getX, yScale, getSegment, grouped } =
-    useChartState() as GroupedBarsState;
-  const { margins } = bounds;
-  const { axisLabelColor, labelFontSize, fontFamily } = useChartTheme();
-
-  return (
-    <g transform={`translate(${margins.left} ${margins.top})`}>
-      {grouped.map((segment, i) => {
-        return (
-          <g
-            key={`${segment[0]}-${i}`}
-            transform={`translate(0, ${yScale(segment[0])})`}
-          >
-            <g
-              transform={`translate(0, ${BAR_SPACE_ON_TOP - BAR_AXIS_OFFSET})`}
-            >
-              {segment[1].map((d, i) => (
-                <text
-                  key={i}
-                  style={{
-                    fontFamily,
-                    fill: axisLabelColor,
-                    fontSize: labelFontSize,
-                  }}
-                  x={0}
-                  y={yScaleIn(getSegment(d)) as number}
-                  dx={6}
-                  dy={labelFontSize * 1.5}
-                >
-                  <tspan fontWeight="bold">{getX(d)}</tspan> {getSegment(d)}
-                </text>
-              ))}
-            </g>
-          </g>
-        );
-      })}
-    </g>
-  );
-};
diff --git a/app/charts/bar/bars-simple.tsx b/app/charts/bar/bars-simple.tsx
deleted file mode 100644
index 8f70bc73d..000000000
--- a/app/charts/bar/bars-simple.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { memo } from "react";
-
-import { BarsState } from "@/charts/bar/bars-state";
-import {
-  BAR_AXIS_OFFSET,
-  BAR_HEIGHT,
-  BAR_SPACE_ON_TOP,
-} from "@/charts/bar/constants";
-import { useChartState } from "@/charts/shared/use-chart-state";
-import { useChartTheme } from "@/charts/shared/use-chart-theme";
-import { useTheme } from "@/themes";
-
-export const Bars = () => {
-  const { sortedData, bounds, getX, xScale, getY, yScale } =
-    useChartState() as BarsState;
-  const theme = useTheme();
-  const { axisLabelFontSize, axisLabelFontWeight, axisLabelColor } =
-    useChartTheme();
-  const { margins } = bounds;
-
-  return (
-    <g transform={`translate(${margins.left}, ${margins.top})`}>
-      {sortedData.map((d, i) => {
-        return (
-          <g transform={`translate(0, ${yScale(getY(d))})`} key={i}>
-            <text
-              x={xScale(0)}
-              y={BAR_SPACE_ON_TOP * (1 / 2)}
-              fontSize={axisLabelFontSize}
-              fontWeight={axisLabelFontWeight}
-              fill={axisLabelColor}
-              dx={6}
-            >
-              {getY(d)}
-            </text>
-            <Bar
-              key={i}
-              x={xScale(Math.min(0, getX(d)))}
-              width={Math.abs(xScale(getX(d)) - xScale(0))}
-              y={BAR_SPACE_ON_TOP - BAR_AXIS_OFFSET}
-              height={BAR_HEIGHT}
-              color={
-                getX(d) <= 0
-                  ? theme.palette.secondary.main
-                  : theme.palette.primary.main
-              }
-            />
-          </g>
-        );
-      })}
-    </g>
-  );
-};
-
-export const BarLabels = () => {
-  const { sortedData, bounds, getX, getY, yScale } =
-    useChartState() as BarsState;
-  const { labelColor, labelFontSize, fontFamily } = useChartTheme();
-  const { margins } = bounds;
-
-  return (
-    <g transform={`translate(${margins.left}, ${margins.top})`}>
-      {sortedData.map((d, i) => {
-        return (
-          <g transform={`translate(0, ${yScale(getY(d))} )`} key={i}>
-            <text
-              key={i}
-              style={{
-                fontFamily,
-                fill: labelColor,
-                fontSize: labelFontSize,
-              }}
-              x={0}
-              y={BAR_SPACE_ON_TOP - BAR_AXIS_OFFSET}
-              dx={6}
-              dy={labelFontSize * 1.5}
-            >
-              <tspan fontWeight="bold">{getX(d)}</tspan>
-            </text>
-          </g>
-        );
-      })}
-    </g>
-  );
-};
-
-export const Bar = memo(
-  ({
-    x,
-    y,
-    width,
-    height,
-    color,
-    fillOpacity = 1,
-    stroke,
-  }: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    color: string;
-    fillOpacity?: number;
-    stroke?: string;
-  }) => {
-    return (
-      <rect
-        x={x}
-        y={y}
-        width={width}
-        height={height}
-        fill={color}
-        fillOpacity={fillOpacity}
-        stroke={stroke}
-      />
-    );
-  }
-);
diff --git a/app/charts/bar/bars-state.tsx b/app/charts/bar/bars-state.tsx
deleted file mode 100644
index f44539b44..000000000
--- a/app/charts/bar/bars-state.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import {
-  ascending,
-  descending,
-  max,
-  min,
-  scaleBand,
-  ScaleBand,
-  ScaleLinear,
-  scaleLinear,
-  ScaleOrdinal,
-  scaleOrdinal,
-} from "d3";
-import { ReactNode, useMemo } from "react";
-
-import {
-  BAR_HEIGHT,
-  BAR_SPACE_ON_TOP,
-  BOTTOM_MARGIN_OFFSET,
-  LEFT_MARGIN_OFFSET,
-} from "@/charts/bar/constants";
-import {
-  useNumericVariable,
-  useSegment,
-  useStringVariable,
-} from "@/charts/shared/chart-helpers";
-import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
-import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
-import { BarFields, SortingOrder, SortingType } from "@/configurator";
-import { mkNumber } from "@/configurator/components/ui-helpers";
-import { Observation } from "@/domain/data";
-import { getPalette } from "@/palettes";
-
-export interface BarsState {
-  chartType: "bar";
-  bounds: Bounds;
-  sortedData: Observation[];
-  getX: (d: Observation) => number;
-  xScale: ScaleLinear<number, number>;
-  getY: (d: Observation) => string;
-  yScale: ScaleBand<string>;
-  getSegment: (d: Observation) => string;
-  segments: string[];
-  xAxisLabel: string;
-  xAxisDescription: string | undefined;
-  colors: ScaleOrdinal<string, string>;
-}
-
-const MARGINS = {
-  top: 50,
-  right: 40,
-  bottom: BOTTOM_MARGIN_OFFSET,
-  left: LEFT_MARGIN_OFFSET,
-};
-
-const useBarsState = ({
-  data,
-  fields,
-  measures,
-}: Pick<ChartProps, "data" | "measures"> & {
-  fields: BarFields;
-}): BarsState => {
-  const width = useWidth();
-
-  const getX = useNumericVariable(fields.x.componentIri);
-  const getY = useStringVariable(fields.y.componentIri);
-  const getSegment = useSegment(fields.segment?.componentIri);
-
-  const xMeasure = measures.find((d) => d.iri === fields.x.componentIri);
-
-  const xAxisLabel = xMeasure?.label ?? fields.y.componentIri;
-  const xAxisDescription = xMeasure?.description || undefined;
-
-  // Sort data
-  const sortingType = fields.y.sorting?.sortingType;
-  const sortingOrder = fields.y.sorting?.sortingOrder;
-
-  const sortedData = useMemo(() => {
-    return sortData({ data, sortingType, sortingOrder, getX, getY });
-  }, [data, getX, getY, sortingType, sortingOrder]);
-
-  // segments
-  const segments = useMemo(
-    () => [...new Set(sortedData.map((d) => getSegment(d)))],
-    [getSegment, sortedData]
-  );
-  const colors = scaleOrdinal(getPalette(fields.segment?.palette)).domain(
-    segments
-  );
-
-  // scales and bounds
-  const { xScale, bounds, yScale } = useMemo(() => {
-    const minValue = Math.min(mkNumber(min(sortedData, (d) => getX(d))), 0);
-    const maxValue = max(sortedData, (d) => getX(d));
-    const xScale = scaleLinear()
-      .domain([mkNumber(minValue), mkNumber(maxValue)])
-      .nice();
-    const bandDomain = [...new Set(sortedData.map((d) => getY(d)))];
-
-    const chartHeight = bandDomain.length * (BAR_HEIGHT + BAR_SPACE_ON_TOP);
-    const yScale = scaleBand<string>()
-      .domain(bandDomain)
-      .range([0, chartHeight]);
-    const chartWidth = width - MARGINS.left - MARGINS.right;
-    const bounds = {
-      width,
-      height: chartHeight + MARGINS.top + MARGINS.bottom,
-      margins: MARGINS,
-      chartWidth,
-      chartHeight,
-    };
-
-    xScale.range([0, chartWidth]);
-
-    return { xScale, yScale, bounds };
-  }, [getX, getY, sortedData, width]);
-
-  return {
-    chartType: "bar",
-    bounds,
-    sortedData,
-    getX,
-    xScale,
-    getY,
-    yScale,
-    getSegment,
-    segments,
-    xAxisLabel,
-    xAxisDescription,
-    colors,
-  };
-};
-
-const BarChartProvider = ({
-  data,
-  fields,
-  measures,
-  children,
-}: Pick<ChartProps, "data" | "measures"> & {
-  children: ReactNode;
-  fields: BarFields;
-}) => {
-  const state = useBarsState({
-    data,
-    fields,
-    measures,
-  });
-  return (
-    <ChartContext.Provider value={state}>{children}</ChartContext.Provider>
-  );
-};
-
-export const BarChart = ({
-  data,
-  fields,
-  measures,
-  children,
-}: Pick<ChartProps, "data" | "measures"> & {
-  children: ReactNode;
-  fields: BarFields;
-}) => {
-  return (
-    <Observer>
-      <InteractionProvider>
-        <BarChartProvider data={data} fields={fields} measures={measures}>
-          {children}
-        </BarChartProvider>
-      </InteractionProvider>
-    </Observer>
-  );
-};
-
-const sortData = ({
-  data,
-  getX,
-  getY,
-  sortingType,
-  sortingOrder,
-}: {
-  data: Observation[];
-  getX: (d: Observation) => number;
-  getY: (d: Observation) => string;
-  sortingType?: SortingType;
-  sortingOrder?: SortingOrder;
-}) => {
-  if (sortingOrder === "desc" && sortingType === "byDimensionLabel") {
-    return [...data].sort((a, b) => descending(getY(a), getY(b)));
-  } else if (sortingOrder === "asc" && sortingType === "byDimensionLabel") {
-    return [...data].sort((a, b) => ascending(getY(a), getY(b)));
-  } else if (sortingOrder === "desc" && sortingType === "byMeasure") {
-    return [...data].sort((a, b) => descending(getX(a), getX(b)));
-  } else if (sortingOrder === "asc" && sortingType === "byMeasure") {
-    return [...data].sort((a, b) => ascending(getX(a), getX(b)));
-  } else {
-    // default to ascending alphabetical
-    return [...data].sort((a, b) => ascending(getY(a), getY(b)));
-  }
-};
diff --git a/app/charts/bar/chart-bar.tsx b/app/charts/bar/chart-bar.tsx
deleted file mode 100644
index 4a486850d..000000000
--- a/app/charts/bar/chart-bar.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { memo } from "react";
-
-import { BarsGrouped } from "@/charts/bar/bars-grouped";
-import { GroupedBarsChart } from "@/charts/bar/bars-grouped-state";
-import { Bars } from "@/charts/bar/bars-simple";
-import { BarChart } from "@/charts/bar/bars-state";
-import { AxisWidthLinear } from "@/charts/shared/axis-width-linear";
-import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
-import {
-  InteractiveLegendColor,
-  LegendColor,
-} from "@/charts/shared/legend-color";
-import {
-  Filters,
-  BarConfig,
-  BarFields,
-  InteractiveFiltersConfig,
-  FilterValueSingle,
-  DataSource,
-} from "@/configurator";
-import { Observation } from "@/domain/data";
-import {
-  DimensionMetadataFragment,
-  useDataCubeObservationsQuery,
-} from "@/graphql/query-hooks";
-import { useLocale } from "@/locales/use-locale";
-
-import { ChartLoadingWrapper } from "../chart-loading-wrapper";
-
-export const ChartBarsVisualization = ({
-  dataSetIri,
-  dataSource,
-  chartConfig,
-  queryFilters,
-}: {
-  dataSetIri: string;
-  dataSource: DataSource;
-  chartConfig: BarConfig;
-  queryFilters: Filters | FilterValueSingle;
-}) => {
-  const locale = useLocale();
-  const [queryResp] = useDataCubeObservationsQuery({
-    variables: {
-      iri: dataSetIri,
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-      dimensions: null, // FIXME: Try to load less dimensions
-      filters: queryFilters,
-    },
-  });
-
-  return (
-    <ChartLoadingWrapper
-      query={queryResp}
-      chartConfig={chartConfig}
-      Component={ChartBars}
-    />
-  );
-};
-
-export const ChartBars = memo(
-  ({
-    observations,
-    dimensions,
-    measures,
-    fields,
-    interactiveFiltersConfig,
-  }: {
-    observations: Observation[];
-    dimensions: DimensionMetadataFragment[];
-    measures: DimensionMetadataFragment[];
-    fields: BarFields;
-    interactiveFiltersConfig: InteractiveFiltersConfig;
-  }) => {
-    return (
-      <>
-        {fields.segment?.componentIri ? (
-          <GroupedBarsChart
-            data={observations}
-            fields={fields}
-            dimensions={dimensions}
-            measures={measures}
-          >
-            <ChartContainer>
-              <ChartSvg>
-                <BarsGrouped />
-                <AxisWidthLinear />
-              </ChartSvg>
-            </ChartContainer>
-            {fields.segment &&
-            interactiveFiltersConfig?.legend.active === true ? (
-              <InteractiveLegendColor />
-            ) : fields.segment ? (
-              <LegendColor symbol="square" />
-            ) : null}
-          </GroupedBarsChart>
-        ) : (
-          <BarChart data={observations} fields={fields} measures={measures}>
-            <ChartContainer>
-              <ChartSvg>
-                <Bars />
-                <AxisWidthLinear />
-              </ChartSvg>
-            </ChartContainer>
-          </BarChart>
-        )}
-      </>
-    );
-  }
-);
diff --git a/app/charts/bar/constants.ts b/app/charts/bar/constants.ts
deleted file mode 100644
index ba7685abf..000000000
--- a/app/charts/bar/constants.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const LEFT_MARGIN_OFFSET = 5;
-export const BOTTOM_MARGIN_OFFSET = 60;
-export const VERTICAL_PADDING = 0.5;
-export const VERTICAL_PADDING_OUTER = 0.5;
-export const VERTICAL_PADDING_INNER = 0.5;
-export const VERTICAL_PADDING_WITHIN = 0.1;
-export const BAR_HEIGHT = 24;
-export const BAR_SPACE_ON_TOP = 50;
-export const BAR_AXIS_OFFSET = 8;
diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
index 46c29e2d9..9e6ea21b2 100644
--- a/app/charts/chart-config-ui-options.ts
+++ b/app/charts/chart-config-ui-options.ts
@@ -48,7 +48,8 @@ export interface EncodingSpec {
   options?: EncodingOption[];
 }
 
-// dataFilters is enabled by default.
+// dataFilters is enabled by default
+// timeSlider is enabled dynamically based on availability of temporal dimensions
 type InteractiveFilterType = "legend" | "timeRange";
 
 export interface ChartSpec {
@@ -59,7 +60,6 @@ export interface ChartSpec {
 
 interface ChartSpecs {
   area: ChartSpec;
-  bar: ChartSpec;
   column: ChartSpec;
   line: ChartSpec;
   map: ChartSpec;
@@ -125,44 +125,6 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
     ],
     interactiveFilters: ["legend", "timeRange"],
   },
-  bar: {
-    chartType: "bar",
-    encodings: [
-      {
-        field: "y",
-        optional: false,
-        componentTypes: [
-          "TemporalDimension",
-          "NominalDimension",
-          "OrdinalDimension",
-          "GeoCoordinatesDimension",
-          "GeoShapesDimension",
-        ],
-        filters: true,
-      },
-      {
-        field: "x",
-        optional: false,
-        componentTypes: ["NumericalMeasure"],
-        filters: false,
-      },
-      {
-        field: "segment",
-        optional: true,
-        componentTypes: SEGMENT_COMPONENT_TYPES,
-        filters: true,
-        sorting: [
-          { sortingType: "byDimensionLabel", sortingOrder: ["asc", "desc"] },
-          { sortingType: "byTotalSize", sortingOrder: ["asc", "desc"] },
-        ],
-        options: [
-          { field: "chartSubType" },
-          { field: "color", type: "palette" },
-        ],
-      },
-    ],
-    interactiveFilters: ["legend", "timeRange"],
-  },
   column: {
     chartType: "column",
     encodings: [
diff --git a/app/charts/column/chart-column.tsx b/app/charts/column/chart-column.tsx
index 3ec2813d1..353129383 100644
--- a/app/charts/column/chart-column.tsx
+++ b/app/charts/column/chart-column.tsx
@@ -30,6 +30,7 @@ import {
   FilterValueSingle,
   InteractiveFiltersConfig,
 } from "@/configurator";
+import { TimeSlider } from "@/configurator/interactive-filters/time-slider";
 import { Observation } from "@/domain/data";
 import {
   DimensionMetadataFragment,
@@ -162,6 +163,11 @@ export const ChartColumns = memo(
               </ChartSvg>
               <Tooltip type="single" />
             </ChartContainer>
+            {interactiveFiltersConfig?.timeSlider.componentIri && (
+              <TimeSlider
+                componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+              />
+            )}
           </ColumnChart>
         )}
       </>
diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
index e7164e0de..7e8167e39 100644
--- a/app/charts/column/columns-grouped-state.tsx
+++ b/app/charts/column/columns-grouped-state.tsx
@@ -29,20 +29,20 @@ import {
 } from "@/charts/column/constants";
 import {
   getLabelWithUnit,
+  useDataAfterInteractiveFilters,
   useOptionalNumericVariable,
   usePlottableData,
-  usePreparedData,
   useSegment,
   useStringVariable,
   useTemporalVariable,
 } from "@/charts/shared/chart-helpers";
+import { CommonChartState } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { useChartPadding } from "@/charts/shared/padding";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
-import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
+import { Observer, useWidth } from "@/charts/shared/use-width";
 import { ColumnFields, SortingField } from "@/configurator";
 import {
   mkNumber,
@@ -55,11 +55,10 @@ import { getPalette } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
-export interface GroupedColumnsState {
+export interface GroupedColumnsState extends CommonChartState {
   chartType: "column";
   preparedData: Observation[];
   allData: Observation[];
-  bounds: Bounds;
   getX: (d: Observation) => string;
   getXAsDate: (d: Observation) => Date;
   xIsTime: boolean;
@@ -101,8 +100,6 @@ const useGroupedColumnsState = (
   const width = useWidth();
   const formatNumber = useFormatNumber();
 
-  const [interactiveFilters] = useInteractiveFilters();
-
   const xDimension = dimensions.find((d) => d.iri === fields.x.componentIri);
 
   if (!xDimension) {
@@ -166,11 +163,9 @@ const useGroupedColumnsState = (
   });
 
   // Data for chart
-  const preparedData = usePreparedData({
-    legendFilterActive: interactiveFiltersConfig?.legend.active,
-    timeRangeFilterActive: interactiveFiltersConfig?.timeRange.active,
+  const preparedData = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
-    interactiveFilters,
+    interactiveFiltersConfig,
     getX: getXAsDate,
     getSegment,
   });
@@ -443,9 +438,9 @@ const useGroupedColumnsState = (
 
   return {
     chartType: "column",
+    bounds,
     preparedData,
     allData: plottableSortedData,
-    bounds,
     getX,
     getXAsDate,
     xScale,
diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
index d71646ed1..eafe45268 100644
--- a/app/charts/column/columns-stacked-state.tsx
+++ b/app/charts/column/columns-stacked-state.tsx
@@ -34,20 +34,20 @@ import {
 import {
   getLabelWithUnit,
   getWideData,
+  useDataAfterInteractiveFilters,
   useOptionalNumericVariable,
   usePlottableData,
-  usePreparedData,
   useSegment,
   useStringVariable,
   useTemporalVariable,
 } from "@/charts/shared/chart-helpers";
+import { CommonChartState } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { useChartPadding } from "@/charts/shared/padding";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
-import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
+import { Observer, useWidth } from "@/charts/shared/use-width";
 import { ColumnFields, SortingOrder, SortingType } from "@/configurator";
 import { isTemporalDimension, Observation } from "@/domain/data";
 import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
@@ -55,11 +55,10 @@ import { getPalette } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
-export interface StackedColumnsState {
+export interface StackedColumnsState extends CommonChartState {
   chartType: "column";
   preparedData: Observation[];
   allData: Observation[];
-  bounds: Bounds;
   getX: (d: Observation) => string;
   getXAsDate: (d: Observation) => Date;
   xIsTime: boolean;
@@ -100,7 +99,6 @@ const useColumnsStackedState = (
   } = chartProps;
   const width = useWidth();
   const formatNumber = useFormatNumber();
-  const [interactiveFilters] = useInteractiveFilters();
 
   const xDimension = dimensions.find((d) => d.iri === fields.x.componentIri);
 
@@ -159,11 +157,9 @@ const useColumnsStackedState = (
   });
 
   // Data for Chart
-  const preparedData = usePreparedData({
-    legendFilterActive: interactiveFiltersConfig?.legend.active,
-    timeRangeFilterActive: interactiveFiltersConfig?.timeRange.active,
+  const preparedData = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
-    interactiveFilters,
+    interactiveFiltersConfig,
     getX: getXAsDate,
     getSegment,
   });
@@ -498,9 +494,9 @@ const useColumnsStackedState = (
 
   return {
     chartType: "column",
+    bounds,
     preparedData,
     allData: plottableSortedData,
-    bounds,
     getX,
     getXAsDate,
     xScale,
diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx
index a8cce40e5..d7fdef919 100644
--- a/app/charts/column/columns-state.tsx
+++ b/app/charts/column/columns-state.tsx
@@ -26,20 +26,20 @@ import {
 } from "@/charts/column/constants";
 import {
   getLabelWithUnit,
+  useDataAfterInteractiveFilters,
   useOptionalNumericVariable,
   usePlottableData,
-  usePreparedData,
   useSegment,
   useStringVariable,
   useTemporalVariable,
 } from "@/charts/shared/chart-helpers";
+import { CommonChartState } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { useChartPadding } from "@/charts/shared/padding";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
-import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
+import { Observer, useWidth } from "@/charts/shared/use-width";
 import { ColumnFields, SortingOrder, SortingType } from "@/configurator";
 import {
   mkNumber,
@@ -57,9 +57,8 @@ import { TemporalDimension, TimeUnit } from "@/graphql/query-hooks";
 import { getPalette } from "@/palettes";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
-export interface ColumnsState {
+export interface ColumnsState extends CommonChartState {
   chartType: "column";
-  bounds: Bounds;
   preparedData: Observation[];
   allData: Observation[];
   getX: (d: Observation) => string;
@@ -102,7 +101,6 @@ const useColumnsState = (
   const width = useWidth();
   const formatNumber = useFormatNumber();
   const timeFormatUnit = useTimeFormatUnit();
-  const [interactiveFilters] = useInteractiveFilters();
 
   const dimensionsByIri = useMemo(
     () => Object.fromEntries(dimensions.map((d) => [d.iri, d])),
@@ -159,10 +157,9 @@ const useColumnsState = (
     plotters: [getXAsDate, getY],
   });
 
-  const preparedData = usePreparedData({
-    timeRangeFilterActive: interactiveFiltersConfig?.timeRange.active,
+  const preparedData = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
-    interactiveFilters,
+    interactiveFiltersConfig,
     getX: getXAsDate,
   });
 
diff --git a/app/charts/index.ts b/app/charts/index.ts
index e3e2d6752..266c338a0 100644
--- a/app/charts/index.ts
+++ b/app/charts/index.ts
@@ -96,6 +96,7 @@ export const findPreferredDimension = (
 };
 
 const INITIAL_INTERACTIVE_FILTERS_CONFIG: InteractiveFiltersConfig = {
+  // FIXME: we shouldn't keep empty props
   legend: {
     active: false,
     componentIri: "",
@@ -109,6 +110,9 @@ const INITIAL_INTERACTIVE_FILTERS_CONFIG: InteractiveFiltersConfig = {
       to: "",
     },
   },
+  timeSlider: {
+    componentIri: "",
+  },
   dataFilters: {
     active: false,
     componentIris: [],
@@ -212,23 +216,6 @@ export const getInitialConfig = ({
   const numericalMeasures = measures.filter(isNumericalMeasure);
 
   switch (chartType) {
-    case "bar":
-      return {
-        version: CHART_CONFIG_VERSION,
-        chartType,
-        filters: {},
-        interactiveFiltersConfig: INITIAL_INTERACTIVE_FILTERS_CONFIG,
-        fields: {
-          x: { componentIri: measures[0].iri },
-          y: {
-            componentIri: findPreferredDimension(
-              dimensions,
-              "TemporalDimension"
-            ).iri,
-            sorting: DEFAULT_SORTING,
-          },
-        },
-      };
     case "column":
       return {
         version: CHART_CONFIG_VERSION,
@@ -582,7 +569,6 @@ const interactiveFiltersAdjusters: InteractiveFiltersAdjusters = {
 };
 
 const chartConfigsAdjusters: ChartConfigsAdjusters = {
-  bar: {},
   column: {
     filters: ({ oldValue, newChartConfig }) => {
       return produce(newChartConfig, (draft) => {
@@ -1001,7 +987,6 @@ const chartConfigsPathOverrides: {
     };
   };
 } = {
-  bar: {},
   column: {
     map: {
       "fields.areaLayer.componentIri": "fields.x.componentIri",
diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx
index ffadc41d0..1768b79b9 100644
--- a/app/charts/line/lines-state.tsx
+++ b/app/charts/line/lines-state.tsx
@@ -20,19 +20,19 @@ import { BRUSH_BOTTOM_SPACE } from "@/charts/shared/brush";
 import {
   getLabelWithUnit,
   getWideData,
+  useDataAfterInteractiveFilters,
   useOptionalNumericVariable,
   usePlottableData,
-  usePreparedData,
   useSegment,
   useStringVariable,
   useTemporalVariable,
 } from "@/charts/shared/chart-helpers";
+import { CommonChartState } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
-import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
+import { Observer, useWidth } from "@/charts/shared/use-width";
 import { LineFields } from "@/configurator";
 import { isTemporalDimension, Observation } from "@/domain/data";
 import {
@@ -46,10 +46,11 @@ import { sortByIndex } from "@/utils/array";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
-export interface LinesState {
+export interface LinesState extends CommonChartState {
   chartType: "line";
   data: Observation[];
-  bounds: Bounds;
+  allData: Observation[];
+  preparedData: Observation[];
   segments: string[];
   getX: (d: Observation) => Date;
   xScale: ScaleTime<number, number>;
@@ -91,7 +92,6 @@ const useLinesState = (
   const width = useWidth();
   const formatNumber = useFormatNumber();
   const timeFormatUnit = useTimeFormatUnit();
-  const [interactiveFilters] = useInteractiveFilters();
 
   const xDimension = dimensions.find((d) => d.iri === fields.x.componentIri);
 
@@ -132,11 +132,9 @@ const useLinesState = (
   });
 
   // All Data
-  const preparedData = usePreparedData({
-    legendFilterActive: interactiveFiltersConfig?.legend.active,
-    timeRangeFilterActive: interactiveFiltersConfig?.timeRange.active,
+  const preparedData = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
-    interactiveFilters,
+    interactiveFiltersConfig,
     getX,
     getSegment,
   });
@@ -336,10 +334,13 @@ const useLinesState = (
       })),
     };
   };
+
   return {
     chartType: "line",
-    data,
     bounds,
+    data,
+    allData: plottableSortedData,
+    preparedData,
     getX,
     xScale,
     xEntireScale,
diff --git a/app/charts/map/map-state.tsx b/app/charts/map/map-state.tsx
index b1143ee0d..01d7a7ce9 100644
--- a/app/charts/map/map-state.tsx
+++ b/app/charts/map/map-state.tsx
@@ -23,9 +23,11 @@ import {
   useOptionalNumericVariable,
   useStringVariable,
 } from "@/charts/shared/chart-helpers";
+import { CommonChartState } from "@/charts/shared/chart-state";
+import { colorToRgbArray } from "@/charts/shared/colors";
 import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
+import { Observer, useWidth } from "@/charts/shared/use-width";
 import {
   getErrorMeasure,
   useErrorMeasure,
@@ -52,8 +54,6 @@ import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { getColorInterpolator } from "@/palettes";
 
-import { colorToRgbArray } from "../shared/colors";
-
 import { getBBox } from "./helpers";
 
 type AreaLayerColors =
@@ -87,9 +87,8 @@ type SymbolLayerColors =
   | { type: "fixed"; getColor: (d: Observation) => number[] }
   | AreaLayerColors;
 
-export interface MapState {
+export interface MapState extends CommonChartState {
   chartType: "map";
-  bounds: Bounds;
   features: GeoData;
   locked: boolean;
   lockedBBox: BBox | undefined;
@@ -524,8 +523,8 @@ const useMapState = (
 
   return {
     chartType: "map",
-    features,
     bounds,
+    features,
     showBaseLayer: baseLayer.show,
     locked: baseLayer.locked || false,
     lockedBBox: chartProps.baseLayer.bbox,
diff --git a/app/charts/pie/pie-state.tsx b/app/charts/pie/pie-state.tsx
index 5ceb0d5f4..dbf3bfcf6 100644
--- a/app/charts/pie/pie-state.tsx
+++ b/app/charts/pie/pie-state.tsx
@@ -12,25 +12,27 @@ import orderBy from "lodash/orderBy";
 import React, { ReactNode, useMemo, useCallback } from "react";
 
 import {
+  useDataAfterInteractiveFilters,
   useOptionalNumericVariable,
   usePlottableData,
-  usePreparedData,
   useSegment,
 } from "@/charts/shared/chart-helpers";
+import { CommonChartState } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import useChartFormatters from "@/charts/shared/use-chart-formatters";
 import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
-import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
+import { Observer, useWidth } from "@/charts/shared/use-width";
 import { PieFields } from "@/configurator";
 import { DimensionValue, Observation } from "@/domain/data";
 import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
 import { getPalette } from "@/palettes";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
-export interface PieState {
-  bounds: Bounds;
-  data: Observation[];
+
+export interface PieState extends CommonChartState {
+  chartType: "pie";
+  allData: Observation[];
+  preparedData: Observation[];
   getPieData: Pie<$IntentionalAny, Observation>;
   getY: (d: Observation) => number | null;
   getX: (d: Observation) => string;
@@ -58,7 +60,6 @@ const usePieState = (
   } = chartProps;
   const width = useWidth();
   const formatNumber = useFormatNumber();
-  const [interactiveFilters] = useInteractiveFilters();
 
   const yMeasure = measures.find((d) => d.iri === fields.y.componentIri);
 
@@ -79,10 +80,9 @@ const usePieState = (
   });
 
   // Apply end-user-activated interactive filters to the stack
-  const preparedData = usePreparedData({
-    legendFilterActive: interactiveFiltersConfig?.legend.active,
+  const preparedData = useDataAfterInteractiveFilters({
     sortedData: plottableData,
-    interactiveFilters,
+    interactiveFiltersConfig,
     getSegment: getX,
   });
 
@@ -249,9 +249,12 @@ const usePieState = (
       values: undefined,
     };
   };
+
   return {
+    chartType: "pie",
     bounds,
-    data: preparedData,
+    allData: plottableData,
+    preparedData,
     getPieData,
     getY,
     getX,
diff --git a/app/charts/pie/pie.tsx b/app/charts/pie/pie.tsx
index 47b67f239..dc8b253f2 100644
--- a/app/charts/pie/pie.tsx
+++ b/app/charts/pie/pie.tsx
@@ -6,11 +6,11 @@ import { useInteraction } from "@/charts/shared/use-interaction";
 import { Observation } from "@/domain/data";
 
 export const Pie = () => {
-  const { data, getPieData, getX, colors, bounds } =
+  const { preparedData, getPieData, getX, colors, bounds } =
     useChartState() as PieState;
   const { width, height, chartWidth, chartHeight } = bounds;
 
-  const arcs = getPieData(data);
+  const arcs = getPieData(preparedData);
 
   const maxSide = Math.min(chartWidth, chartHeight) / 2;
 
diff --git a/app/charts/scatterplot/scatterplot-simple.tsx b/app/charts/scatterplot/scatterplot-simple.tsx
index 7bed51d5c..686f58399 100644
--- a/app/charts/scatterplot/scatterplot-simple.tsx
+++ b/app/charts/scatterplot/scatterplot-simple.tsx
@@ -6,7 +6,7 @@ import { useTheme } from "@/themes";
 
 export const Scatterplot = () => {
   const {
-    data,
+    preparedData,
     bounds,
     getX,
     xScale,
@@ -22,10 +22,10 @@ export const Scatterplot = () => {
 
   return (
     <g transform={`translate(${margins.left} ${margins.top})`}>
-      {data.map((d, index) => {
+      {preparedData.map((d, i) => {
         return (
           <Dot
-            key={index}
+            key={i}
             cx={xScale(getX(d) ?? NaN)}
             cy={yScale(getY(d) ?? NaN)}
             color={
diff --git a/app/charts/scatterplot/scatterplot-state.tsx b/app/charts/scatterplot/scatterplot-state.tsx
index 9c87c3d27..19ad87de1 100644
--- a/app/charts/scatterplot/scatterplot-state.tsx
+++ b/app/charts/scatterplot/scatterplot-state.tsx
@@ -13,17 +13,17 @@ import React, { ReactNode, useMemo } from "react";
 import { LEFT_MARGIN_OFFSET } from "@/charts/scatterplot/constants";
 import {
   getLabelWithUnit,
+  useDataAfterInteractiveFilters,
   useOptionalNumericVariable,
   usePlottableData,
-  usePreparedData,
   useSegment,
 } from "@/charts/shared/chart-helpers";
+import { CommonChartState } from "@/charts/shared/chart-state";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { TooltipScatterplot } from "@/charts/shared/interaction/tooltip-content";
 import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
-import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
-import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
+import { Observer, useWidth } from "@/charts/shared/use-width";
 import { ScatterPlotFields } from "@/configurator";
 import { mkNumber } from "@/configurator/components/ui-helpers";
 import { DimensionValue, Observation } from "@/domain/data";
@@ -31,10 +31,10 @@ import { useFormatNumber } from "@/formatters";
 import { getPalette } from "@/palettes";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
 
-export interface ScatterplotState {
-  chartType: string;
-  data: Observation[];
-  bounds: Bounds;
+export interface ScatterplotState extends CommonChartState {
+  chartType: "scatterplot";
+  allData: Observation[];
+  preparedData: Observation[];
   getX: (d: Observation) => number | null;
   xScale: ScaleLinear<number, number>;
   getY: (d: Observation) => number | null;
@@ -64,8 +64,6 @@ const useScatterplotState = ({
   fields: ScatterPlotFields;
   aspectRatio: number;
 }): ScatterplotState => {
-  const [interactiveFilters] = useInteractiveFilters();
-
   const width = useWidth();
   const formatNumber = useFormatNumber();
 
@@ -83,10 +81,9 @@ const useScatterplotState = ({
   });
 
   // Data for chart
-  const preparedData = usePreparedData({
-    legendFilterActive: interactiveFiltersConfig?.legend.active,
+  const preparedData = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
-    interactiveFilters,
+    interactiveFiltersConfig,
     getSegment,
   });
   const xMeasure = measures.find((d) => d.iri === fields.x.componentIri);
@@ -235,8 +232,9 @@ const useScatterplotState = ({
 
   return {
     chartType: "scatterplot",
-    data: preparedData, // sortedData + filtered data,
     bounds,
+    allData: plottableSortedData,
+    preparedData,
     getX,
     xScale,
     getY,
diff --git a/app/charts/shared/axis-height-band.tsx b/app/charts/shared/axis-height-band.tsx
deleted file mode 100644
index 5fd164c1b..000000000
--- a/app/charts/shared/axis-height-band.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { axisLeft } from "d3";
-import { select, Selection } from "d3";
-import { useEffect, useRef } from "react";
-
-import { BarsState } from "@/charts/bar/bars-state";
-import { useChartState } from "@/charts/shared/use-chart-state";
-import { useChartTheme } from "@/charts/shared/use-chart-theme";
-
-// export const AxisHeightBand = () => {
-//   const ref = useRef<SVGGElement>(null);
-//   const { xScale, yScale, bounds } = useChartState() as BarsState;
-
-//   const { chartHeight, margins } = bounds;
-
-//   const {
-//     labelColor,
-//     gridColor,
-//     labelFontSize,
-//     fontFamily,
-//     domainColor,
-//   } = useChartTheme();
-
-//   const mkAxis = (g: Selection<SVGGElement, unknown, null, undefined>) => {
-//     const rotation = true; // xScale.domain().length > 6;
-//     const hasNegativeValues = xScale.domain()[0] < 0;
-
-//     const fontSize =
-//       yScale.bandwidth() > labelFontSize ? labelFontSize : yScale.bandwidth();
-//     g.call(
-//       axisLeft(yScale)
-//         .tickSizeOuter(0)
-//         .tickSizeInner(hasNegativeValues ? -chartHeight : 6)
-//     );
-
-//     g.select(".domain").remove();
-//     g.selectAll(".tick line").attr(
-//       "stroke",
-//       hasNegativeValues ? gridColor : domainColor
-//     );
-//     g.selectAll(".tick text")
-//       .attr("font-size", fontSize)
-//       .attr("font-family", fontFamily)
-//       .attr("fill", labelColor)
-//       .attr("y", rotation ? 0 : fontSize + 6)
-//       .attr("x", rotation ? fontSize : 0)
-//       .attr("dy", rotation ? ".35em" : 0);
-//     // .attr("transform", rotation ? "rotate(90)" : "rotate(0)")
-//     // .attr("text-anchor", rotation ? "start" : "unset");
-//   };
-
-//   useEffect(() => {
-//     const g = select(ref.current);
-//     mkAxis(g as Selection<SVGGElement, unknown, null, undefined>);
-//   });
-
-//   return (
-//     <g
-//       ref={ref}
-//       transform={`translate(${margins.left}, ${chartHeight + margins.top})`}
-//     />
-//   );
-// };
-
-export const AxisHeightBandDomain = () => {
-  const ref = useRef<SVGGElement>(null);
-  const { xScale, bounds } = useChartState() as BarsState;
-  const { chartHeight, margins } = bounds;
-  const { domainColor } = useChartTheme();
-
-  const mkAxisDomain = (
-    g: Selection<SVGGElement, unknown, null, undefined>
-  ) => {
-    g.call(axisLeft(xScale).tickSizeOuter(0));
-    g.selectAll(".tick line").remove();
-    g.selectAll(".tick text").remove();
-    g.select(".domain")
-      .attr("transform", `translate(0, -${bounds.chartHeight - xScale(0)})`)
-      .attr("stroke", domainColor);
-  };
-
-  useEffect(() => {
-    const g = select(ref.current);
-    mkAxisDomain(g as Selection<SVGGElement, unknown, null, undefined>);
-  });
-
-  return (
-    <g
-      ref={ref}
-      transform={`translate(${margins.left}, ${chartHeight + margins.top})`}
-    />
-  );
-};
diff --git a/app/charts/shared/axis-width-linear.tsx b/app/charts/shared/axis-width-linear.tsx
index a48a43cd6..ad4dfb863 100644
--- a/app/charts/shared/axis-width-linear.tsx
+++ b/app/charts/shared/axis-width-linear.tsx
@@ -2,7 +2,6 @@ import { axisBottom } from "d3";
 import { select, Selection } from "d3";
 import { useEffect, useRef } from "react";
 
-import { BarsState } from "@/charts/bar/bars-state";
 import { ScatterplotState } from "@/charts/scatterplot/scatterplot-state";
 import { useChartState } from "@/charts/shared/use-chart-state";
 import { useChartTheme } from "@/charts/shared/use-chart-theme";
@@ -12,11 +11,10 @@ import { MaybeTooltip } from "@/utils/maybe-tooltip";
 
 export const AxisWidthLinear = () => {
   const formatNumber = useFormatNumber();
-  const { xScale, bounds, xAxisLabel, xAxisDescription, chartType } =
-    useChartState() as ScatterplotState | BarsState;
+  const { xScale, bounds, xAxisLabel, xAxisDescription } =
+    useChartState() as ScatterplotState;
   const { chartWidth, chartHeight, margins } = bounds;
-  const { domainColor, labelColor, labelFontSize, gridColor, fontFamily } =
-    useChartTheme();
+  const { labelColor, labelFontSize, gridColor, fontFamily } = useChartTheme();
   const xAxisRef = useRef<SVGGElement>(null);
 
   const mkAxis = (g: Selection<SVGGElement, unknown, null, undefined>) => {
@@ -43,15 +41,6 @@ export const AxisWidthLinear = () => {
       .attr("text-anchor", "middle");
 
     g.select("path.domain").attr("stroke", gridColor);
-
-    // Styles for bar chart
-    if (chartType === "bar") {
-      g.select(".tick:first-of-type line")
-        .attr("stroke", domainColor)
-        .attr("stroke-width", 1);
-      g.select(".tick:first-of-type text").remove();
-      g.select("path.domain").remove();
-    }
   };
 
   useEffect(() => {
diff --git a/app/charts/shared/brush.tsx b/app/charts/shared/brush.tsx
index 777362b95..c75bd0d7b 100644
--- a/app/charts/shared/brush.tsx
+++ b/app/charts/shared/brush.tsx
@@ -125,7 +125,7 @@ export const BrushTime = () => {
 
       // Update interactive filters state
       dispatch({
-        type: "ADD_TIME_FILTER",
+        type: "SET_TIME_RANGE_FILTER",
         value: newDates,
       });
     }
@@ -183,13 +183,13 @@ export const BrushTime = () => {
           if (getDate(indexLeft).getTime() < to.getTime()) {
             // new lower than "to"
             dispatch({
-              type: "ADD_TIME_FILTER",
+              type: "SET_TIME_RANGE_FILTER",
               value: [getDate(indexLeft), to],
             });
           } else {
             // new too high, don't do anything
             dispatch({
-              type: "ADD_TIME_FILTER",
+              type: "SET_TIME_RANGE_FILTER",
               value: [from, to],
             });
           }
@@ -199,12 +199,12 @@ export const BrushTime = () => {
           const indexRight = fullData[index];
           if (getDate(indexRight).getTime() < to.getTime()) {
             dispatch({
-              type: "ADD_TIME_FILTER",
+              type: "SET_TIME_RANGE_FILTER",
               value: [getDate(indexRight), to],
             });
           } else {
             dispatch({
-              type: "ADD_TIME_FILTER",
+              type: "SET_TIME_RANGE_FILTER",
               value: [from, to],
             });
           }
@@ -215,12 +215,12 @@ export const BrushTime = () => {
 
           if (getDate(indexLeft).getTime() > from.getTime()) {
             dispatch({
-              type: "ADD_TIME_FILTER",
+              type: "SET_TIME_RANGE_FILTER",
               value: [from, getDate(indexLeft)],
             });
           } else {
             dispatch({
-              type: "ADD_TIME_FILTER",
+              type: "SET_TIME_RANGE_FILTER",
               value: [from, to],
             });
           }
@@ -231,12 +231,12 @@ export const BrushTime = () => {
 
           if (indexLeft && getDate(indexLeft).getTime() > from.getTime()) {
             dispatch({
-              type: "ADD_TIME_FILTER",
+              type: "SET_TIME_RANGE_FILTER",
               value: [from, getDate(indexLeft)],
             });
           } else {
             dispatch({
-              type: "ADD_TIME_FILTER",
+              type: "SET_TIME_RANGE_FILTER",
               value: [from, to],
             });
           }
@@ -447,7 +447,7 @@ export const BrushTime = () => {
 
 //       // Update interactive filters state
 //       dispatch({
-//         type: "ADD_TIME_FILTER",
+//         type: "SET_TIME_RANGE_FILTER",
 //         value: [startIndex, endIndex - 1],
 //       });
 //     }
@@ -475,13 +475,13 @@ export const BrushTime = () => {
 //         if (indexLeft < to) {
 //           // new lower than "to"
 //           dispatch({
-//             type: "ADD_TIME_FILTER",
+//             type: "SET_TIME_RANGE_FILTER",
 //             value: [indexLeft, to],
 //           });
 //         } else {
 //           // new too high, don't do anything
 //           dispatch({
-//             type: "ADD_TIME_FILTER",
+//             type: "SET_TIME_RANGE_FILTER",
 //             value: [from, to],
 //           });
 //         }
@@ -491,12 +491,12 @@ export const BrushTime = () => {
 //         const indexRight = from + 1;
 //         if (indexRight < to) {
 //           dispatch({
-//             type: "ADD_TIME_FILTER",
+//             type: "SET_TIME_RANGE_FILTER",
 //             value: [indexRight, to],
 //           });
 //         } else {
 //           dispatch({
-//             type: "ADD_TIME_FILTER",
+//             type: "SET_TIME_RANGE_FILTER",
 //             value: [from, to],
 //           });
 //         }
@@ -507,12 +507,12 @@ export const BrushTime = () => {
 
 //         if (indexLeft > from) {
 //           dispatch({
-//             type: "ADD_TIME_FILTER",
+//             type: "SET_TIME_RANGE_FILTER",
 //             value: [from, indexLeft],
 //           });
 //         } else {
 //           dispatch({
-//             type: "ADD_TIME_FILTER",
+//             type: "SET_TIME_RANGE_FILTER",
 //             value: [from, to],
 //           });
 //         }
@@ -522,12 +522,12 @@ export const BrushTime = () => {
 
 //         if (indexRight && indexRight > from) {
 //           dispatch({
-//             type: "ADD_TIME_FILTER",
+//             type: "SET_TIME_RANGE_FILTER",
 //             value: [from, indexRight],
 //           });
 //         } else {
 //           dispatch({
-//             type: "ADD_TIME_FILTER",
+//             type: "SET_TIME_RANGE_FILTER",
 //             value: [from, to],
 //           });
 //         }
diff --git a/app/charts/shared/chart-helpers.spec.tsx b/app/charts/shared/chart-helpers.spec.tsx
index 3e64f07cb..6d8e2a730 100644
--- a/app/charts/shared/chart-helpers.spec.tsx
+++ b/app/charts/shared/chart-helpers.spec.tsx
@@ -6,7 +6,7 @@ import {
   prepareQueryFilters,
 } from "@/charts/shared/chart-helpers";
 import { InteractiveFiltersState } from "@/charts/shared/use-interactive-filters";
-import { LineConfig } from "@/configurator";
+import { ChartType, Filters, InteractiveFiltersConfig } from "@/configurator";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import { Observation } from "@/domain/data";
 import line1Fixture from "@/test/__fixtures/config/prod/line-1.json";
@@ -20,7 +20,7 @@ const { col, val } = makeCubeNsGetters(
   "http://environment.ld.admin.ch/foen/px/0703010000_105"
 );
 
-const commonInteractiveFiltersConfig = {
+const commonInteractiveFiltersConfig: InteractiveFiltersConfig = {
   legend: {
     active: false,
     componentIri: col("2"),
@@ -34,6 +34,9 @@ const commonInteractiveFiltersConfig = {
       to: "2020-01-01",
     },
   },
+  timeSlider: {
+    componentIri: "",
+  },
   dataFilters: {
     componentIris: [col("3"), col("4")],
     active: false,
@@ -47,6 +50,9 @@ const commonInteractiveFiltersState: InteractiveFiltersState = {
     from: new Date(2021, 0, 1),
     to: new Date(2021, 11, 31),
   },
+  timeSlider: {
+    value: undefined,
+  },
   dataFilters: {
     [col("3")]: {
       type: "single",
@@ -58,11 +64,10 @@ const commonInteractiveFiltersState: InteractiveFiltersState = {
 describe("useQueryFilters", () => {
   it("should not merge interactive filters state if interactive filters are disabled at publish time", () => {
     const queryFilters = prepareQueryFilters(
-      {
-        ...line1Fixture.data.chartConfig,
-        interactiveFiltersConfig: commonInteractiveFiltersConfig,
-      } as LineConfig,
-      commonInteractiveFiltersState
+      line1Fixture.data.chartConfig.chartType as ChartType,
+      line1Fixture.data.chartConfig.filters as Filters,
+      commonInteractiveFiltersConfig,
+      commonInteractiveFiltersState.dataFilters
     );
     expect(queryFilters[col("3")]).toEqual({
       type: "single",
@@ -72,16 +77,16 @@ describe("useQueryFilters", () => {
 
   it("should merge interactive filters state if interactive filters are active at publish time", () => {
     const queryFilters = prepareQueryFilters(
-      {
-        ...line1Fixture.data.chartConfig,
-        interactiveFiltersConfig: merge({}, commonInteractiveFiltersConfig, {
-          dataFilters: {
-            active: true,
-          },
-        }),
-      } as LineConfig,
-      commonInteractiveFiltersState
+      line1Fixture.data.chartConfig.chartType as ChartType,
+      line1Fixture.data.chartConfig.filters as Filters,
+      merge({}, commonInteractiveFiltersConfig, {
+        dataFilters: {
+          active: true,
+        },
+      }),
+      commonInteractiveFiltersState.dataFilters
     );
+
     expect(queryFilters[col("3")]).toEqual({
       type: "single",
       value: val("3", "1"),
@@ -90,14 +95,13 @@ describe("useQueryFilters", () => {
 
   it("should omit none values since they should not be passed to graphql layer", () => {
     const queryFilters = prepareQueryFilters(
-      {
-        ...line1Fixture.data.chartConfig,
-        interactiveFiltersConfig: merge({}, commonInteractiveFiltersConfig, {
-          dataFilters: {
-            active: true,
-          },
-        }),
-      } as LineConfig,
+      line1Fixture.data.chartConfig.chartType as ChartType,
+      line1Fixture.data.chartConfig.filters as Filters,
+      merge({}, commonInteractiveFiltersConfig, {
+        dataFilters: {
+          active: true,
+        },
+      }),
       merge({}, commonInteractiveFiltersState, {
         dataFilters: {
           [col("3")]: {
@@ -105,8 +109,9 @@ describe("useQueryFilters", () => {
             value: FIELD_VALUE_NONE,
           },
         },
-      })
+      }).dataFilters
     );
+
     expect(queryFilters[col("3")]).toBeUndefined();
   });
 });
diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx
index c04d58437..ae6c64861 100644
--- a/app/charts/shared/chart-helpers.tsx
+++ b/app/charts/shared/chart-helpers.tsx
@@ -14,9 +14,11 @@ import {
 import { parseDate } from "@/configurator/components/ui-helpers";
 import {
   ChartConfig,
+  ChartType,
   Filters,
   FilterValueSingle,
   ImputationType,
+  InteractiveFiltersConfig,
   isAreaConfig,
 } from "@/configurator/config-types";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
@@ -31,24 +33,26 @@ export type QueryFilters = Filters | FilterValueSingle;
 //   if applicable
 // - removes none values since they should not be sent as part of the GraphQL query
 export const prepareQueryFilters = (
-  { chartType, filters, interactiveFiltersConfig }: ChartConfig,
-  IFState: InteractiveFiltersState
+  chartType: ChartType,
+  filters: Filters,
+  interactiveFiltersConfig: InteractiveFiltersConfig,
+  dataFilters: InteractiveFiltersState["dataFilters"]
 ): Filters => {
-  let res: QueryFilters;
-  const dataFiltersActive = interactiveFiltersConfig?.dataFilters.active;
-
-  if (chartType !== "table") {
-    const queryFilters = dataFiltersActive
-      ? { ...filters, ...IFState.dataFilters }
-      : filters;
-    res = queryFilters;
-  } else {
-    res = filters;
+  let queryFilters = filters;
+  const { timeSlider } = interactiveFiltersConfig || {};
+
+  if (chartType !== "table" && interactiveFiltersConfig?.dataFilters.active) {
+    queryFilters = { ...queryFilters, ...dataFilters };
   }
 
-  res = omitBy(res, (x) => x.type === "single" && x.value === FIELD_VALUE_NONE);
+  queryFilters = omitBy(queryFilters, (v, k) => {
+    return (
+      (v.type === "single" && v.value === FIELD_VALUE_NONE) ||
+      k === timeSlider?.componentIri
+    );
+  });
 
-  return res;
+  return queryFilters;
 };
 
 export const useQueryFilters = ({
@@ -59,8 +63,18 @@ export const useQueryFilters = ({
   const [IFState] = useInteractiveFilters();
 
   return useMemo(() => {
-    return prepareQueryFilters(chartConfig, IFState);
-  }, [chartConfig, IFState]);
+    return prepareQueryFilters(
+      chartConfig.chartType,
+      chartConfig.filters,
+      chartConfig.interactiveFiltersConfig,
+      IFState.dataFilters
+    );
+  }, [
+    chartConfig.chartType,
+    chartConfig.filters,
+    chartConfig.interactiveFiltersConfig,
+    IFState.dataFilters,
+  ]);
 };
 
 type ValuePredicate = (v: any) => boolean;
@@ -82,58 +96,90 @@ export const usePlottableData = ({
       }
       return true;
     },
-    [plotters]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    plotters
   );
+
   return useMemo(() => data.filter(isPlottable), [data, isPlottable]);
 };
 
-// Prepare data used in charts.
-// Different than the full dataset because
-// interactive filters may be applied (legend + brush)
-export const usePreparedData = ({
-  timeRangeFilterActive,
-  legendFilterActive,
+/** Prepares the data to be used in charts.
+ *
+ * Different than the full dataset, because interactive filters might be applied.
+ */
+export const useDataAfterInteractiveFilters = ({
   sortedData,
-  interactiveFilters,
+  interactiveFiltersConfig,
   getX,
   getSegment,
 }: {
-  timeRangeFilterActive?: boolean;
-  legendFilterActive?: boolean;
   sortedData: Array<Observation>;
-  interactiveFilters: InteractiveFiltersState;
+  interactiveFiltersConfig: InteractiveFiltersConfig;
   getX?: (d: Observation) => Date;
   getSegment?: (d: Observation) => string;
 }) => {
-  const { from, to } = interactiveFilters.timeRange;
-  const { categories } = interactiveFilters;
-  const activeInteractiveFilters = Object.keys(categories);
+  const [IFState] = useInteractiveFilters();
+
+  // time range
+  const fromTime = IFState.timeRange.from?.getTime();
+  const toTime = IFState.timeRange.to?.getTime();
+
+  // time slider
+  const getTime = useTemporalVariable(
+    interactiveFiltersConfig?.timeSlider.componentIri || ""
+  );
+  const timeSliderValue = IFState.timeSlider.value;
+
+  // legend
+  const legendItems = Object.keys(IFState.categories);
 
   const allFilters = useMemo(() => {
-    const timeFilter: ValuePredicate | null =
-      getX && from && to && timeRangeFilterActive
-        ? (d: Observation) =>
-            getX(d).getTime() >= from.getTime() &&
-            getX(d).getTime() <= to.getTime()
+    const timeRangeFilter =
+      getX && fromTime && toTime && interactiveFiltersConfig?.timeRange.active
+        ? (d: Observation) => {
+            const time = getX(d).getTime();
+            return time >= fromTime && time <= toTime;
+          }
         : null;
-    const legendFilter: ValuePredicate | null =
-      legendFilterActive && getSegment
-        ? (d: Observation) => !activeInteractiveFilters.includes(getSegment(d))
+    const timeSliderFilter =
+      interactiveFiltersConfig?.timeSlider.componentIri && timeSliderValue
+        ? (d: Observation) => {
+            return getTime(d).getTime() === timeSliderValue.getTime();
+          }
+        : null;
+    const legendFilter =
+      interactiveFiltersConfig?.legend.active && getSegment
+        ? (d: Observation) => {
+            return !legendItems.includes(getSegment(d));
+          }
         : null;
-    return overEvery([legendFilter, timeFilter].filter(truthy));
+
+    return overEvery(
+      (
+        [
+          timeRangeFilter,
+          timeSliderFilter,
+          legendFilter,
+        ] as (ValuePredicate | null)[]
+      ).filter(truthy)
+    );
   }, [
-    activeInteractiveFilters,
-    from,
+    legendItems,
     getSegment,
     getX,
-    legendFilterActive,
-    timeRangeFilterActive,
-    to,
+    getTime,
+    fromTime,
+    toTime,
+    interactiveFiltersConfig?.legend.active,
+    interactiveFiltersConfig?.timeRange.active,
+    interactiveFiltersConfig?.timeSlider.componentIri,
+    timeSliderValue,
   ]);
 
   const preparedData = useMemo(() => {
     return sortedData.filter(allFilters);
   }, [allFilters, sortedData]);
+
   return preparedData;
 };
 
diff --git a/app/charts/shared/chart-state.ts b/app/charts/shared/chart-state.ts
new file mode 100644
index 000000000..18382d059
--- /dev/null
+++ b/app/charts/shared/chart-state.ts
@@ -0,0 +1,8 @@
+import { ChartType } from "@/configurator";
+
+import { Bounds } from "./use-width";
+
+export interface CommonChartState {
+  chartType: ChartType;
+  bounds: Bounds;
+}
diff --git a/app/charts/shared/overlay-voronoi.tsx b/app/charts/shared/overlay-voronoi.tsx
index 9f5f2ca56..396283d77 100644
--- a/app/charts/shared/overlay-voronoi.tsx
+++ b/app/charts/shared/overlay-voronoi.tsx
@@ -15,14 +15,22 @@ export const InteractionVoronoi = memo(function InteractionVoronoi({
 }) {
   const [, dispatch] = useInteraction();
   const ref = useRef<SVGGElement>(null);
-  const { data, getX, xScale, getY, yScale, getSegment, colors, bounds } =
-    useChartState() as LinesState | AreasState | ScatterplotState;
+  const {
+    preparedData,
+    getX,
+    xScale,
+    getY,
+    yScale,
+    getSegment,
+    colors,
+    bounds,
+  } = useChartState() as LinesState | AreasState | ScatterplotState;
 
   const { chartWidth, chartHeight, margins } = bounds;
 
   // FIXME: delaunay/voronoi calculation could be memoized
   const delaunay = Delaunay.from(
-    data,
+    preparedData,
     (d) => xScale(getX(d) ?? NaN),
     (d) => yScale(getY(d) ?? NaN)
   );
@@ -32,7 +40,7 @@ export const InteractionVoronoi = memo(function InteractionVoronoi({
     const [x, y] = pointer(e, ref.current!);
 
     const location = delaunay.find(x, y);
-    const d = data[location];
+    const d = preparedData[location];
 
     if (typeof location !== "undefined") {
       dispatch({
@@ -55,7 +63,7 @@ export const InteractionVoronoi = memo(function InteractionVoronoi({
   return (
     <g ref={ref} transform={`translate(${margins.left} ${margins.top})`}>
       {debug &&
-        data.map((d, i) => (
+        preparedData.map((d, i) => (
           <path
             key={i}
             d={voronoi.renderCell(i)}
diff --git a/app/charts/shared/use-chart-state.tsx b/app/charts/shared/use-chart-state.tsx
index 6f7bdbb45..912b4b690 100644
--- a/app/charts/shared/use-chart-state.tsx
+++ b/app/charts/shared/use-chart-state.tsx
@@ -1,8 +1,6 @@
 import { createContext, useContext } from "react";
 
 import { AreasState } from "@/charts/area/areas-state";
-import { GroupedBarsState } from "@/charts/bar/bars-grouped-state";
-import { BarsState } from "@/charts/bar/bars-state";
 import { GroupedColumnsState } from "@/charts/column/columns-grouped-state";
 import { StackedColumnsState } from "@/charts/column/columns-stacked-state";
 import { ColumnsState } from "@/charts/column/columns-state";
@@ -25,8 +23,6 @@ export interface ChartProps {
 }
 
 export type ChartState =
-  | BarsState
-  | GroupedBarsState
   | ColumnsState
   | StackedColumnsState
   | GroupedColumnsState
diff --git a/app/charts/shared/use-interactive-filters.tsx b/app/charts/shared/use-interactive-filters.tsx
index 691abbeba..3094be92d 100644
--- a/app/charts/shared/use-interactive-filters.tsx
+++ b/app/charts/shared/use-interactive-filters.tsx
@@ -6,6 +6,7 @@ import { FilterValueSingle } from "@/configurator";
 export type InteractiveFiltersState = {
   categories: { [x: string]: boolean };
   timeRange: { from: Date | undefined; to: Date | undefined };
+  timeSlider: { value: Date | undefined };
   dataFilters: { [x: string]: FilterValueSingle };
 };
 
@@ -19,8 +20,15 @@ type InteractiveFiltersStateAction =
       value: string;
     }
   | {
-      type: "ADD_TIME_FILTER";
-      value: Date[];
+      type: "SET_TIME_RANGE_FILTER";
+      value: [Date, Date];
+    }
+  | {
+      type: "SET_TIME_SLIDER_FILTER";
+      value: Date;
+    }
+  | {
+      type: "RESET_TIME_SLIDER_FILTER";
     }
   | {
       type: "RESET_DATA_FILTER";
@@ -43,6 +51,7 @@ type InteractiveFiltersStateAction =
 const INTERACTIVE_FILTERS_INITIAL_STATE: InteractiveFiltersState = {
   categories: {},
   timeRange: { from: undefined, to: undefined },
+  timeSlider: { value: undefined },
   dataFilters: {},
 };
 
@@ -62,9 +71,15 @@ const InteractiveFiltersStateReducer = (
         if (category) delete categories[action.value];
       }
       return draft;
-    case "ADD_TIME_FILTER":
+    case "SET_TIME_RANGE_FILTER":
       draft.timeRange = { from: action.value[0], to: action.value[1] };
       return draft;
+    case "SET_TIME_SLIDER_FILTER":
+      draft.timeSlider = { value: action.value };
+      return draft;
+    case "RESET_TIME_SLIDER_FILTER":
+      draft.timeSlider.value = undefined;
+      return draft;
     case "RESET_DATA_FILTER":
       draft.dataFilters = {};
       return draft;
@@ -112,7 +127,6 @@ export const InteractiveFiltersProvider = ({
   const [state, dispatch] = useImmerReducer<
     InteractiveFiltersState,
     InteractiveFiltersStateAction
-    // @ts-ignore
   >(InteractiveFiltersStateReducer, INTERACTIVE_FILTERS_INITIAL_STATE);
 
   return (
diff --git a/app/charts/shared/use-sync-interactive-filters.spec.tsx b/app/charts/shared/use-sync-interactive-filters.spec.tsx
index 6c325027f..fc8554d5b 100644
--- a/app/charts/shared/use-sync-interactive-filters.spec.tsx
+++ b/app/charts/shared/use-sync-interactive-filters.spec.tsx
@@ -7,32 +7,65 @@ import {
   useInteractiveFilters,
 } from "@/charts/shared/use-interactive-filters";
 import useSyncInteractiveFilters from "@/charts/shared/use-sync-interactive-filters";
-import { ChartConfig } from "@/configurator";
+import {
+  ChartConfig,
+  ConfiguratorStateConfiguringChart,
+  InteractiveFiltersConfig,
+} from "@/configurator/config-types";
 import fixture from "@/test/__fixtures/config/dev/4YL1p4QTFQS4.json";
+const { handleInteractiveFilterTimeSliderReset } = jest.requireActual(
+  "@/configurator/configurator-state"
+);
 
-const chartConfig = {
-  ...fixture.data.chartConfig,
-  interactiveFiltersConfig: {
-    legend: {
-      componentIri: "https://fake-iri/dimension/0",
-      active: false,
-    },
-    dataFilters: {
-      active: true,
-      componentIris: [
-        "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/1",
-      ],
-    },
-    timeRange: {
-      active: false,
-      componentIri: "https://fake-iri/dimension/2",
-      presets: {
-        type: "range",
-        from: "2021-01-01",
-        to: "2021-01-12",
-      },
+const interactiveFiltersConfig: InteractiveFiltersConfig = {
+  legend: {
+    componentIri: "https://fake-iri/dimension/0",
+    active: false,
+  },
+  dataFilters: {
+    active: true,
+    componentIris: [
+      "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/1",
+    ],
+  },
+  timeSlider: {
+    componentIri:
+      "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/0",
+  },
+  timeRange: {
+    active: false,
+    componentIri: "https://fake-iri/dimension/2",
+    presets: {
+      type: "range",
+      from: "2021-01-01",
+      to: "2021-01-12",
     },
   },
+};
+
+const configuratorState = {
+  state: "CONFIGURING_CHART",
+  chartConfig: {
+    interactiveFiltersConfig,
+  },
+} as unknown as ConfiguratorStateConfiguringChart;
+
+jest.mock("@/configurator/configurator-state", () => {
+  return {
+    useConfiguratorState: () => {
+      return [
+        configuratorState,
+        (_: { type: "INTERACTIVE_FILTER_TIME_SLIDER_RESET" }) => {
+          handleInteractiveFilterTimeSliderReset(configuratorState);
+        },
+      ];
+    },
+  };
+});
+
+const chartConfig = {
+  ...fixture.data.chartConfig,
+  interactiveFiltersConfig,
 } as ChartConfig;
 
 const setup = ({
@@ -44,6 +77,7 @@ const setup = ({
     const [ifstate] = useInteractiveFilters();
     const [useModified, setUseModified] = useState(false);
     useSyncInteractiveFilters(useModified ? modifiedChartConfig : chartConfig);
+
     return (
       <div>
         <button
@@ -107,5 +141,11 @@ describe("useSyncInteractiveFilters", () => {
       value:
         "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/1/1",
     });
+
+    expect(
+      configuratorState.chartConfig.interactiveFiltersConfig?.timeSlider
+        .componentIri
+    ).toEqual("");
+    expect(IFState2.timeSlider.value).toBeUndefined();
   });
 });
diff --git a/app/charts/shared/use-sync-interactive-filters.tsx b/app/charts/shared/use-sync-interactive-filters.tsx
index e986a2e11..9a7099d3a 100644
--- a/app/charts/shared/use-sync-interactive-filters.tsx
+++ b/app/charts/shared/use-sync-interactive-filters.tsx
@@ -7,9 +7,12 @@ import {
   FilterValueSingle,
   isSegmentInConfig,
 } from "@/configurator/config-types";
+import { useConfiguratorState } from "@/configurator/configurator-state";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import useFilterChanges from "@/configurator/use-filter-changes";
 
+import { getFieldComponentIri } from "..";
+
 /**
  * Makes sure interactive filters are in sync with chart config.
  *
@@ -19,9 +22,10 @@ import useFilterChanges from "@/configurator/use-filter-changes";
  */
 const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
   const [IFstate, dispatch] = useInteractiveFilters();
+  const [_, dispatchConfigurator] = useConfiguratorState();
   const { interactiveFiltersConfig } = chartConfig;
 
-  // Time filter
+  // Time range filter
   const presetFrom =
     interactiveFiltersConfig?.timeRange.presets.from &&
     parseDate(interactiveFiltersConfig?.timeRange.presets.from.toString());
@@ -34,11 +38,40 @@ const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
   useEffect(() => {
     // Editor time presets supersede interactive state
     if (presetFrom && presetTo) {
-      dispatch({ type: "ADD_TIME_FILTER", value: [presetFrom, presetTo] });
+      dispatch({
+        type: "SET_TIME_RANGE_FILTER",
+        value: [presetFrom, presetTo],
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, presetFromStr, presetToStr]);
 
+  // Time slider filter
+  const timeSliderFilter = interactiveFiltersConfig?.timeSlider;
+  const xComponentIri = getFieldComponentIri(chartConfig.fields, "x");
+  useEffect(() => {
+    if (
+      timeSliderFilter?.componentIri === "" &&
+      IFstate.timeSlider.value !== undefined
+    ) {
+      dispatch({ type: "RESET_TIME_SLIDER_FILTER" });
+    }
+
+    if (
+      xComponentIri !== undefined &&
+      xComponentIri === timeSliderFilter?.componentIri
+    ) {
+      dispatchConfigurator({ type: "INTERACTIVE_FILTER_TIME_SLIDER_RESET" });
+    }
+  }, [
+    IFstate.timeSlider.value,
+    timeSliderFilter?.componentIri,
+    dispatch,
+    dispatchConfigurator,
+    interactiveFiltersConfig,
+    xComponentIri,
+  ]);
+
   // Data Filters
   const componentIris = interactiveFiltersConfig?.dataFilters.componentIris;
   useEffect(() => {
diff --git a/app/charts/table/table-state.tsx b/app/charts/table/table-state.tsx
index 8dca0b29b..157f7d262 100644
--- a/app/charts/table/table-state.tsx
+++ b/app/charts/table/table-state.tsx
@@ -19,8 +19,9 @@ import {
   getLabelWithUnit,
   getSlugifiedIri,
 } from "@/charts/shared/chart-helpers";
+import { CommonChartState } from "@/charts/shared/chart-state";
 import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
-import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
+import { Observer, useWidth } from "@/charts/shared/use-width";
 import { BAR_CELL_PADDING, TABLE_HEIGHT } from "@/charts/table/constants";
 import {
   ColumnStyleCategory,
@@ -82,9 +83,8 @@ export type ColumnMeta =
   | TextColumnMeta
   | MKColumnMeta<{ type: "other" }>;
 
-export interface TableChartState {
+export interface TableChartState extends CommonChartState {
   chartType: "table";
-  bounds: Bounds;
   rowHeight: number;
   showSearch: boolean;
   data: Observation[];
@@ -275,7 +275,7 @@ const useTableState = ({
           description: allColumnsByIri[iri]?.description || undefined,
           formatter: cellFormatter,
           ...columnStyle,
-        };
+        } as const;
         if (columnStyleType === "text") {
           return common as TextColumnMeta;
         } else if (columnStyleType === "category") {
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 00114b4f3..3514dfea7 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -249,7 +249,10 @@ const ChartWithInteractiveFilters = React.forwardRef(
     const presetToStr = presetTo?.toString();
     useEffect(() => {
       if (presetFrom && presetTo) {
-        dispatch({ type: "ADD_TIME_FILTER", value: [presetFrom, presetTo] });
+        dispatch({
+          type: "SET_TIME_RANGE_FILTER",
+          value: [presetFrom, presetTo],
+        });
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dispatch, presetFromStr, presetToStr]);
diff --git a/app/components/common-chart.tsx b/app/components/common-chart.tsx
index 7360d4545..2d23383c6 100644
--- a/app/components/common-chart.tsx
+++ b/app/components/common-chart.tsx
@@ -9,12 +9,6 @@ const ChartAreasVisualization = dynamic(
     () => null as never
   )
 );
-const ChartBarsVisualization = dynamic(
-  import("@/charts/bar/chart-bar").then(
-    (mod) => mod.ChartBarsVisualization,
-    () => null as never
-  )
-);
 const ChartColumnsVisualization = dynamic(
   import("@/charts/column/chart-column").then(
     (mod) => mod.ChartColumnsVisualization,
@@ -76,8 +70,6 @@ const GenericChart = ({
   switch (chartConfig.chartType) {
     case "column":
       return <ChartColumnsVisualization {...props} chartConfig={chartConfig} />;
-    case "bar":
-      return <ChartBarsVisualization {...props} chartConfig={chartConfig} />;
     case "line":
       return <ChartLinesVisualization {...props} chartConfig={chartConfig} />;
     case "area":
diff --git a/app/configurator/components/chart-annotations-selector.tsx b/app/configurator/components/chart-annotations-selector.tsx
index 39488d0ad..a375435cf 100644
--- a/app/configurator/components/chart-annotations-selector.tsx
+++ b/app/configurator/components/chart-annotations-selector.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@mui/material";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
 import { ConfiguratorStateDescribingChart } from "@/configurator";
 import {
@@ -12,6 +12,7 @@ import { MetaInputField } from "@/configurator/components/field";
 import { getFieldLabel } from "@/configurator/components/field-i18n";
 import { getIconName } from "@/configurator/components/ui-helpers";
 import { InteractiveFiltersOptions } from "@/configurator/interactive-filters/interactive-filters-config-options";
+import { InteractiveFilterType } from "@/configurator/interactive-filters/interactive-filters-configurator";
 import { locales } from "@/locales/locales";
 import { useLocale } from "@/locales/use-locale";
 
@@ -20,54 +21,65 @@ export const ChartAnnotationsSelector = ({
 }: {
   state: ConfiguratorStateDescribingChart;
 }) => {
+  const { activeField, meta } = state;
   const panelRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (panelRef && panelRef.current) {
       panelRef.current.focus();
     }
-  }, [state.activeField]);
+  }, [activeField]);
   const locale = useLocale();
 
-  const af = state.activeField === "title" ? "title" : "description";
+  const isInteractiveFilterField = useMemo(() => {
+    switch (activeField as InteractiveFilterType) {
+      case "dataFilters":
+      case "legend":
+      case "timeRange":
+      case "timeSlider":
+        return true;
+
+      default:
+        return false;
+    }
+  }, [activeField]);
 
   // Reorder locales so the input field for
   // the current locale is on top
   const orderedLocales = [locale, ...locales.filter((l) => l !== locale)];
 
-  if (state.activeField) {
+  if (activeField) {
     return (
       <Box
         role="tabpanel"
-        id={`annotation-panel-${state.activeField}`}
-        aria-labelledby={`annotation-tab-${state.activeField}`}
+        id={`annotation-panel-${activeField}`}
+        aria-labelledby={`annotation-tab-${activeField}`}
         ref={panelRef}
         tabIndex={-1}
         sx={{ overflowX: "hidden", overflowY: "auto" }}
       >
-        {state.activeField === "timeRange" ||
-        state.activeField === "legend" ||
-        state.activeField === "dataFilters" ? (
+        {isInteractiveFilterField ? (
           <InteractiveFiltersOptions state={state} />
         ) : (
           <ControlSection>
-            <SectionTitle iconName={getIconName(state.activeField)}>
-              {state.activeField && getFieldLabel(state.activeField)}
+            <SectionTitle iconName={getIconName(activeField)}>
+              {getFieldLabel(activeField)}
             </SectionTitle>
             <ControlSectionContent gap="none">
-              {state.activeField &&
-                orderedLocales.map((locale) => (
-                  <Box
-                    key={`${locale}-${state.activeField!}`}
-                    sx={{ ":not(:first-of-type)": { mt: 2 } }}
-                  >
-                    <MetaInputField
-                      metaKey={state.activeField!}
-                      locale={locale}
-                      label={getFieldLabel(locale)}
-                      value={state.meta[af][locale]}
-                    />
-                  </Box>
-                ))}
+              {orderedLocales.map((d) => (
+                <Box
+                  key={`${d}-${activeField!}`}
+                  sx={{ ":not(:first-of-type)": { mt: 2 } }}
+                >
+                  <MetaInputField
+                    metaKey={activeField}
+                    locale={d}
+                    label={getFieldLabel(d)}
+                    value={
+                      meta[activeField === "title" ? "title" : "description"][d]
+                    }
+                  />
+                </Box>
+              ))}
             </ControlSectionContent>
           </ControlSection>
         )}
diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts
index be3947c65..399961377 100644
--- a/app/configurator/components/ui-helpers.ts
+++ b/app/configurator/components/ui-helpers.ts
@@ -188,6 +188,8 @@ export const getIconName = (name: string): IconName => {
       return "tableColumnTimeHidden";
     case "time":
       return "time";
+    case "play":
+      return "play";
 
     default:
       return "table";
diff --git a/app/configurator/config-types.ts b/app/configurator/config-types.ts
index a316d2c86..bec7d1e67 100644
--- a/app/configurator/config-types.ts
+++ b/app/configurator/config-types.ts
@@ -102,6 +102,14 @@ export type InteractiveFiltersTimeRange = t.TypeOf<
   typeof InteractiveFiltersTimeRange
 >;
 
+const InteractiveFiltersTimeSlider = t.type({
+  // FIXME: add range
+  componentIri: t.string,
+});
+export type InteractiveFiltersTimeSlider = t.TypeOf<
+  typeof InteractiveFiltersTimeSlider
+>;
+
 const InteractiveFiltersDataConfig = t.type({
   active: t.boolean,
   componentIris: t.array(t.string),
@@ -114,6 +122,7 @@ const InteractiveFiltersConfig = t.union([
   t.type({
     legend: InteractiveFiltersLegend,
     timeRange: InteractiveFiltersTimeRange,
+    timeSlider: InteractiveFiltersTimeSlider,
     dataFilters: InteractiveFiltersDataConfig,
   }),
   t.undefined,
@@ -173,33 +182,6 @@ const ColumnSegmentField = t.intersection([
 ]);
 export type ColumnSegmentField = t.TypeOf<typeof ColumnSegmentField>;
 
-const BarFields = t.intersection([
-  t.type({
-    x: GenericField,
-    y: t.intersection([
-      t.type({
-        componentIri: t.string,
-      }),
-      SortingField,
-    ]),
-  }),
-  t.partial({
-    segment: ColumnSegmentField,
-  }),
-]);
-const BarConfig = t.type(
-  {
-    version: t.string,
-    chartType: t.literal("bar"),
-    filters: Filters,
-    interactiveFiltersConfig: InteractiveFiltersConfig,
-    fields: BarFields,
-  },
-  "BarConfig"
-);
-export type BarFields = t.TypeOf<typeof BarFields>;
-export type BarConfig = t.TypeOf<typeof BarConfig>;
-
 const ColumnFields = t.intersection([
   t.type({
     x: t.intersection([
@@ -544,7 +526,6 @@ export type MapConfig = t.TypeOf<typeof MapConfig>;
 
 export type ChartFields =
   | ColumnFields
-  | BarFields
   | LineFields
   | AreaFields
   | ScatterPlotFields
@@ -561,7 +542,6 @@ export type ChartSegmentField =
 
 const ChartConfig = t.union([
   AreaConfig,
-  BarConfig,
   ColumnConfig,
   LineConfig,
   ScatterPlotConfig,
@@ -595,12 +575,6 @@ export const isAreaConfig = (
   return chartConfig.chartType === "area";
 };
 
-export const isBarConfig = (
-  chartConfig: ChartConfig
-): chartConfig is BarConfig => {
-  return chartConfig.chartType === "bar";
-};
-
 export const isColumnConfig = (
   chartConfig: ChartConfig
 ): chartConfig is ColumnConfig => {
@@ -641,7 +615,6 @@ export const isSegmentInConfig = (
   chartConfig: ChartConfig
 ): chartConfig is
   | AreaConfig
-  | BarConfig
   | ColumnConfig
   | LineConfig
   | ScatterPlotConfig
@@ -660,7 +633,6 @@ export const isSegmentColorMappingInConfig = (
   chartConfig: ChartConfig
 ): chartConfig is
   | AreaConfig
-  | BarConfig
   | ColumnConfig
   | LineConfig
   | ScatterPlotConfig
@@ -668,7 +640,6 @@ export const isSegmentColorMappingInConfig = (
   const { chartType } = chartConfig;
   return (
     chartType === "area" ||
-    chartType === "bar" ||
     chartType === "column" ||
     chartType === "line" ||
     chartType === "scatterplot" ||
@@ -807,7 +778,6 @@ type MapAdjusters = BaseAdjusters<MapConfig> & {
 };
 
 export type ChartConfigsAdjusters = {
-  bar: {};
   column: ColumnAdjusters;
   line: LineAdjusters;
   area: AreaAdjusters;
diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
index 7f2aab82b..fb6febd42 100644
--- a/app/configurator/configurator-state.tsx
+++ b/app/configurator/configurator-state.tsx
@@ -193,6 +193,9 @@ export type ConfiguratorStateAction =
       type: "INTERACTIVE_FILTER_CHANGED";
       value: InteractiveFiltersConfig;
     }
+  | {
+      type: "INTERACTIVE_FILTER_TIME_SLIDER_RESET";
+    }
   | {
       type: "CHART_CONFIG_REPLACED";
       value: { chartConfig: ChartConfig; dataSetMetadata: DataCubeMetadata };
@@ -1054,6 +1057,43 @@ export const updateColorMapping = (
   return draft;
 };
 
+export const handleInteractiveFilterChanged = (
+  draft: ConfiguratorState,
+  action: Extract<
+    ConfiguratorStateAction,
+    { type: "INTERACTIVE_FILTER_CHANGED" }
+  >
+) => {
+  if (
+    draft.state === "CONFIGURING_CHART" ||
+    draft.state === "DESCRIBING_CHART"
+  ) {
+    setWith(
+      draft,
+      "chartConfig.interactiveFiltersConfig",
+      action.value,
+      Object
+    );
+  }
+
+  return draft;
+};
+
+export const handleInteractiveFilterTimeSliderReset = (
+  draft: ConfiguratorState
+) => {
+  if (
+    draft.state === "CONFIGURING_CHART" ||
+    draft.state === "DESCRIBING_CHART"
+  ) {
+    if (draft.chartConfig.interactiveFiltersConfig) {
+      draft.chartConfig.interactiveFiltersConfig.timeSlider.componentIri = "";
+    }
+  }
+
+  return draft;
+};
+
 const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
   draft,
   action
@@ -1195,15 +1235,10 @@ const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
       return draft;
 
     case "INTERACTIVE_FILTER_CHANGED":
-      if (draft.state === "DESCRIBING_CHART") {
-        setWith(
-          draft,
-          `chartConfig.interactiveFiltersConfig`,
-          action.value,
-          Object
-        );
-      }
-      return draft;
+      return handleInteractiveFilterChanged(draft, action);
+
+    case "INTERACTIVE_FILTER_TIME_SLIDER_RESET":
+      return handleInteractiveFilterTimeSliderReset(draft);
 
     case "CHART_CONFIG_REPLACED":
       if (draft.state === "CONFIGURING_CHART") {
diff --git a/app/configurator/interactive-filters/helpers.ts b/app/configurator/interactive-filters/helpers.ts
new file mode 100644
index 000000000..9cf67d10f
--- /dev/null
+++ b/app/configurator/interactive-filters/helpers.ts
@@ -0,0 +1,36 @@
+import { getFieldComponentIri } from "@/charts";
+import { isTemporalDimension } from "@/domain/data";
+import {
+  DimensionMetadataFragment,
+  TemporalDimension,
+} from "@/graphql/query-hooks";
+
+import { ChartConfig } from "../config-types";
+
+export const getTimeSliderFilterDimensions = ({
+  chartConfig,
+  dataCubeByIri,
+}: {
+  chartConfig: ChartConfig;
+  dataCubeByIri: {
+    dimensions: DimensionMetadataFragment[];
+    measures: DimensionMetadataFragment[];
+  };
+}): TemporalDimension[] => {
+  if (dataCubeByIri) {
+    const allComponents = [
+      ...dataCubeByIri.dimensions,
+      ...dataCubeByIri.measures,
+    ];
+    const xComponentIri = getFieldComponentIri(chartConfig.fields, "x");
+    const xComponent = allComponents.find((d) => d.iri === xComponentIri);
+
+    return allComponents.filter(
+      (d) =>
+        isTemporalDimension(d) &&
+        (isTemporalDimension(xComponent) ? d.iri !== xComponent.iri : true)
+    ) as TemporalDimension[];
+  }
+
+  return [];
+};
diff --git a/app/configurator/interactive-filters/interactive-filters-config-options.tsx b/app/configurator/interactive-filters/interactive-filters-config-options.tsx
index 2c8ed235b..1cf048137 100644
--- a/app/configurator/interactive-filters/interactive-filters-config-options.tsx
+++ b/app/configurator/interactive-filters/interactive-filters-config-options.tsx
@@ -1,10 +1,17 @@
 import { t, Trans } from "@lingui/macro";
 import { Box } from "@mui/material";
 import { extent } from "d3";
-import React, { ChangeEvent, useCallback, useEffect, useRef } from "react";
+import get from "lodash/get";
+import React, {
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 
 import { getFieldComponentIri, getFieldComponentIris } from "@/charts";
-import { Checkbox } from "@/components/form";
+import { Checkbox, Select } from "@/components/form";
 import { Loading } from "@/components/hint";
 import {
   ControlSection,
@@ -21,25 +28,32 @@ import { EditorBrush } from "@/configurator/interactive-filters/editor-time-brus
 import {
   toggleInteractiveFilterDataDimension,
   useInteractiveDataFiltersToggle,
-  useInteractiveFiltersToggle,
+  useInteractiveLegendFiltersToggle,
   useInteractiveTimeRangeFiltersToggle,
+  useInteractiveTimeSliderFiltersSelect,
 } from "@/configurator/interactive-filters/interactive-filters-config-state";
 import { InteractiveFilterType } from "@/configurator/interactive-filters/interactive-filters-configurator";
 import { isTemporalDimension } from "@/domain/data";
 import { useFormatFullDateAuto } from "@/formatters";
 import {
   DimensionMetadataFragment,
+  TemporalDimension,
   TimeUnit,
   useDataCubeMetadataWithComponentValuesQuery,
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
 
+import { FIELD_VALUE_NONE } from "../constants";
+
+import { getTimeSliderFilterDimensions } from "./helpers";
+
 export const InteractiveFiltersOptions = ({
   state,
 }: {
   state: ConfiguratorStateDescribingChart;
 }) => {
-  const { activeField, chartConfig, dataSet, dataSource } = state;
+  const { chartConfig, dataSet, dataSource } = state;
+  const activeField = state.activeField as InteractiveFilterType;
   const locale = useLocale();
 
   const [{ data }] = useDataCubeMetadataWithComponentValuesQuery({
@@ -71,12 +85,11 @@ export const InteractiveFiltersOptions = ({
         <ControlSection>
           <SectionTitle iconName="segments">{component?.label}</SectionTitle>
           <ControlSectionContent gap="none">
-            <InteractiveFiltersToggle
+            <InteractiveLegendFiltersToggle
               label={t({
                 id: "controls.interactiveFilters.legend.toggleInteractiveLegend",
                 message: "Show interactive legend",
               })}
-              path="legend"
               defaultChecked={false}
               disabled={false}
             />
@@ -95,6 +108,19 @@ export const InteractiveFiltersOptions = ({
           </ControlSectionContent>
         </ControlSection>
       );
+    } else if (activeField === "timeSlider") {
+      return (
+        <ControlSection>
+          <SectionTitle iconName="play">
+            <Trans id="controls.interactive.filters.timeSlider">
+              Time slider
+            </Trans>
+          </SectionTitle>
+          <ControlSectionContent gap="none">
+            <InteractiveTimeSliderFilterOptions state={state} />
+          </ControlSectionContent>
+        </ControlSection>
+      );
     } else if (activeField === "dataFilters") {
       return (
         <ControlSection>
@@ -114,7 +140,7 @@ export const InteractiveFiltersOptions = ({
   return null;
 };
 
-const InteractiveTimeFilterToggle = ({
+const InteractiveTimeRangeFilterToggle = ({
   label,
   defaultChecked,
   disabled = false,
@@ -178,7 +204,7 @@ const InteractiveTimeRangeFilterOptions = ({
       <>
         {timeExtent && timeExtent[0] && timeExtent[1] ? (
           <>
-            <InteractiveTimeFilterToggle
+            <InteractiveTimeRangeFilterToggle
               label={t({
                 id: "controls.interactiveFilters.time.toggleTimeFilter",
                 message: "Show time filter",
@@ -216,6 +242,82 @@ const InteractiveTimeRangeFilterOptions = ({
   }
 };
 
+const InteractiveTimeSliderFilterOptions = ({
+  state: { chartConfig, dataSet, dataSource },
+}: {
+  state: ConfiguratorStateDescribingChart;
+}) => {
+  const locale = useLocale();
+  const [{ data }] = useDataCubeMetadataWithComponentValuesQuery({
+    variables: {
+      iri: dataSet,
+      sourceType: dataSource.type,
+      sourceUrl: dataSource.url,
+      locale,
+    },
+  });
+
+  const value =
+    get(chartConfig, "interactiveFiltersConfig.timeSlider.componentIri") ||
+    FIELD_VALUE_NONE;
+
+  if (data?.dataCubeByIri) {
+    const timeSliderDimensions = getTimeSliderFilterDimensions({
+      chartConfig,
+      dataCubeByIri: data.dataCubeByIri,
+    });
+
+    return (
+      <InteractiveTimeSliderFilterOptionsSelect
+        dimensions={timeSliderDimensions}
+        value={value}
+      />
+    );
+  } else {
+    return <Loading />;
+  }
+};
+
+const InteractiveTimeSliderFilterOptionsSelect = ({
+  dimensions,
+  value,
+}: {
+  dimensions: TemporalDimension[];
+  value: string;
+}) => {
+  const fieldProps = useInteractiveTimeSliderFiltersSelect();
+  const options = useMemo(() => {
+    return [
+      {
+        label: t({
+          id: "controls.none",
+          message: "None",
+        }),
+        value: FIELD_VALUE_NONE,
+        isNoneValue: true,
+      },
+      ...dimensions.map((d) => ({
+        label: d.label,
+        value: d.iri,
+      })),
+    ];
+  }, [dimensions]);
+
+  return (
+    <Select
+      id="time-slider-component-iri"
+      options={options}
+      label={t({
+        id: "controls.select.dimension",
+        message: "Select a dimension",
+      })}
+      value={value}
+      displayEmpty={true}
+      {...fieldProps}
+    />
+  );
+};
+
 // Data Filters
 const InteractiveDataFiltersToggle = ({
   label,
@@ -341,18 +443,16 @@ const InteractiveDataFilterOptionsCheckbox = ({
 };
 
 // Generic toggle
-const InteractiveFiltersToggle = ({
+const InteractiveLegendFiltersToggle = ({
   label,
-  path,
   defaultChecked,
   disabled = false,
 }: {
   label: string;
-  path: InteractiveFilterType;
   defaultChecked?: boolean;
   disabled?: boolean;
 }) => {
-  const fieldProps = useInteractiveFiltersToggle({ path });
+  const fieldProps = useInteractiveLegendFiltersToggle();
 
   return (
     <Checkbox
diff --git a/app/configurator/interactive-filters/interactive-filters-config-state.tsx b/app/configurator/interactive-filters/interactive-filters-config-state.tsx
index 9939f623c..e56380f3a 100644
--- a/app/configurator/interactive-filters/interactive-filters-config-state.tsx
+++ b/app/configurator/interactive-filters/interactive-filters-config-state.tsx
@@ -1,3 +1,4 @@
+import { SelectChangeEvent } from "@mui/material";
 import produce from "immer";
 import get from "lodash/get";
 import { ChangeEvent, useCallback } from "react";
@@ -7,44 +8,39 @@ import {
   isDescribing,
   useConfiguratorState,
 } from "@/configurator/configurator-state";
-import { InteractiveFilterType } from "@/configurator/interactive-filters/interactive-filters-configurator";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
+import useEvent from "@/utils/use-event";
 
-export const useInteractiveFiltersToggle = ({
-  path,
-}: {
-  path: InteractiveFilterType;
-}) => {
-  const [state, dispatch] = useConfiguratorState(isDescribing);
-  const onChange = useCallback<(e: ChangeEvent<HTMLInputElement>) => void>(
-    (e) => {
-      const newIFConfig = produce(
-        state.chartConfig.interactiveFiltersConfig,
-        (draft) => {
-          if (draft?.[path]) {
-            draft[path].active = e.currentTarget.checked;
-          }
+import { FIELD_VALUE_NONE } from "../constants";
 
-          return draft;
+export const useInteractiveLegendFiltersToggle = () => {
+  const [state, dispatch] = useConfiguratorState(isDescribing);
+  const onChange = useEvent((e: ChangeEvent<HTMLInputElement>) => {
+    const newConfig = produce(
+      state.chartConfig.interactiveFiltersConfig,
+      (draft) => {
+        if (draft?.legend) {
+          draft.legend.active = e.currentTarget.checked;
         }
-      );
 
-      dispatch({
-        type: "INTERACTIVE_FILTER_CHANGED",
-        value: newIFConfig,
-      });
-    },
-    [dispatch, path, state]
-  );
+        return draft;
+      }
+    );
+
+    dispatch({
+      type: "INTERACTIVE_FILTER_CHANGED",
+      value: newConfig,
+    });
+  });
 
   const stateValue = get(
     state,
-    `chartConfig.interactiveFiltersConfig.${path}.active`
+    "chartConfig.interactiveFiltersConfig.legend.active"
   );
   const checked = stateValue ? stateValue : false;
 
   return {
-    name: path,
+    name: "legend",
     checked,
     onChange,
   };
@@ -119,6 +115,41 @@ export const updateInteractiveTimeRangeFilter = produce(
   }
 );
 
+export const useInteractiveTimeSliderFiltersSelect = () => {
+  const [state, dispatch] = useConfiguratorState(isDescribing);
+  const { chartConfig } = state;
+
+  const onChange = useCallback<(e: SelectChangeEvent<unknown>) => void>(
+    (e) => {
+      const value = (
+        e.target.value === FIELD_VALUE_NONE ? "" : e.target.value
+      ) as string;
+
+      const newConfig = produce(
+        chartConfig.interactiveFiltersConfig,
+        (draft) => {
+          if (draft?.timeSlider) {
+            draft.timeSlider.componentIri = value;
+          }
+
+          return draft;
+        }
+      );
+
+      dispatch({
+        type: "INTERACTIVE_FILTER_CHANGED",
+        value: newConfig,
+      });
+    },
+    [chartConfig, dispatch]
+  );
+
+  return {
+    name: "timeSlider",
+    onChange,
+  };
+};
+
 export const useInteractiveDataFiltersToggle = ({
   dimensions,
 }: {
diff --git a/app/configurator/interactive-filters/interactive-filters-configurator.tsx b/app/configurator/interactive-filters/interactive-filters-configurator.tsx
index d1a477629..39c6f84b1 100644
--- a/app/configurator/interactive-filters/interactive-filters-configurator.tsx
+++ b/app/configurator/interactive-filters/interactive-filters-configurator.tsx
@@ -11,6 +11,7 @@ import {
   ControlSectionContent,
   SectionTitle,
 } from "@/configurator/components/chart-controls/section";
+import { flag } from "@/configurator/components/flag";
 import { ConfiguratorStateDescribingChart } from "@/configurator/config-types";
 import {
   isDescribing,
@@ -20,17 +21,22 @@ import { isTemporalDimension } from "@/domain/data";
 import { useDataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
 
-export type InteractiveFilterType = "legend" | "timeRange" | "dataFilters";
+import { getTimeSliderFilterDimensions } from "./helpers";
+
+const ENABLE_TIME_SLIDER = typeof window !== "undefined" && flag("timeslider");
+
+export type InteractiveFilterType =
+  | "legend"
+  | "timeRange"
+  | "timeSlider"
+  | "dataFilters";
 
 export const InteractiveFiltersConfigurator = ({
-  state: {
-    dataSet,
-    dataSource,
-    chartConfig: { chartType, fields, filters },
-  },
+  state: { dataSet, dataSource, chartConfig },
 }: {
   state: ConfiguratorStateDescribingChart;
 }) => {
+  const { chartType, fields, filters } = chartConfig;
   const locale = useLocale();
   const [{ data }] = useDataCubeMetadataWithComponentValuesQuery({
     variables: {
@@ -40,23 +46,32 @@ export const InteractiveFiltersConfigurator = ({
       locale,
     },
   });
-  const xDimensionIri = getFieldComponentIri(fields, "x");
-  const segmentDimensionIri = getFieldComponentIri(fields, "segment");
 
   if (data?.dataCubeByIri) {
     const { dimensions, measures } = data.dataCubeByIri;
     const allComponents = [...dimensions, ...measures];
-    const xDimension = allComponents.find((d) => d.iri === xDimensionIri);
-    const segmentDimension = allComponents.find(
-      (d) => d.iri === segmentDimensionIri
+
+    const xComponentIri = getFieldComponentIri(fields, "x");
+    const xComponent = allComponents.find((d) => d.iri === xComponentIri);
+
+    const segmentComponentIri = getFieldComponentIri(fields, "segment");
+    const segmentComponent = allComponents.find(
+      (d) => d.iri === segmentComponentIri
     );
 
+    const timeSliderDimensions = getTimeSliderFilterDimensions({
+      chartConfig,
+      dataCubeByIri: data.dataCubeByIri,
+    });
+
     const canFilterLegend =
       chartConfigOptionsUISpec[chartType].interactiveFilters.includes("legend");
     const canFilterTimeRange =
       chartConfigOptionsUISpec[chartType].interactiveFilters.includes(
         "timeRange"
       );
+    const canFilterTimeSlider =
+      ENABLE_TIME_SLIDER && timeSliderDimensions.length > 0;
     const canFilterData = Object.keys(filters).length > 0;
 
     return (
@@ -70,20 +85,32 @@ export const InteractiveFiltersConfigurator = ({
           </Trans>
         </SectionTitle>
         <ControlSectionContent px="small" gap="none">
-          {/* Time */}
-          {isTemporalDimension(xDimension) && canFilterTimeRange && (
+          {/* Time range */}
+          {isTemporalDimension(xComponent) && canFilterTimeRange && (
             <InteractiveFilterTabField
               value="timeRange"
               icon="time"
-              label={xDimension.label}
+              label={xComponent.label}
+            />
+          )}
+          {/* Time slider */}
+          {canFilterTimeSlider && (
+            <InteractiveFilterTabField
+              value="timeSlider"
+              icon="play"
+              label={
+                <Trans id="controls.interactive.filters.timeSlider">
+                  Time slider
+                </Trans>
+              }
             />
           )}
           {/* Legend */}
-          {segmentDimension && canFilterLegend && (
+          {segmentComponent && canFilterLegend && (
             <InteractiveFilterTabField
               value="legend"
               icon="segment"
-              label={segmentDimension.label}
+              label={segmentComponent.label}
             />
           )}
           {/* Data Filters */}
@@ -112,7 +139,6 @@ const InteractiveFilterTabField = ({
   label,
 }: {
   value: InteractiveFilterType;
-  disabled?: boolean;
   icon: string;
   label: ReactNode;
 }) => {
@@ -126,10 +152,11 @@ const InteractiveFilterTabField = ({
   }, [dispatch, value]);
 
   const checked = state.activeField === value;
-  const active = get(
+  const active = !!get(
     state,
-    `chartConfig.interactiveFiltersConfig["${value}"].active`,
-    ""
+    `chartConfig.interactiveFiltersConfig["${value}"].${
+      value === "timeSlider" ? "componentIri" : "active"
+    }`
   );
 
   return (
diff --git a/app/configurator/interactive-filters/time-slider.tsx b/app/configurator/interactive-filters/time-slider.tsx
new file mode 100644
index 000000000..ae3c8e9ab
--- /dev/null
+++ b/app/configurator/interactive-filters/time-slider.tsx
@@ -0,0 +1,78 @@
+import { bisect, scaleLinear } from "d3";
+import React, { ChangeEvent } from "react";
+
+import { ChartState, useChartState } from "@/charts/shared/use-chart-state";
+import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
+import { TableChartState } from "@/charts/table/table-state";
+import { Slider } from "@/components/form";
+import { parseDate } from "@/configurator/components/ui-helpers";
+import useEvent from "@/utils/use-event";
+
+export const TimeSlider = ({ componentIri }: { componentIri?: string }) => {
+  const [IFState, dispatch] = useInteractiveFilters();
+  const [t, setT] = React.useState(0);
+  const chartState = useChartState() as NonNullable<
+    Exclude<ChartState, TableChartState>
+  >;
+
+  const sortedMs = React.useMemo(() => {
+    // FIXME: enable interactive filters for maps!
+    if (componentIri && chartState.chartType !== "map") {
+      const uniqueValues = [
+        ...new Set(
+          chartState.allData.map((d) => d[componentIri]).filter(Boolean)
+        ),
+      ] as string[];
+      const sortedMs = uniqueValues
+        .sort()
+        .map(parseDate)
+        .map((d) => d.getTime());
+
+      return sortedMs;
+    }
+
+    return [];
+    // @ts-ignore - allData is not yet there for the maps
+  }, [chartState.chartType, chartState.allData, componentIri]);
+
+  const msScale = React.useMemo(() => {
+    if (sortedMs.length) {
+      const [min, max] = [sortedMs[0], sortedMs[sortedMs.length - 1]];
+      return scaleLinear().range([min, max]);
+    }
+  }, [sortedMs]);
+
+  const onChange = useEvent((e: ChangeEvent<HTMLInputElement>) => {
+    const t = +e.target.value;
+    setT(t);
+
+    if (msScale) {
+      const tMs = msScale(t);
+      const i = bisect(sortedMs, tMs);
+      const updateMs = sortedMs[i - 1];
+
+      if (IFState.timeSlider.value?.getTime() !== updateMs) {
+        dispatch({
+          type: "SET_TIME_SLIDER_FILTER",
+          value: new Date(updateMs),
+        });
+      }
+    }
+  });
+
+  React.useEffect(() => {
+    onChange({ target: { value: "0" } } as ChangeEvent<HTMLInputElement>);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortedMs]);
+
+  return (
+    <Slider
+      name="time-slider"
+      min={0}
+      max={1}
+      step={0.0001}
+      value={t}
+      onChange={onChange}
+    />
+  );
+};
diff --git a/app/docs/annotations.docs.tsx b/app/docs/annotations.docs.tsx
index e70f3b0e2..0e1081188 100644
--- a/app/docs/annotations.docs.tsx
+++ b/app/docs/annotations.docs.tsx
@@ -44,6 +44,9 @@ ${(
             componentIri: "",
             presets: { type: "range", from: "", to: "" },
           },
+          timeSlider: {
+            componentIri: "",
+          },
           dataFilters: { active: false, componentIris: [] },
         }}
         aspectRatio={0.4}
@@ -184,6 +187,9 @@ ${(
             componentIri: "",
             presets: { type: "range", from: "", to: "" },
           },
+          timeSlider: {
+            componentIri: "",
+          },
           dataFilters: { active: false, componentIris: [] },
         }}
         aspectRatio={0.4}
@@ -223,6 +229,9 @@ ${(
             componentIri: "",
             presets: { type: "range", from: "", to: "" },
           },
+          timeSlider: {
+            componentIri: "",
+          },
           dataFilters: { active: false, componentIris: [] },
         }}
         aspectRatio={0.4}
diff --git a/app/docs/columns.docs.tsx b/app/docs/columns.docs.tsx
index 43e964e1c..ea3a1c484 100644
--- a/app/docs/columns.docs.tsx
+++ b/app/docs/columns.docs.tsx
@@ -41,6 +41,9 @@ ${(
             active: false,
             componentIri: "http://fake-iri",
           },
+          timeSlider: {
+            componentIri: "",
+          },
         }}
         fields={columnFields}
         measures={columnMeasures}
diff --git a/app/docs/fixtures.ts b/app/docs/fixtures.ts
index a7f23e409..ccee44d80 100644
--- a/app/docs/fixtures.ts
+++ b/app/docs/fixtures.ts
@@ -42,6 +42,9 @@ export const states: ConfiguratorState[] = [
       filters: {},
       interactiveFiltersConfig: {
         legend: { active: false, componentIri: "" },
+        timeSlider: {
+          componentIri: "",
+        },
         timeRange: {
           active: false,
           componentIri: "",
diff --git a/app/docs/lines.docs.tsx b/app/docs/lines.docs.tsx
index d2b93de73..6682ee848 100644
--- a/app/docs/lines.docs.tsx
+++ b/app/docs/lines.docs.tsx
@@ -25,13 +25,22 @@ ${(
         dimensions={dimensions}
         measures={measures}
         interactiveFiltersConfig={{
-          legend: { active: true, componentIri: "" },
+          legend: {
+            active: true,
+            componentIri: "",
+          },
           timeRange: {
             active: true,
             componentIri: "",
             presets: { type: "range", from: "", to: "" },
           },
-          dataFilters: { active: false, componentIris: [] },
+          timeSlider: {
+            componentIri: "",
+          },
+          dataFilters: {
+            active: false,
+            componentIris: [],
+          },
         }}
         aspectRatio={0.4}
       >
diff --git a/app/docs/scatterplot.docs.tsx b/app/docs/scatterplot.docs.tsx
index edddd7ea8..efff2dd84 100644
--- a/app/docs/scatterplot.docs.tsx
+++ b/app/docs/scatterplot.docs.tsx
@@ -31,13 +31,22 @@ ${(
         dimensions={scatterplotDimensions}
         measures={scatterplotMeasures}
         interactiveFiltersConfig={{
-          legend: { active: true, componentIri: "" },
+          legend: {
+            active: true,
+            componentIri: "",
+          },
           timeRange: {
             active: false,
             componentIri: "",
             presets: { type: "range", from: "", to: "" },
           },
-          dataFilters: { active: false, componentIris: [] },
+          timeSlider: {
+            componentIri: "",
+          },
+          dataFilters: {
+            active: false,
+            componentIris: [],
+          },
         }}
         aspectRatio={1}
       >
diff --git a/app/homepage/examples.tsx b/app/homepage/examples.tsx
index dcfae30f7..3a936a41d 100644
--- a/app/homepage/examples.tsx
+++ b/app/homepage/examples.tsx
@@ -112,6 +112,9 @@ export const Examples = ({
                 },
                 componentIri: "",
               },
+              timeSlider: {
+                componentIri: "",
+              },
               legend: {
                 active: false,
                 componentIri: "",
@@ -194,6 +197,9 @@ export const Examples = ({
                 },
                 componentIri: "",
               },
+              timeSlider: {
+                componentIri: "",
+              },
               legend: {
                 active: true,
                 componentIri: "",
diff --git a/app/icons/index.tsx b/app/icons/index.tsx
index 38adfa0bd..bf7fa07f2 100644
--- a/app/icons/index.tsx
+++ b/app/icons/index.tsx
@@ -30,8 +30,6 @@ export const getChartIcon = (chartType: ChartType): IconName => {
   switch (chartType) {
     case "area":
       return "chartArea";
-    case "bar":
-      return "chartBar";
     case "column":
       return "chartColumn";
     case "line":
diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
index 4a0ad5a59..206402afa 100644
--- a/app/locales/de/messages.po
+++ b/app/locales/de/messages.po
@@ -29,8 +29,8 @@ msgstr "Filter nach unten verschieben"
 msgid "Move filter up"
 msgstr "Filter nach oben verschieben"
 
-#: app/configurator/components/dataset-browse.tsx:1027
-#: app/configurator/components/filters.tsx:714
+#: app/configurator/components/dataset-browse.tsx:1037
+#: app/configurator/components/filters.tsx:730
 msgid "No results"
 msgstr "Kein Ergebnis"
 
@@ -42,15 +42,15 @@ msgstr "[ Ohne Beschreibung ]"
 msgid "annotation.add.title"
 msgstr "[ Ohne Titel ]"
 
-#: app/configurator/components/dataset-browse.tsx:958
+#: app/configurator/components/dataset-browse.tsx:968
 msgid "browse-panel.organizations"
 msgstr "Organisationen"
 
-#: app/configurator/components/dataset-browse.tsx:940
+#: app/configurator/components/dataset-browse.tsx:950
 msgid "browse-panel.themes"
 msgstr "Kategorien"
 
-#: app/configurator/components/dataset-preview.tsx:77
+#: app/configurator/components/dataset-preview.tsx:128
 msgid "browse.dataset.create-visualization"
 msgstr "Visualisierung von diesem Datensatz erstellen"
 
@@ -120,21 +120,21 @@ msgstr "Diese Visualisierung veröffentlichen"
 msgid "button.share"
 msgstr "Teilen"
 
-#: app/configurator/components/ui-helpers.ts:620
+#: app/configurator/components/field-i18n.ts:35
 msgid "chart.map.layers.area"
 msgstr "Flächen"
 
 #: app/configurator/components/chart-configurator.tsx:696
-#: app/configurator/components/chart-options-selector.tsx:996
-#: app/configurator/components/ui-helpers.ts:616
+#: app/configurator/components/chart-options-selector.tsx:989
+#: app/configurator/components/field-i18n.ts:31
 msgid "chart.map.layers.base"
 msgstr "Kartenanzeige"
 
-#: app/configurator/components/chart-options-selector.tsx:1000
+#: app/configurator/components/chart-options-selector.tsx:993
 msgid "chart.map.layers.base.show"
 msgstr "Weltkarte anzeigen"
 
-#: app/configurator/components/chart-options-selector.tsx:1009
+#: app/configurator/components/chart-options-selector.tsx:1001
 msgid "chart.map.layers.base.view.locked"
 msgstr "Gesperrte Ansicht"
 
@@ -143,7 +143,7 @@ msgstr "Gesperrte Ansicht"
 #~ msgid "chart.map.layers.show"
 #~ msgstr "Ebene anzeigen"
 
-#: app/configurator/components/ui-helpers.ts:624
+#: app/configurator/components/field-i18n.ts:39
 msgid "chart.map.layers.symbol"
 msgstr "Symbole"
 
@@ -159,81 +159,81 @@ msgstr "Kompakte Ansicht"
 msgid "chart.table.number.of.lines"
 msgstr "Anzahl Zeilen"
 
-#: app/configurator/table/table-chart-options.tsx:196
+#: app/configurator/table/table-chart-options.tsx:190
 msgid "columnStyle.bar"
 msgstr "Säulendiagramm"
 
-#: app/configurator/table/table-chart-options.tsx:182
+#: app/configurator/table/table-chart-options.tsx:200
 msgid "columnStyle.categories"
 msgstr "Kategorien"
 
-#: app/configurator/table/table-chart-options.tsx:192
+#: app/configurator/table/table-chart-options.tsx:186
 msgid "columnStyle.heatmap"
 msgstr "Heatmap"
 
-#: app/configurator/table/table-chart-options.tsx:178
-#: app/configurator/table/table-chart-options.tsx:188
+#: app/configurator/table/table-chart-options.tsx:182
+#: app/configurator/table/table-chart-options.tsx:196
 msgid "columnStyle.text"
 msgstr "Schrift"
 
-#: app/configurator/table/table-chart-options.tsx:395
+#: app/configurator/table/table-chart-options.tsx:397
 msgid "columnStyle.textStyle.bold"
 msgstr "Fett"
 
-#: app/configurator/table/table-chart-options.tsx:388
+#: app/configurator/table/table-chart-options.tsx:390
 msgid "columnStyle.textStyle.regular"
 msgstr "Normal"
 
-#: app/configurator/interactive-filters/editor-time-brush.tsx:173
+#: app/configurator/interactive-filters/editor-time-brush.tsx:168
 msgid "controls..interactiveFilters.time.defaultSettings"
 msgstr "Standardeinstellung"
 
-#: app/configurator/components/ui-helpers.ts:590
+#: app/configurator/components/field-i18n.ts:5
 msgid "controls.axis.horizontal"
 msgstr "Horizontale Achse"
 
-#: app/configurator/components/ui-helpers.ts:598
+#: app/configurator/components/field-i18n.ts:13
 msgid "controls.axis.vertical"
 msgstr "Vertikale Achse"
 
-#: app/configurator/components/ui-helpers.ts:700
+#: app/configurator/components/field-i18n.ts:115
 msgid "controls.chart.type.area"
 msgstr "Flächen"
 
-#: app/configurator/components/ui-helpers.ts:692
+#: app/configurator/components/field-i18n.ts:107
 msgid "controls.chart.type.bar"
 msgstr "Balken"
 
-#: app/configurator/components/ui-helpers.ts:688
+#: app/configurator/components/field-i18n.ts:103
 msgid "controls.chart.type.column"
 msgstr "Säulen"
 
-#: app/configurator/components/ui-helpers.ts:696
+#: app/configurator/components/field-i18n.ts:111
 msgid "controls.chart.type.line"
 msgstr "Linien"
 
-#: app/configurator/components/ui-helpers.ts:716
+#: app/configurator/components/field-i18n.ts:131
 msgid "controls.chart.type.map"
 msgstr "Karte"
 
-#: app/configurator/components/ui-helpers.ts:708
+#: app/configurator/components/field-i18n.ts:123
 msgid "controls.chart.type.pie"
 msgstr "Kreis"
 
-#: app/configurator/components/ui-helpers.ts:704
+#: app/configurator/components/field-i18n.ts:119
 msgid "controls.chart.type.scatterplot"
 msgstr "Scatterplot"
 
-#: app/configurator/components/ui-helpers.ts:712
+#: app/configurator/components/field-i18n.ts:127
 msgid "controls.chart.type.table"
 msgstr "Tabelle"
 
-#: app/configurator/components/chart-options-selector.tsx:718
-#: app/configurator/components/ui-helpers.ts:602
+#: app/configurator/components/chart-options-selector.tsx:720
+#: app/configurator/components/field-i18n.ts:17
 msgid "controls.color"
 msgstr "Farbe"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:47
+#: app/configurator/components/chart-controls/control-tab.tsx:45
 msgid "controls.color.add"
 msgstr "Hinzufügen …"
 
@@ -241,52 +241,52 @@ msgstr "Hinzufügen …"
 msgid "controls.color.opacity"
 msgstr "Transparenz"
 
-#: app/configurator/components/chart-controls/color-palette.tsx:98
-#: app/configurator/components/chart-controls/color-ramp.tsx:120
+#: app/configurator/components/chart-controls/color-palette.tsx:112
+#: app/configurator/components/chart-controls/color-ramp.tsx:115
 msgid "controls.color.palette"
 msgstr "Farbpalette"
 
-#: app/configurator/components/chart-controls/color-ramp.tsx:160
+#: app/configurator/components/chart-controls/color-ramp.tsx:155
 msgid "controls.color.palette.diverging"
 msgstr ""
 
-#: app/configurator/components/chart-controls/color-palette.tsx:247
+#: app/configurator/components/chart-controls/color-palette.tsx:261
 msgid "controls.color.palette.reset"
 msgstr "Farbpalette zurücksetzen"
 
-#: app/configurator/components/chart-controls/color-ramp.tsx:144
+#: app/configurator/components/chart-controls/color-ramp.tsx:139
 msgid "controls.color.palette.sequential"
 msgstr "Sequentiell"
 
-#: app/configurator/components/chart-options-selector.tsx:840
+#: app/configurator/components/chart-options-selector.tsx:836
 msgid "controls.color.scale.discretization.jenks"
 msgstr "Jenks (Natural Breaks)"
 
-#: app/configurator/components/chart-options-selector.tsx:833
+#: app/configurator/components/chart-options-selector.tsx:829
 msgid "controls.color.scale.discretization.quantiles"
 msgstr "Quantile (gleiche Anzahl Werte)"
 
-#: app/configurator/components/chart-options-selector.tsx:826
+#: app/configurator/components/chart-options-selector.tsx:822
 msgid "controls.color.scale.discretization.quantize"
 msgstr "Quantisierung (gleiche Wertebereiche)"
 
-#: app/configurator/components/chart-options-selector.tsx:818
+#: app/configurator/components/chart-options-selector.tsx:814
 msgid "controls.color.scale.interpolation"
 msgstr "Interpolation"
 
-#: app/configurator/components/chart-options-selector.tsx:851
+#: app/configurator/components/chart-options-selector.tsx:846
 msgid "controls.color.scale.number.of.classes"
 msgstr "Anzahl Klassen"
 
-#: app/configurator/components/chart-options-selector.tsx:788
+#: app/configurator/components/chart-options-selector.tsx:786
 msgid "controls.color.scale.type.continuous"
 msgstr "Kontinuierlich"
 
-#: app/configurator/components/chart-options-selector.tsx:800
+#: app/configurator/components/chart-options-selector.tsx:797
 msgid "controls.color.scale.type.discrete"
 msgstr "Diskret"
 
-#: app/configurator/components/chart-options-selector.tsx:738
+#: app/configurator/components/chart-options-selector.tsx:739
 msgid "controls.color.select"
 msgstr "Farbe auswählen"
 
@@ -294,15 +294,15 @@ msgstr "Farbe auswählen"
 msgid "controls.colorpicker.open"
 msgstr "Farbauswahl öffnen"
 
-#: app/configurator/components/ui-helpers.ts:612
+#: app/configurator/components/field-i18n.ts:27
 msgid "controls.column.grouped"
 msgstr "Gruppiert"
 
-#: app/configurator/components/ui-helpers.ts:608
+#: app/configurator/components/field-i18n.ts:23
 msgid "controls.column.stacked"
 msgstr "Gestapelt"
 
-#: app/configurator/components/ui-helpers.ts:604
+#: app/configurator/components/field-i18n.ts:19
 msgid "controls.description"
 msgstr "Beschreibung hinzufügen"
 
@@ -316,41 +316,41 @@ msgstr "Beschreibung hinzufügen"
 #~ msgid "controls.dimension.none"
 #~ msgstr "Keine"
 
-#: app/charts/shared/chart-data-filters.tsx:217
+#: app/charts/shared/chart-data-filters.tsx:218
 msgid "controls.dimensionvalue.none"
 msgstr "Kein Filter"
 
-#: app/configurator/components/filters.tsx:464
+#: app/configurator/components/filters.tsx:480
 msgid "controls.filter.nb-elements"
 msgstr "{0} von {1}"
 
-#: app/configurator/components/filters.tsx:396
-#: app/configurator/components/filters.tsx:642
+#: app/configurator/components/filters.tsx:414
+#: app/configurator/components/filters.tsx:658
 msgid "controls.filter.select.all"
 msgstr "Alle auswählen"
 
-#: app/configurator/components/filters.tsx:403
-#: app/configurator/components/filters.tsx:640
+#: app/configurator/components/filters.tsx:421
+#: app/configurator/components/filters.tsx:656
 msgid "controls.filter.select.none"
 msgstr "Alle abwählen"
 
-#: app/configurator/components/filters.tsx:413
+#: app/configurator/components/filters.tsx:431
 msgid "controls.filters.select.filters"
 msgstr "Filter"
 
-#: app/configurator/components/filters.tsx:445
+#: app/configurator/components/filters.tsx:461
 msgid "controls.filters.select.refresh-colors"
 msgstr "Farben auffrischen"
 
-#: app/configurator/components/filters.tsx:427
+#: app/configurator/components/filters.tsx:445
 msgid "controls.filters.select.reset-colors"
 msgstr "Farben zurücksetzen"
 
-#: app/configurator/components/filters.tsx:420
+#: app/configurator/components/filters.tsx:438
 msgid "controls.filters.select.selected-filters"
 msgstr "Ausgewählte Filter"
 
-#: app/configurator/interactive-filters/editor-time-interval-brush.tsx:129
+#: app/configurator/interactive-filters/editor-time-interval-brush.tsx:128
 msgid "controls.filters.time.range"
 msgstr "Zeitspanne"
 
@@ -374,59 +374,68 @@ msgstr "Bitte eine Designoption oder Datendimension auswählen, um diese zu bear
 msgid "controls.hint.describing.chart"
 msgstr "Bitte ein Beschreibungsfeld auswählen, um dieses zu bearbeiten."
 
-#: app/configurator/components/ui-helpers.ts:672
+#: app/configurator/components/field-i18n.ts:87
 msgid "controls.imputation"
 msgstr "Imputationstyp"
 
-#: app/configurator/components/chart-options-selector.tsx:887
-#: app/configurator/components/ui-helpers.ts:684
+#: app/configurator/components/chart-options-selector.tsx:881
+#: app/configurator/components/field-i18n.ts:99
 msgid "controls.imputation.type.linear"
 msgstr "Lineare Interpolation"
 
-#: app/configurator/components/chart-options-selector.tsx:880
-#: app/configurator/components/chart-options-selector.tsx:892
-#: app/configurator/components/ui-helpers.ts:676
+#: app/configurator/components/chart-options-selector.tsx:874
+#: app/configurator/components/chart-options-selector.tsx:886
+#: app/configurator/components/field-i18n.ts:91
 msgid "controls.imputation.type.none"
 msgstr "-"
 
-#: app/configurator/components/chart-options-selector.tsx:882
-#: app/configurator/components/ui-helpers.ts:680
+#: app/configurator/components/chart-options-selector.tsx:876
+#: app/configurator/components/field-i18n.ts:95
 msgid "controls.imputation.type.zeros"
 msgstr "Nullen"
 
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:94
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:117
 msgid "controls.interactive.filters.dataFilter"
 msgstr "Datenfilter"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:285
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:104
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:97
+msgid "controls.interactive.filters.timeSlider"
+msgstr "Zeitschieber"
+
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:327
 msgid "controls.interactiveFilters.dataFilters.toggledataFilters"
 msgstr "Datenfilter anzeigen"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:73
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:77
 msgid "controls.interactiveFilters.legend.toggleInteractiveLegend"
 msgstr "Filterbare Legende anzeigen"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:213
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:222
 msgid "controls.interactiveFilters.time.noTimeDimension"
 msgstr "Keine Zeitdimension verfügbar!"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:187
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:197
 msgid "controls.interactiveFilters.time.toggleTimeFilter"
 msgstr "Zeitfilter anzeigen"
 
-#: app/configurator/components/ui-helpers.ts:720
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:263
+msgid "controls.interactiveFilters.time.toggleTimeSliderFilter"
+msgstr "Zeitschieber anzeigen"
+
+#: app/configurator/components/field-i18n.ts:135
 msgid "controls.language.english"
 msgstr "Englisch"
 
-#: app/configurator/components/ui-helpers.ts:728
+#: app/configurator/components/field-i18n.ts:143
 msgid "controls.language.french"
 msgstr "Französisch"
 
-#: app/configurator/components/ui-helpers.ts:724
+#: app/configurator/components/field-i18n.ts:139
 msgid "controls.language.german"
 msgstr "Deutsch"
 
-#: app/configurator/components/ui-helpers.ts:732
+#: app/configurator/components/field-i18n.ts:147
 msgid "controls.language.italian"
 msgstr "Italienisch"
 
@@ -435,15 +444,15 @@ msgstr "Italienisch"
 #~ msgid "controls.location"
 #~ msgstr "Standort"
 
-#: app/configurator/components/ui-helpers.ts:594
+#: app/configurator/components/field-i18n.ts:9
 msgid "controls.measure"
 msgstr "Messwert"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:314
+#: app/configurator/components/chart-controls/control-tab.tsx:312
 msgid "controls.option.isActive"
 msgstr "Ein"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:310
+#: app/configurator/components/chart-controls/control-tab.tsx:308
 msgid "controls.option.isNotActive"
 msgstr "Aus"
 
@@ -451,15 +460,15 @@ msgstr "Aus"
 #~ msgid "controls.option.none"
 #~ msgstr "Keine"
 
-#: app/configurator/components/chart-options-selector.tsx:781
+#: app/configurator/components/chart-options-selector.tsx:779
 msgid "controls.scale.type"
 msgstr "Skalierungstyp"
 
-#: app/components/form.tsx:563
+#: app/components/form.tsx:566
 msgid "controls.search.clear"
 msgstr "Suche zurücksetzen"
 
-#: app/configurator/components/chart-options-selector.tsx:347
+#: app/configurator/components/chart-options-selector.tsx:356
 msgid "controls.section.additional-information"
 msgstr "Zusätzliche Informationen"
 
@@ -471,7 +480,7 @@ msgstr "Diagramm-Einstellungen"
 msgid "controls.section.columns"
 msgstr "Spalten"
 
-#: app/configurator/table/table-chart-options.tsx:240
+#: app/configurator/table/table-chart-options.tsx:244
 msgid "controls.section.columnstyle"
 msgstr "Spaltenstil"
 
@@ -483,12 +492,12 @@ msgstr "Filter"
 msgid "controls.section.description"
 msgstr "Titel & Beschreibung"
 
-#: app/configurator/components/chart-options-selector.tsx:403
-#: app/configurator/components/chart-options-selector.tsx:407
-#: app/configurator/table/table-chart-options.tsx:310
+#: app/configurator/components/chart-options-selector.tsx:411
+#: app/configurator/components/chart-options-selector.tsx:415
 #: app/configurator/table/table-chart-options.tsx:314
-#: app/configurator/table/table-chart-options.tsx:334
+#: app/configurator/table/table-chart-options.tsx:318
 #: app/configurator/table/table-chart-options.tsx:338
+#: app/configurator/table/table-chart-options.tsx:342
 msgid "controls.section.filter"
 msgstr "Filter"
 
@@ -496,35 +505,35 @@ msgstr "Filter"
 msgid "controls.section.groups"
 msgstr "Gruppierungen"
 
-#: app/configurator/components/chart-options-selector.tsx:921
+#: app/configurator/components/chart-options-selector.tsx:915
 msgid "controls.section.imputation"
 msgstr "Fehlende Werte"
 
-#: app/configurator/components/chart-options-selector.tsx:926
+#: app/configurator/components/chart-options-selector.tsx:920
 msgid "controls.section.imputation.explanation"
 msgstr "Für diesen Diagrammtyp sollten fehlenden Werten Ersatzwerte zugewiesen werden. Entscheiden Sie sich für die Imputationslogik oder wechseln Sie zu einem anderen Diagrammtyp."
 
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:65
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:78
 msgid "controls.section.interactive.filters"
 msgstr "Interaktive Filter hinzufügen"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:104
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:117
 msgid "controls.section.interactiveFilters.dataFilters"
 msgstr "Datenfilter"
 
-#: app/configurator/components/chart-options-selector.tsx:356
+#: app/configurator/components/chart-options-selector.tsx:365
 msgid "controls.section.show-standard-error"
 msgstr "Standardfehler anzeigen"
 
-#: app/configurator/components/chart-options-selector.tsx:554
+#: app/configurator/components/chart-options-selector.tsx:557
 msgid "controls.section.sorting"
 msgstr "Sortieren"
 
-#: app/configurator/table/table-chart-options.tsx:491
+#: app/configurator/table/table-chart-options.tsx:482
 msgid "controls.section.tableSettings"
 msgstr "Tabelleneinstellungen"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:381
+#: app/configurator/table/table-chart-sorting-options.tsx:384
 msgid "controls.section.tableSorting"
 msgstr "Tabellensortierung"
 
@@ -533,32 +542,32 @@ msgid "controls.section.tableoptions"
 msgstr "Tabellenoptionen"
 
 #: app/configurator/components/chart-configurator.tsx:541
-#: app/configurator/components/chart-type-selector.tsx:139
+#: app/configurator/components/chart-type-selector.tsx:135
 #: app/configurator/table/table-chart-configurator.tsx:123
 msgid "controls.select.chart.type"
 msgstr "Diagrammtyp"
 
-#: app/configurator/components/chart-options-selector.tsx:455
+#: app/configurator/components/chart-options-selector.tsx:461
 msgid "controls.select.column.layout"
 msgstr "Spaltenstil"
 
-#: app/configurator/table/table-chart-options.tsx:245
+#: app/configurator/table/table-chart-options.tsx:249
 msgid "controls.select.columnStyle"
 msgstr "Spaltenstil"
 
-#: app/configurator/table/table-chart-options.tsx:460
+#: app/configurator/table/table-chart-options.tsx:457
 msgid "controls.select.columnStyle.barColorBackground"
 msgstr "Hintergrundfarbe"
 
-#: app/configurator/table/table-chart-options.tsx:451
+#: app/configurator/table/table-chart-options.tsx:449
 msgid "controls.select.columnStyle.barColorNegative"
 msgstr "Negative Balkenfarbe"
 
-#: app/configurator/table/table-chart-options.tsx:442
+#: app/configurator/table/table-chart-options.tsx:441
 msgid "controls.select.columnStyle.barColorPositive"
 msgstr "Positive Balkenfarbe"
 
-#: app/configurator/table/table-chart-options.tsx:469
+#: app/configurator/table/table-chart-options.tsx:465
 msgid "controls.select.columnStyle.barShowBackground"
 msgstr "Hintergrundfarbe anzeigen"
 
@@ -566,21 +575,21 @@ msgstr "Hintergrundfarbe anzeigen"
 msgid "controls.select.columnStyle.columnColor"
 msgstr "Spaltenfarbe"
 
-#: app/configurator/table/table-chart-options.tsx:405
+#: app/configurator/table/table-chart-options.tsx:406
 msgid "controls.select.columnStyle.textColor"
 msgstr "Schriftfarbe"
 
-#: app/configurator/table/table-chart-options.tsx:381
+#: app/configurator/table/table-chart-options.tsx:383
 msgid "controls.select.columnStyle.textStyle"
 msgstr "Schriftstil"
 
-#: app/configurator/components/chart-options-selector.tsx:208
+#: app/configurator/components/chart-options-selector.tsx:220
 msgid "controls.select.dimension"
 msgstr "Dimension auswählen"
 
-#: app/configurator/components/chart-options-selector.tsx:209
-#: app/configurator/components/chart-options-selector.tsx:644
-#: app/configurator/components/chart-options-selector.tsx:723
+#: app/configurator/components/chart-options-selector.tsx:221
+#: app/configurator/components/chart-options-selector.tsx:647
+#: app/configurator/components/chart-options-selector.tsx:725
 msgid "controls.select.measure"
 msgstr "Messwert auswählen"
 
@@ -591,99 +600,99 @@ msgstr "Messwert auswählen"
 #~ msgid "controls.select.optional"
 #~ msgstr "optional"
 
-#: app/configurator/components/filters.tsx:696
+#: app/configurator/components/filters.tsx:712
 msgid "controls.set-filters"
 msgstr "Ausgewählte Filter"
 
-#: app/configurator/components/filters.tsx:703
+#: app/configurator/components/filters.tsx:719
 msgid "controls.set-filters-caption"
 msgstr "Für beste Ergebnisse wählen Sie nicht mehr als 7 Werte für die Visualisierung aus"
 
-#: app/configurator/components/filters.tsx:735
+#: app/configurator/components/filters.tsx:751
 msgid "controls.set-values-apply"
 msgstr "Filter anwenden"
 
-#: app/configurator/components/chart-options-selector.tsx:636
+#: app/configurator/components/chart-options-selector.tsx:639
 msgid "controls.size"
 msgstr "Grösse"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:248
+#: app/configurator/table/table-chart-sorting-options.tsx:251
 msgid "controls.sorting.addDimension"
 msgstr "Dimension hinzufügen"
 
-#: app/configurator/components/chart-options-selector.tsx:506
+#: app/configurator/components/chart-options-selector.tsx:509
 msgid "controls.sorting.byAuto"
 msgstr ""
 
-#: app/configurator/components/chart-options-selector.tsx:500
-#: app/configurator/components/chart-options-selector.tsx:510
+#: app/configurator/components/chart-options-selector.tsx:503
+#: app/configurator/components/chart-options-selector.tsx:513
 msgid "controls.sorting.byDimensionLabel"
 msgstr "Name"
 
-#: app/configurator/components/ui-helpers.ts:632
-#: app/configurator/components/ui-helpers.ts:636
+#: app/configurator/components/field-i18n.ts:47
+#: app/configurator/components/field-i18n.ts:51
 msgid "controls.sorting.byDimensionLabel.ascending"
 msgstr "A → Z"
 
-#: app/configurator/components/ui-helpers.ts:640
-#: app/configurator/components/ui-helpers.ts:644
+#: app/configurator/components/field-i18n.ts:55
+#: app/configurator/components/field-i18n.ts:59
 msgid "controls.sorting.byDimensionLabel.descending"
 msgstr "Z → A"
 
-#: app/configurator/components/chart-options-selector.tsx:502
+#: app/configurator/components/chart-options-selector.tsx:505
 msgid "controls.sorting.byMeasure"
 msgstr "Messwert"
 
-#: app/configurator/components/ui-helpers.ts:664
+#: app/configurator/components/field-i18n.ts:79
 msgid "controls.sorting.byMeasure.ascending"
 msgstr "1 → 9"
 
-#: app/configurator/components/ui-helpers.ts:668
+#: app/configurator/components/field-i18n.ts:83
 msgid "controls.sorting.byMeasure.descending"
 msgstr "9 → 1"
 
-#: app/configurator/components/chart-options-selector.tsx:504
+#: app/configurator/components/chart-options-selector.tsx:507
 msgid "controls.sorting.byTotalSize"
 msgstr "Gesamtgrösse"
 
-#: app/configurator/components/ui-helpers.ts:648
+#: app/configurator/components/field-i18n.ts:63
 msgid "controls.sorting.byTotalSize.ascending"
 msgstr "Kleinste zuerst"
 
-#: app/configurator/components/ui-helpers.ts:660
+#: app/configurator/components/field-i18n.ts:75
 msgid "controls.sorting.byTotalSize.largestBottom"
 msgstr "Grösste unten"
 
-#: app/configurator/components/ui-helpers.ts:652
+#: app/configurator/components/field-i18n.ts:67
 msgid "controls.sorting.byTotalSize.largestFirst"
 msgstr "Grösste zuerst"
 
-#: app/configurator/components/ui-helpers.ts:656
+#: app/configurator/components/field-i18n.ts:71
 msgid "controls.sorting.byTotalSize.largestTop"
 msgstr "Kleinste unten"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:162
+#: app/configurator/table/table-chart-sorting-options.tsx:161
 msgid "controls.sorting.removeOption"
 msgstr "Sortierung entfernen"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:214
+#: app/configurator/table/table-chart-sorting-options.tsx:213
 msgid "controls.sorting.selectDimension"
 msgstr "Wählen Sie eine Dimension aus …"
 
-#: app/configurator/components/ui-helpers.ts:628
-#: app/configurator/table/table-chart-sorting-options.tsx:319
+#: app/configurator/components/field-i18n.ts:43
+#: app/configurator/table/table-chart-sorting-options.tsx:322
 msgid "controls.sorting.sortBy"
 msgstr "Sortieren nach"
 
-#: app/configurator/components/chart-type-selector.tsx:144
+#: app/configurator/components/chart-type-selector.tsx:140
 msgid "controls.switch.chart.type"
 msgstr "Wechseln Sie zu einem anderen Diagrammtyp unter Beibehaltung der meisten Filtereinstellungen"
 
-#: app/configurator/table/table-chart-options.tsx:217
+#: app/configurator/table/table-chart-options.tsx:221
 msgid "controls.table.column.group"
 msgstr "Gruppieren"
 
-#: app/configurator/table/table-chart-options.tsx:227
+#: app/configurator/table/table-chart-options.tsx:231
 msgid "controls.table.column.hide"
 msgstr "Spalte ausblenden"
 
@@ -695,11 +704,11 @@ msgstr "Einstellungen"
 msgid "controls.table.sorting"
 msgstr "Sortierung"
 
-#: app/configurator/table/table-chart-options.tsx:495
+#: app/configurator/table/table-chart-options.tsx:486
 msgid "controls.tableSettings.showSearch"
 msgstr "Suche anzeigen"
 
-#: app/configurator/components/ui-helpers.ts:603
+#: app/configurator/components/field-i18n.ts:18
 msgid "controls.title"
 msgstr "Titel hinzufügen"
 
@@ -727,11 +736,11 @@ msgstr "Dieses Diagramm verwendet keine vertrauenswürdige Datenquelle."
 msgid "dataset-preview.back-to-results"
 msgstr "Zurück zu den Datensätzen"
 
-#: app/components/chart-footnotes.tsx:111
+#: app/components/chart-footnotes.tsx:113
 msgid "dataset.footnotes.dataset"
 msgstr "Datensatz"
 
-#: app/components/chart-footnotes.tsx:132
+#: app/components/chart-footnotes.tsx:134
 msgid "dataset.footnotes.updated"
 msgstr "Neuestes Update"
 
@@ -739,7 +748,7 @@ msgstr "Neuestes Update"
 msgid "dataset.hasImputedValues"
 msgstr "Einige Daten in diesem Datensatz fehlen und wurden interpoliert, um die Lücken zu füllen."
 
-#: app/configurator/components/dataset-browse.tsx:418
+#: app/configurator/components/dataset-browse.tsx:427
 msgid "dataset.includeDrafts"
 msgstr "Entwürfe einschließen"
 
@@ -755,7 +764,7 @@ msgstr "Kontaktstellen"
 msgid "dataset.metadata.furtherinformation"
 msgstr "Weitere Informationen"
 
-#: app/components/chart-footnotes.tsx:198
+#: app/components/chart-footnotes.tsx:200
 #: app/configurator/components/dataset-metadata.tsx:118
 msgid "dataset.metadata.learnmore"
 msgstr "Erfahren Sie mehr über diesen Datensatz"
@@ -768,21 +777,21 @@ msgstr "Quelle"
 msgid "dataset.metadata.version"
 msgstr "Version"
 
-#: app/configurator/components/dataset-browse.tsx:347
+#: app/configurator/components/dataset-browse.tsx:351
 msgid "dataset.order.newest"
 msgstr "Neueste"
 
-#: app/configurator/components/dataset-browse.tsx:339
+#: app/configurator/components/dataset-browse.tsx:343
 msgid "dataset.order.relevance"
 msgstr "Relevanz"
 
-#: app/configurator/components/dataset-browse.tsx:343
+#: app/configurator/components/dataset-browse.tsx:347
 msgid "dataset.order.title"
 msgstr "Titel"
 
 #: app/components/chart-preview.tsx:85
 #: app/components/chart-published.tsx:126
-#: app/configurator/components/dataset-preview.tsx:53
+#: app/configurator/components/dataset-preview.tsx:109
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Achtung, dieser Datensatz ist im Entwurfs-Stadium.<0/><1>Diese Grafik nicht für Berichte verwenden.</1>"
 
@@ -790,27 +799,27 @@ msgstr "Achtung, dieser Datensatz ist im Entwurfs-Stadium.<0/><1>Diese Grafik ni
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Achtung, dieser Datensatz ist abgelaufen.<0/><1>Diese Grafik nicht für Berichte verwenden.</1>"
 
-#: app/configurator/components/dataset-browse.tsx:406
+#: app/configurator/components/dataset-browse.tsx:415
 msgid "dataset.results"
 msgstr "{0, plural, zero {Keine Ergebnisse} one {# Ergebnis} other {# Ergebnisse}}"
 
-#: app/configurator/components/dataset-browse.tsx:351
+#: app/configurator/components/dataset-browse.tsx:355
 msgid "dataset.search.label"
 msgstr "Suchen"
 
-#: app/configurator/components/dataset-browse.tsx:356
+#: app/configurator/components/dataset-browse.tsx:360
 msgid "dataset.search.placeholder"
 msgstr ""
 
-#: app/configurator/components/dataset-browse.tsx:437
+#: app/configurator/components/dataset-browse.tsx:446
 msgid "dataset.sortby"
 msgstr "Sortieren nach"
 
-#: app/configurator/components/dataset-browse.tsx:1142
+#: app/configurator/components/dataset-browse.tsx:1152
 msgid "dataset.tag.draft"
 msgstr "Entwurf"
 
-#: app/configurator/components/dataset-preview.tsx:126
+#: app/configurator/components/dataset-preview.tsx:171
 msgid "datatable.showing.first.rows"
 msgstr "Die ersten 10 Zeilen werden angezeigt"
 
@@ -874,7 +883,7 @@ msgstr "Sie können diese Visualisierung teilen oder sie einbetten. Zudem könne
 msgid "hint.loading.data"
 msgstr "Lade Daten …"
 
-#: app/configurator/components/chart-type-selector.tsx:157
+#: app/configurator/components/chart-type-selector.tsx:153
 msgid "hint.no.visualization.with.dataset"
 msgstr "Mit dem ausgewählten Datensatz kann keine Visualisierung erstellt werden."
 
@@ -898,11 +907,11 @@ msgstr "Negative Werte"
 msgid "hint.publication.success"
 msgstr "Die Visualisierung ist jetzt veröffentlicht. Sie können sie teilen oder einbetten, indem Sie die URL kopieren oder das Menü unten verwenden."
 
-#: app/charts/shared/chart-data-filters.tsx:82
+#: app/charts/shared/chart-data-filters.tsx:83
 msgid "interactive.data.filters.hide"
 msgstr "Filter ausblenden"
 
-#: app/charts/shared/chart-data-filters.tsx:84
+#: app/charts/shared/chart-data-filters.tsx:85
 msgid "interactive.data.filters.show"
 msgstr "Filter anzeigen"
 
@@ -915,19 +924,19 @@ msgstr "Logo der Schweizerischen Eidgenossenschaft"
 #~ msgid "metadata.dataset"
 #~ msgstr "Datensatz"
 
-#: app/components/chart-footnotes.tsx:217
+#: app/components/chart-footnotes.tsx:219
 msgid "metadata.link.created.with.visualize"
 msgstr "Erstellt mit visualize.admin.ch"
 
-#: app/components/chart-footnotes.tsx:143
+#: app/components/chart-footnotes.tsx:145
 msgid "metadata.source"
 msgstr "Quelle"
 
-#: app/components/chart-footnotes.tsx:181
+#: app/components/chart-footnotes.tsx:183
 msgid "metadata.switch.chart"
 msgstr "Zur Diagrammansicht wechseln"
 
-#: app/components/chart-footnotes.tsx:183
+#: app/components/chart-footnotes.tsx:185
 msgid "metadata.switch.table"
 msgstr "Zur Tabellenansicht wechseln"
 
@@ -967,7 +976,7 @@ msgstr "Hier ist eine Visualisierung, die ich mit visualize.admin.ch erstellt ha
 msgid "publication.share.mail.subject"
 msgstr "visualize.admin.ch"
 
-#: app/configurator/components/filters.tsx:616
+#: app/configurator/components/filters.tsx:632
 msgid "select.controls.filters.search"
 msgstr "Suche"
 
@@ -983,8 +992,8 @@ msgstr "Passen Sie Ihre Visualisierung an, indem Sie die Filter- und Farbsegment
 msgid "table.column.no"
 msgstr "Spalte {0}"
 
-#: app/components/chart-footnotes.tsx:113
-#: app/components/chart-footnotes.tsx:134
-#: app/components/chart-footnotes.tsx:145
+#: app/components/chart-footnotes.tsx:115
+#: app/components/chart-footnotes.tsx:136
+#: app/components/chart-footnotes.tsx:147
 msgid "typography.colon"
 msgstr ": "
diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
index c1c182fa9..bd1321746 100644
--- a/app/locales/en/messages.po
+++ b/app/locales/en/messages.po
@@ -29,8 +29,8 @@ msgstr "Move filter down"
 msgid "Move filter up"
 msgstr "Move filter up"
 
-#: app/configurator/components/dataset-browse.tsx:1027
-#: app/configurator/components/filters.tsx:714
+#: app/configurator/components/dataset-browse.tsx:1037
+#: app/configurator/components/filters.tsx:730
 msgid "No results"
 msgstr "No results"
 
@@ -42,15 +42,15 @@ msgstr "[ No Description ]"
 msgid "annotation.add.title"
 msgstr "[ No Title ]"
 
-#: app/configurator/components/dataset-browse.tsx:958
+#: app/configurator/components/dataset-browse.tsx:968
 msgid "browse-panel.organizations"
 msgstr "Organizations"
 
-#: app/configurator/components/dataset-browse.tsx:940
+#: app/configurator/components/dataset-browse.tsx:950
 msgid "browse-panel.themes"
 msgstr "Categories"
 
-#: app/configurator/components/dataset-preview.tsx:77
+#: app/configurator/components/dataset-preview.tsx:128
 msgid "browse.dataset.create-visualization"
 msgstr "Start a visualization"
 
@@ -120,7 +120,7 @@ msgstr "Publish this visualization"
 msgid "button.share"
 msgstr "Share"
 
-#: app/configurator/components/ui-helpers.ts:620
+#: app/configurator/components/field-i18n.ts:35
 msgid "chart.map.layers.area"
 msgstr "Areas"
 
@@ -145,16 +145,16 @@ msgstr "Areas"
 #~ msgstr "Quantize (equal intervals)"
 
 #: app/configurator/components/chart-configurator.tsx:696
-#: app/configurator/components/chart-options-selector.tsx:996
-#: app/configurator/components/ui-helpers.ts:616
+#: app/configurator/components/chart-options-selector.tsx:989
+#: app/configurator/components/field-i18n.ts:31
 msgid "chart.map.layers.base"
 msgstr "Map Display"
 
-#: app/configurator/components/chart-options-selector.tsx:1000
+#: app/configurator/components/chart-options-selector.tsx:993
 msgid "chart.map.layers.base.show"
 msgstr "Show Worldmap"
 
-#: app/configurator/components/chart-options-selector.tsx:1009
+#: app/configurator/components/chart-options-selector.tsx:1001
 msgid "chart.map.layers.base.view.locked"
 msgstr "Locked view"
 
@@ -163,7 +163,7 @@ msgstr "Locked view"
 #~ msgid "chart.map.layers.show"
 #~ msgstr "Show layer"
 
-#: app/configurator/components/ui-helpers.ts:624
+#: app/configurator/components/field-i18n.ts:39
 msgid "chart.map.layers.symbol"
 msgstr "Symbols"
 
@@ -179,81 +179,81 @@ msgstr "Compact view"
 msgid "chart.table.number.of.lines"
 msgstr "Total number of lines:"
 
-#: app/configurator/table/table-chart-options.tsx:196
+#: app/configurator/table/table-chart-options.tsx:190
 msgid "columnStyle.bar"
 msgstr "Bar Chart"
 
-#: app/configurator/table/table-chart-options.tsx:182
+#: app/configurator/table/table-chart-options.tsx:200
 msgid "columnStyle.categories"
 msgstr "Categories"
 
-#: app/configurator/table/table-chart-options.tsx:192
+#: app/configurator/table/table-chart-options.tsx:186
 msgid "columnStyle.heatmap"
 msgstr "Heat Map"
 
-#: app/configurator/table/table-chart-options.tsx:178
-#: app/configurator/table/table-chart-options.tsx:188
+#: app/configurator/table/table-chart-options.tsx:182
+#: app/configurator/table/table-chart-options.tsx:196
 msgid "columnStyle.text"
 msgstr "Text"
 
-#: app/configurator/table/table-chart-options.tsx:395
+#: app/configurator/table/table-chart-options.tsx:397
 msgid "columnStyle.textStyle.bold"
 msgstr "Bold"
 
-#: app/configurator/table/table-chart-options.tsx:388
+#: app/configurator/table/table-chart-options.tsx:390
 msgid "columnStyle.textStyle.regular"
 msgstr "Regular"
 
-#: app/configurator/interactive-filters/editor-time-brush.tsx:173
+#: app/configurator/interactive-filters/editor-time-brush.tsx:168
 msgid "controls..interactiveFilters.time.defaultSettings"
 msgstr "Default Settings"
 
-#: app/configurator/components/ui-helpers.ts:590
+#: app/configurator/components/field-i18n.ts:5
 msgid "controls.axis.horizontal"
 msgstr "Horizontal Axis"
 
-#: app/configurator/components/ui-helpers.ts:598
+#: app/configurator/components/field-i18n.ts:13
 msgid "controls.axis.vertical"
 msgstr "Vertical Axis"
 
-#: app/configurator/components/ui-helpers.ts:700
+#: app/configurator/components/field-i18n.ts:115
 msgid "controls.chart.type.area"
 msgstr "Areas"
 
-#: app/configurator/components/ui-helpers.ts:692
+#: app/configurator/components/field-i18n.ts:107
 msgid "controls.chart.type.bar"
 msgstr "Bars"
 
-#: app/configurator/components/ui-helpers.ts:688
+#: app/configurator/components/field-i18n.ts:103
 msgid "controls.chart.type.column"
 msgstr "Columns"
 
-#: app/configurator/components/ui-helpers.ts:696
+#: app/configurator/components/field-i18n.ts:111
 msgid "controls.chart.type.line"
 msgstr "Lines"
 
-#: app/configurator/components/ui-helpers.ts:716
+#: app/configurator/components/field-i18n.ts:131
 msgid "controls.chart.type.map"
 msgstr "Map"
 
-#: app/configurator/components/ui-helpers.ts:708
+#: app/configurator/components/field-i18n.ts:123
 msgid "controls.chart.type.pie"
 msgstr "Pie"
 
-#: app/configurator/components/ui-helpers.ts:704
+#: app/configurator/components/field-i18n.ts:119
 msgid "controls.chart.type.scatterplot"
 msgstr "Scatterplot"
 
-#: app/configurator/components/ui-helpers.ts:712
+#: app/configurator/components/field-i18n.ts:127
 msgid "controls.chart.type.table"
 msgstr "Table"
 
-#: app/configurator/components/chart-options-selector.tsx:718
-#: app/configurator/components/ui-helpers.ts:602
+#: app/configurator/components/chart-options-selector.tsx:720
+#: app/configurator/components/field-i18n.ts:17
 msgid "controls.color"
 msgstr "Color"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:47
+#: app/configurator/components/chart-controls/control-tab.tsx:45
 msgid "controls.color.add"
 msgstr "Add ..."
 
@@ -261,52 +261,52 @@ msgstr "Add ..."
 msgid "controls.color.opacity"
 msgstr "Opacity"
 
-#: app/configurator/components/chart-controls/color-palette.tsx:98
-#: app/configurator/components/chart-controls/color-ramp.tsx:120
+#: app/configurator/components/chart-controls/color-palette.tsx:112
+#: app/configurator/components/chart-controls/color-ramp.tsx:115
 msgid "controls.color.palette"
 msgstr "Color palette"
 
-#: app/configurator/components/chart-controls/color-ramp.tsx:160
+#: app/configurator/components/chart-controls/color-ramp.tsx:155
 msgid "controls.color.palette.diverging"
 msgstr "Diverging"
 
-#: app/configurator/components/chart-controls/color-palette.tsx:247
+#: app/configurator/components/chart-controls/color-palette.tsx:261
 msgid "controls.color.palette.reset"
 msgstr "Reset color palette"
 
-#: app/configurator/components/chart-controls/color-ramp.tsx:144
+#: app/configurator/components/chart-controls/color-ramp.tsx:139
 msgid "controls.color.palette.sequential"
 msgstr "Sequential"
 
-#: app/configurator/components/chart-options-selector.tsx:840
+#: app/configurator/components/chart-options-selector.tsx:836
 msgid "controls.color.scale.discretization.jenks"
 msgstr "Jenks (natural breaks)"
 
-#: app/configurator/components/chart-options-selector.tsx:833
+#: app/configurator/components/chart-options-selector.tsx:829
 msgid "controls.color.scale.discretization.quantiles"
 msgstr "Quantiles (equal distribution of values)"
 
-#: app/configurator/components/chart-options-selector.tsx:826
+#: app/configurator/components/chart-options-selector.tsx:822
 msgid "controls.color.scale.discretization.quantize"
 msgstr "Quantize (equal intervals)"
 
-#: app/configurator/components/chart-options-selector.tsx:818
+#: app/configurator/components/chart-options-selector.tsx:814
 msgid "controls.color.scale.interpolation"
 msgstr "Interpolation"
 
-#: app/configurator/components/chart-options-selector.tsx:851
+#: app/configurator/components/chart-options-selector.tsx:846
 msgid "controls.color.scale.number.of.classes"
 msgstr "Number of classes"
 
-#: app/configurator/components/chart-options-selector.tsx:788
+#: app/configurator/components/chart-options-selector.tsx:786
 msgid "controls.color.scale.type.continuous"
 msgstr "Continuous"
 
-#: app/configurator/components/chart-options-selector.tsx:800
+#: app/configurator/components/chart-options-selector.tsx:797
 msgid "controls.color.scale.type.discrete"
 msgstr "Discrete"
 
-#: app/configurator/components/chart-options-selector.tsx:738
+#: app/configurator/components/chart-options-selector.tsx:739
 msgid "controls.color.select"
 msgstr "Select a color"
 
@@ -314,15 +314,15 @@ msgstr "Select a color"
 msgid "controls.colorpicker.open"
 msgstr "Open Color Picker"
 
-#: app/configurator/components/ui-helpers.ts:612
+#: app/configurator/components/field-i18n.ts:27
 msgid "controls.column.grouped"
 msgstr "Grouped"
 
-#: app/configurator/components/ui-helpers.ts:608
+#: app/configurator/components/field-i18n.ts:23
 msgid "controls.column.stacked"
 msgstr "Stacked"
 
-#: app/configurator/components/ui-helpers.ts:604
+#: app/configurator/components/field-i18n.ts:19
 msgid "controls.description"
 msgstr "Description"
 
@@ -336,41 +336,41 @@ msgstr "Description"
 #~ msgid "controls.dimension.none"
 #~ msgstr "None"
 
-#: app/charts/shared/chart-data-filters.tsx:217
+#: app/charts/shared/chart-data-filters.tsx:218
 msgid "controls.dimensionvalue.none"
 msgstr "No Filter"
 
-#: app/configurator/components/filters.tsx:464
+#: app/configurator/components/filters.tsx:480
 msgid "controls.filter.nb-elements"
 msgstr "{0} of {1}"
 
-#: app/configurator/components/filters.tsx:396
-#: app/configurator/components/filters.tsx:642
+#: app/configurator/components/filters.tsx:414
+#: app/configurator/components/filters.tsx:658
 msgid "controls.filter.select.all"
 msgstr "Select all"
 
-#: app/configurator/components/filters.tsx:403
-#: app/configurator/components/filters.tsx:640
+#: app/configurator/components/filters.tsx:421
+#: app/configurator/components/filters.tsx:656
 msgid "controls.filter.select.none"
 msgstr "Select none"
 
-#: app/configurator/components/filters.tsx:413
+#: app/configurator/components/filters.tsx:431
 msgid "controls.filters.select.filters"
 msgstr "Filters"
 
-#: app/configurator/components/filters.tsx:445
+#: app/configurator/components/filters.tsx:461
 msgid "controls.filters.select.refresh-colors"
 msgstr "Refresh colors"
 
-#: app/configurator/components/filters.tsx:427
+#: app/configurator/components/filters.tsx:445
 msgid "controls.filters.select.reset-colors"
 msgstr "Reset colors"
 
-#: app/configurator/components/filters.tsx:420
+#: app/configurator/components/filters.tsx:438
 msgid "controls.filters.select.selected-filters"
 msgstr "Selected filters"
 
-#: app/configurator/interactive-filters/editor-time-interval-brush.tsx:129
+#: app/configurator/interactive-filters/editor-time-interval-brush.tsx:128
 msgid "controls.filters.time.range"
 msgstr "Time Range"
 
@@ -394,59 +394,68 @@ msgstr "Select a design element or a data dimension to modify its options."
 msgid "controls.hint.describing.chart"
 msgstr "Select an annotation field to modify its content."
 
-#: app/configurator/components/ui-helpers.ts:672
+#: app/configurator/components/field-i18n.ts:87
 msgid "controls.imputation"
 msgstr "Imputation type"
 
-#: app/configurator/components/chart-options-selector.tsx:887
-#: app/configurator/components/ui-helpers.ts:684
+#: app/configurator/components/chart-options-selector.tsx:881
+#: app/configurator/components/field-i18n.ts:99
 msgid "controls.imputation.type.linear"
 msgstr "Linear interpolation"
 
-#: app/configurator/components/chart-options-selector.tsx:880
-#: app/configurator/components/chart-options-selector.tsx:892
-#: app/configurator/components/ui-helpers.ts:676
+#: app/configurator/components/chart-options-selector.tsx:874
+#: app/configurator/components/chart-options-selector.tsx:886
+#: app/configurator/components/field-i18n.ts:91
 msgid "controls.imputation.type.none"
 msgstr "-"
 
-#: app/configurator/components/chart-options-selector.tsx:882
-#: app/configurator/components/ui-helpers.ts:680
+#: app/configurator/components/chart-options-selector.tsx:876
+#: app/configurator/components/field-i18n.ts:95
 msgid "controls.imputation.type.zeros"
 msgstr "Zeros"
 
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:94
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:117
 msgid "controls.interactive.filters.dataFilter"
 msgstr "Data Filters"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:285
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:104
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:97
+msgid "controls.interactive.filters.timeSlider"
+msgstr "Time slider"
+
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:327
 msgid "controls.interactiveFilters.dataFilters.toggledataFilters"
 msgstr "Show data filters"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:73
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:77
 msgid "controls.interactiveFilters.legend.toggleInteractiveLegend"
 msgstr "Show legend filter"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:213
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:222
 msgid "controls.interactiveFilters.time.noTimeDimension"
 msgstr "There is no time dimension!"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:187
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:197
 msgid "controls.interactiveFilters.time.toggleTimeFilter"
 msgstr "Show time filter"
 
-#: app/configurator/components/ui-helpers.ts:720
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:263
+msgid "controls.interactiveFilters.time.toggleTimeSliderFilter"
+msgstr "Show time slider"
+
+#: app/configurator/components/field-i18n.ts:135
 msgid "controls.language.english"
 msgstr "English"
 
-#: app/configurator/components/ui-helpers.ts:728
+#: app/configurator/components/field-i18n.ts:143
 msgid "controls.language.french"
 msgstr "French"
 
-#: app/configurator/components/ui-helpers.ts:724
+#: app/configurator/components/field-i18n.ts:139
 msgid "controls.language.german"
 msgstr "German"
 
-#: app/configurator/components/ui-helpers.ts:732
+#: app/configurator/components/field-i18n.ts:147
 msgid "controls.language.italian"
 msgstr "Italian"
 
@@ -455,7 +464,7 @@ msgstr "Italian"
 #~ msgid "controls.location"
 #~ msgstr "Location"
 
-#: app/configurator/components/ui-helpers.ts:594
+#: app/configurator/components/field-i18n.ts:9
 msgid "controls.measure"
 msgstr "Measure"
 
@@ -463,23 +472,23 @@ msgstr "Measure"
 #~ msgid "controls.none"
 #~ msgstr "None"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:314
+#: app/configurator/components/chart-controls/control-tab.tsx:312
 msgid "controls.option.isActive"
 msgstr "On"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:310
+#: app/configurator/components/chart-controls/control-tab.tsx:308
 msgid "controls.option.isNotActive"
 msgstr "Off"
 
-#: app/configurator/components/chart-options-selector.tsx:781
+#: app/configurator/components/chart-options-selector.tsx:779
 msgid "controls.scale.type"
 msgstr "Scale type"
 
-#: app/components/form.tsx:563
+#: app/components/form.tsx:566
 msgid "controls.search.clear"
 msgstr "Clear search field"
 
-#: app/configurator/components/chart-options-selector.tsx:347
+#: app/configurator/components/chart-options-selector.tsx:356
 msgid "controls.section.additional-information"
 msgstr "Additional information"
 
@@ -491,7 +500,7 @@ msgstr "Chart Options"
 msgid "controls.section.columns"
 msgstr "Columns"
 
-#: app/configurator/table/table-chart-options.tsx:240
+#: app/configurator/table/table-chart-options.tsx:244
 msgid "controls.section.columnstyle"
 msgstr "Column Style"
 
@@ -503,12 +512,12 @@ msgstr "Filters"
 msgid "controls.section.description"
 msgstr "Title & Description"
 
-#: app/configurator/components/chart-options-selector.tsx:403
-#: app/configurator/components/chart-options-selector.tsx:407
-#: app/configurator/table/table-chart-options.tsx:310
+#: app/configurator/components/chart-options-selector.tsx:411
+#: app/configurator/components/chart-options-selector.tsx:415
 #: app/configurator/table/table-chart-options.tsx:314
-#: app/configurator/table/table-chart-options.tsx:334
+#: app/configurator/table/table-chart-options.tsx:318
 #: app/configurator/table/table-chart-options.tsx:338
+#: app/configurator/table/table-chart-options.tsx:342
 msgid "controls.section.filter"
 msgstr "Filter"
 
@@ -516,35 +525,35 @@ msgstr "Filter"
 msgid "controls.section.groups"
 msgstr "Groups"
 
-#: app/configurator/components/chart-options-selector.tsx:921
+#: app/configurator/components/chart-options-selector.tsx:915
 msgid "controls.section.imputation"
 msgstr "Missing values"
 
-#: app/configurator/components/chart-options-selector.tsx:926
+#: app/configurator/components/chart-options-selector.tsx:920
 msgid "controls.section.imputation.explanation"
 msgstr "For this chart type, replacement values should be assigned to missing values. Decide on the imputation logic or switch to another chart type."
 
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:65
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:78
 msgid "controls.section.interactive.filters"
 msgstr "Interactive Filters"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:104
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:117
 msgid "controls.section.interactiveFilters.dataFilters"
 msgstr "Data Filters"
 
-#: app/configurator/components/chart-options-selector.tsx:356
+#: app/configurator/components/chart-options-selector.tsx:365
 msgid "controls.section.show-standard-error"
 msgstr "Show standard error"
 
-#: app/configurator/components/chart-options-selector.tsx:554
+#: app/configurator/components/chart-options-selector.tsx:557
 msgid "controls.section.sorting"
 msgstr "Sort"
 
-#: app/configurator/table/table-chart-options.tsx:491
+#: app/configurator/table/table-chart-options.tsx:482
 msgid "controls.section.tableSettings"
 msgstr "Table Settings"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:381
+#: app/configurator/table/table-chart-sorting-options.tsx:384
 msgid "controls.section.tableSorting"
 msgstr "Table Sorting"
 
@@ -553,32 +562,32 @@ msgid "controls.section.tableoptions"
 msgstr "Table Options"
 
 #: app/configurator/components/chart-configurator.tsx:541
-#: app/configurator/components/chart-type-selector.tsx:139
+#: app/configurator/components/chart-type-selector.tsx:135
 #: app/configurator/table/table-chart-configurator.tsx:123
 msgid "controls.select.chart.type"
 msgstr "Chart Type"
 
-#: app/configurator/components/chart-options-selector.tsx:455
+#: app/configurator/components/chart-options-selector.tsx:461
 msgid "controls.select.column.layout"
 msgstr "Column layout"
 
-#: app/configurator/table/table-chart-options.tsx:245
+#: app/configurator/table/table-chart-options.tsx:249
 msgid "controls.select.columnStyle"
 msgstr "Column Style"
 
-#: app/configurator/table/table-chart-options.tsx:460
+#: app/configurator/table/table-chart-options.tsx:457
 msgid "controls.select.columnStyle.barColorBackground"
 msgstr "Background color"
 
-#: app/configurator/table/table-chart-options.tsx:451
+#: app/configurator/table/table-chart-options.tsx:449
 msgid "controls.select.columnStyle.barColorNegative"
 msgstr "Negative bar color"
 
-#: app/configurator/table/table-chart-options.tsx:442
+#: app/configurator/table/table-chart-options.tsx:441
 msgid "controls.select.columnStyle.barColorPositive"
 msgstr "Positive bar color"
 
-#: app/configurator/table/table-chart-options.tsx:469
+#: app/configurator/table/table-chart-options.tsx:465
 msgid "controls.select.columnStyle.barShowBackground"
 msgstr "Show bar background"
 
@@ -586,21 +595,21 @@ msgstr "Show bar background"
 msgid "controls.select.columnStyle.columnColor"
 msgstr "Column Color"
 
-#: app/configurator/table/table-chart-options.tsx:405
+#: app/configurator/table/table-chart-options.tsx:406
 msgid "controls.select.columnStyle.textColor"
 msgstr "Text Color"
 
-#: app/configurator/table/table-chart-options.tsx:381
+#: app/configurator/table/table-chart-options.tsx:383
 msgid "controls.select.columnStyle.textStyle"
 msgstr "Text Style"
 
-#: app/configurator/components/chart-options-selector.tsx:208
+#: app/configurator/components/chart-options-selector.tsx:220
 msgid "controls.select.dimension"
 msgstr "Select a dimension"
 
-#: app/configurator/components/chart-options-selector.tsx:209
-#: app/configurator/components/chart-options-selector.tsx:644
-#: app/configurator/components/chart-options-selector.tsx:723
+#: app/configurator/components/chart-options-selector.tsx:221
+#: app/configurator/components/chart-options-selector.tsx:647
+#: app/configurator/components/chart-options-selector.tsx:725
 msgid "controls.select.measure"
 msgstr "Select a measure"
 
@@ -611,99 +620,99 @@ msgstr "Select a measure"
 #~ msgid "controls.select.optional"
 #~ msgstr "optional"
 
-#: app/configurator/components/filters.tsx:696
+#: app/configurator/components/filters.tsx:712
 msgid "controls.set-filters"
 msgstr "Set filters"
 
-#: app/configurator/components/filters.tsx:703
+#: app/configurator/components/filters.tsx:719
 msgid "controls.set-filters-caption"
 msgstr "For best results, do not select more than 7 values in the visualization."
 
-#: app/configurator/components/filters.tsx:735
+#: app/configurator/components/filters.tsx:751
 msgid "controls.set-values-apply"
 msgstr "Apply filters"
 
-#: app/configurator/components/chart-options-selector.tsx:636
+#: app/configurator/components/chart-options-selector.tsx:639
 msgid "controls.size"
 msgstr "Size"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:248
+#: app/configurator/table/table-chart-sorting-options.tsx:251
 msgid "controls.sorting.addDimension"
 msgstr "Add dimension"
 
-#: app/configurator/components/chart-options-selector.tsx:506
+#: app/configurator/components/chart-options-selector.tsx:509
 msgid "controls.sorting.byAuto"
 msgstr "Automatic"
 
-#: app/configurator/components/chart-options-selector.tsx:500
-#: app/configurator/components/chart-options-selector.tsx:510
+#: app/configurator/components/chart-options-selector.tsx:503
+#: app/configurator/components/chart-options-selector.tsx:513
 msgid "controls.sorting.byDimensionLabel"
 msgstr "Name"
 
-#: app/configurator/components/ui-helpers.ts:632
-#: app/configurator/components/ui-helpers.ts:636
+#: app/configurator/components/field-i18n.ts:47
+#: app/configurator/components/field-i18n.ts:51
 msgid "controls.sorting.byDimensionLabel.ascending"
 msgstr "A → Z"
 
-#: app/configurator/components/ui-helpers.ts:640
-#: app/configurator/components/ui-helpers.ts:644
+#: app/configurator/components/field-i18n.ts:55
+#: app/configurator/components/field-i18n.ts:59
 msgid "controls.sorting.byDimensionLabel.descending"
 msgstr "Z → A"
 
-#: app/configurator/components/chart-options-selector.tsx:502
+#: app/configurator/components/chart-options-selector.tsx:505
 msgid "controls.sorting.byMeasure"
 msgstr "Measure"
 
-#: app/configurator/components/ui-helpers.ts:664
+#: app/configurator/components/field-i18n.ts:79
 msgid "controls.sorting.byMeasure.ascending"
 msgstr "1 → 9"
 
-#: app/configurator/components/ui-helpers.ts:668
+#: app/configurator/components/field-i18n.ts:83
 msgid "controls.sorting.byMeasure.descending"
 msgstr "9 → 1"
 
-#: app/configurator/components/chart-options-selector.tsx:504
+#: app/configurator/components/chart-options-selector.tsx:507
 msgid "controls.sorting.byTotalSize"
 msgstr "Total size"
 
-#: app/configurator/components/ui-helpers.ts:648
+#: app/configurator/components/field-i18n.ts:63
 msgid "controls.sorting.byTotalSize.ascending"
 msgstr "Largest last"
 
-#: app/configurator/components/ui-helpers.ts:660
+#: app/configurator/components/field-i18n.ts:75
 msgid "controls.sorting.byTotalSize.largestBottom"
 msgstr "Ascending"
 
-#: app/configurator/components/ui-helpers.ts:652
+#: app/configurator/components/field-i18n.ts:67
 msgid "controls.sorting.byTotalSize.largestFirst"
 msgstr "Largest first"
 
-#: app/configurator/components/ui-helpers.ts:656
+#: app/configurator/components/field-i18n.ts:71
 msgid "controls.sorting.byTotalSize.largestTop"
 msgstr "Descending"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:162
+#: app/configurator/table/table-chart-sorting-options.tsx:161
 msgid "controls.sorting.removeOption"
 msgstr "Remove sorting dimension"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:214
+#: app/configurator/table/table-chart-sorting-options.tsx:213
 msgid "controls.sorting.selectDimension"
 msgstr "Select a dimension …"
 
-#: app/configurator/components/ui-helpers.ts:628
-#: app/configurator/table/table-chart-sorting-options.tsx:319
+#: app/configurator/components/field-i18n.ts:43
+#: app/configurator/table/table-chart-sorting-options.tsx:322
 msgid "controls.sorting.sortBy"
 msgstr "Sort by"
 
-#: app/configurator/components/chart-type-selector.tsx:144
+#: app/configurator/components/chart-type-selector.tsx:140
 msgid "controls.switch.chart.type"
 msgstr "Switch to another chart type while maintaining most filter settings."
 
-#: app/configurator/table/table-chart-options.tsx:217
+#: app/configurator/table/table-chart-options.tsx:221
 msgid "controls.table.column.group"
 msgstr "Use as group"
 
-#: app/configurator/table/table-chart-options.tsx:227
+#: app/configurator/table/table-chart-options.tsx:231
 msgid "controls.table.column.hide"
 msgstr "Hide column"
 
@@ -715,11 +724,11 @@ msgstr "Settings"
 msgid "controls.table.sorting"
 msgstr "Sorting"
 
-#: app/configurator/table/table-chart-options.tsx:495
+#: app/configurator/table/table-chart-options.tsx:486
 msgid "controls.tableSettings.showSearch"
 msgstr "Show search field"
 
-#: app/configurator/components/ui-helpers.ts:603
+#: app/configurator/components/field-i18n.ts:18
 msgid "controls.title"
 msgstr "Title"
 
@@ -747,11 +756,11 @@ msgstr "This chart is not using a trusted data source."
 msgid "dataset-preview.back-to-results"
 msgstr "Back to the datasets"
 
-#: app/components/chart-footnotes.tsx:111
+#: app/components/chart-footnotes.tsx:113
 msgid "dataset.footnotes.dataset"
 msgstr "Dataset"
 
-#: app/components/chart-footnotes.tsx:132
+#: app/components/chart-footnotes.tsx:134
 msgid "dataset.footnotes.updated"
 msgstr "Latest update"
 
@@ -759,7 +768,7 @@ msgstr "Latest update"
 msgid "dataset.hasImputedValues"
 msgstr "Some data in this dataset is missing and has been interpolated to fill the gaps."
 
-#: app/configurator/components/dataset-browse.tsx:418
+#: app/configurator/components/dataset-browse.tsx:427
 msgid "dataset.includeDrafts"
 msgstr "Include draft datasets"
 
@@ -779,7 +788,7 @@ msgstr "Contact points"
 msgid "dataset.metadata.furtherinformation"
 msgstr "Further information"
 
-#: app/components/chart-footnotes.tsx:198
+#: app/components/chart-footnotes.tsx:200
 #: app/configurator/components/dataset-metadata.tsx:118
 msgid "dataset.metadata.learnmore"
 msgstr "Learn more about the dataset"
@@ -792,21 +801,21 @@ msgstr "Source"
 msgid "dataset.metadata.version"
 msgstr "Version"
 
-#: app/configurator/components/dataset-browse.tsx:347
+#: app/configurator/components/dataset-browse.tsx:351
 msgid "dataset.order.newest"
 msgstr "Newest"
 
-#: app/configurator/components/dataset-browse.tsx:339
+#: app/configurator/components/dataset-browse.tsx:343
 msgid "dataset.order.relevance"
 msgstr "Relevance"
 
-#: app/configurator/components/dataset-browse.tsx:343
+#: app/configurator/components/dataset-browse.tsx:347
 msgid "dataset.order.title"
 msgstr "Title"
 
 #: app/components/chart-preview.tsx:85
 #: app/components/chart-published.tsx:126
-#: app/configurator/components/dataset-preview.tsx:53
+#: app/configurator/components/dataset-preview.tsx:109
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Careful, this dataset is only a draft.<0/><1>Don't use for reporting!</1>"
 
@@ -814,27 +823,27 @@ msgstr "Careful, this dataset is only a draft.<0/><1>Don't use for reporting!</1
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Careful, the data for this chart has expired.<0/><1>Don't use for reporting!</1>"
 
-#: app/configurator/components/dataset-browse.tsx:406
+#: app/configurator/components/dataset-browse.tsx:415
 msgid "dataset.results"
 msgstr "{0, plural, zero {No results} one {# result} other {# results}}"
 
-#: app/configurator/components/dataset-browse.tsx:351
+#: app/configurator/components/dataset-browse.tsx:355
 msgid "dataset.search.label"
 msgstr "Search datasets"
 
-#: app/configurator/components/dataset-browse.tsx:356
+#: app/configurator/components/dataset-browse.tsx:360
 msgid "dataset.search.placeholder"
 msgstr "Name, description, organization, theme, keyword"
 
-#: app/configurator/components/dataset-browse.tsx:437
+#: app/configurator/components/dataset-browse.tsx:446
 msgid "dataset.sortby"
 msgstr "Sort by"
 
-#: app/configurator/components/dataset-browse.tsx:1142
+#: app/configurator/components/dataset-browse.tsx:1152
 msgid "dataset.tag.draft"
 msgstr "Draft"
 
-#: app/configurator/components/dataset-preview.tsx:126
+#: app/configurator/components/dataset-preview.tsx:171
 msgid "datatable.showing.first.rows"
 msgstr "Showing first 10 rows"
 
@@ -898,7 +907,7 @@ msgstr "You can share this visualization by copying the URL or by embedding it o
 msgid "hint.loading.data"
 msgstr "Loading data..."
 
-#: app/configurator/components/chart-type-selector.tsx:157
+#: app/configurator/components/chart-type-selector.tsx:153
 msgid "hint.no.visualization.with.dataset"
 msgstr "No visualization can be created with the selected dataset."
 
@@ -922,11 +931,11 @@ msgstr "Negative Values"
 msgid "hint.publication.success"
 msgstr "Your visualization is now published. Share it by copying the URL or use the Embed menu below."
 
-#: app/charts/shared/chart-data-filters.tsx:82
+#: app/charts/shared/chart-data-filters.tsx:83
 msgid "interactive.data.filters.hide"
 msgstr "Hide Filters"
 
-#: app/charts/shared/chart-data-filters.tsx:84
+#: app/charts/shared/chart-data-filters.tsx:85
 msgid "interactive.data.filters.show"
 msgstr "Show Filters"
 
@@ -939,19 +948,19 @@ msgstr "Logo of the Swiss Confederation"
 #~ msgid "metadata.dataset"
 #~ msgstr "Dataset"
 
-#: app/components/chart-footnotes.tsx:217
+#: app/components/chart-footnotes.tsx:219
 msgid "metadata.link.created.with.visualize"
 msgstr "Created with visualize.admin.ch"
 
-#: app/components/chart-footnotes.tsx:143
+#: app/components/chart-footnotes.tsx:145
 msgid "metadata.source"
 msgstr "Source"
 
-#: app/components/chart-footnotes.tsx:181
+#: app/components/chart-footnotes.tsx:183
 msgid "metadata.switch.chart"
 msgstr "Switch to chart view"
 
-#: app/components/chart-footnotes.tsx:183
+#: app/components/chart-footnotes.tsx:185
 msgid "metadata.switch.table"
 msgstr "Switch to table view"
 
@@ -991,7 +1000,7 @@ msgstr "Here is a visualization I created using visualize.admin.ch"
 msgid "publication.share.mail.subject"
 msgstr "visualize.admin.ch"
 
-#: app/configurator/components/filters.tsx:616
+#: app/configurator/components/filters.tsx:632
 msgid "select.controls.filters.search"
 msgstr "Search"
 
@@ -1007,8 +1016,8 @@ msgstr "Customize your visualization by using the filter and color segmentation
 msgid "table.column.no"
 msgstr "Column {0}"
 
-#: app/components/chart-footnotes.tsx:113
-#: app/components/chart-footnotes.tsx:134
-#: app/components/chart-footnotes.tsx:145
+#: app/components/chart-footnotes.tsx:115
+#: app/components/chart-footnotes.tsx:136
+#: app/components/chart-footnotes.tsx:147
 msgid "typography.colon"
 msgstr ": "
diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po
index 4057dd9c1..6bf844fa0 100644
--- a/app/locales/fr/messages.po
+++ b/app/locales/fr/messages.po
@@ -29,8 +29,8 @@ msgstr "Déplacer le filtre vers le bas"
 msgid "Move filter up"
 msgstr "Déplacer le filtre vers le haut"
 
-#: app/configurator/components/dataset-browse.tsx:1027
-#: app/configurator/components/filters.tsx:714
+#: app/configurator/components/dataset-browse.tsx:1037
+#: app/configurator/components/filters.tsx:730
 msgid "No results"
 msgstr "Aucun résultat"
 
@@ -42,15 +42,15 @@ msgstr "[ Pas de description ]"
 msgid "annotation.add.title"
 msgstr "[ Pas de titre ]"
 
-#: app/configurator/components/dataset-browse.tsx:958
+#: app/configurator/components/dataset-browse.tsx:968
 msgid "browse-panel.organizations"
 msgstr "Organisations"
 
-#: app/configurator/components/dataset-browse.tsx:940
+#: app/configurator/components/dataset-browse.tsx:950
 msgid "browse-panel.themes"
 msgstr "Catégories"
 
-#: app/configurator/components/dataset-preview.tsx:77
+#: app/configurator/components/dataset-preview.tsx:128
 msgid "browse.dataset.create-visualization"
 msgstr "Démarrer une visualisation"
 
@@ -120,7 +120,7 @@ msgstr "Publier cette visualisation"
 msgid "button.share"
 msgstr "Partager"
 
-#: app/configurator/components/ui-helpers.ts:620
+#: app/configurator/components/field-i18n.ts:35
 msgid "chart.map.layers.area"
 msgstr "Zones"
 
@@ -145,16 +145,16 @@ msgstr "Zones"
 #~ msgstr "Intervalles égaux"
 
 #: app/configurator/components/chart-configurator.tsx:696
-#: app/configurator/components/chart-options-selector.tsx:996
-#: app/configurator/components/ui-helpers.ts:616
+#: app/configurator/components/chart-options-selector.tsx:989
+#: app/configurator/components/field-i18n.ts:31
 msgid "chart.map.layers.base"
 msgstr "Affichage de la carte"
 
-#: app/configurator/components/chart-options-selector.tsx:1000
+#: app/configurator/components/chart-options-selector.tsx:993
 msgid "chart.map.layers.base.show"
 msgstr "Afficher la carte du monde"
 
-#: app/configurator/components/chart-options-selector.tsx:1009
+#: app/configurator/components/chart-options-selector.tsx:1001
 msgid "chart.map.layers.base.view.locked"
 msgstr "Carte verrouillée"
 
@@ -163,7 +163,7 @@ msgstr "Carte verrouillée"
 #~ msgid "chart.map.layers.show"
 #~ msgstr "Afficher la couche"
 
-#: app/configurator/components/ui-helpers.ts:624
+#: app/configurator/components/field-i18n.ts:39
 msgid "chart.map.layers.symbol"
 msgstr "Symboles"
 
@@ -179,81 +179,81 @@ msgstr "Vue compacte"
 msgid "chart.table.number.of.lines"
 msgstr "Nombre total de lignes:"
 
-#: app/configurator/table/table-chart-options.tsx:196
+#: app/configurator/table/table-chart-options.tsx:190
 msgid "columnStyle.bar"
 msgstr "Barres"
 
-#: app/configurator/table/table-chart-options.tsx:182
+#: app/configurator/table/table-chart-options.tsx:200
 msgid "columnStyle.categories"
 msgstr "Catégories"
 
-#: app/configurator/table/table-chart-options.tsx:192
+#: app/configurator/table/table-chart-options.tsx:186
 msgid "columnStyle.heatmap"
 msgstr "Heatmap"
 
-#: app/configurator/table/table-chart-options.tsx:178
-#: app/configurator/table/table-chart-options.tsx:188
+#: app/configurator/table/table-chart-options.tsx:182
+#: app/configurator/table/table-chart-options.tsx:196
 msgid "columnStyle.text"
 msgstr "Texte"
 
-#: app/configurator/table/table-chart-options.tsx:395
+#: app/configurator/table/table-chart-options.tsx:397
 msgid "columnStyle.textStyle.bold"
 msgstr "Gras"
 
-#: app/configurator/table/table-chart-options.tsx:388
+#: app/configurator/table/table-chart-options.tsx:390
 msgid "columnStyle.textStyle.regular"
 msgstr "Normal"
 
-#: app/configurator/interactive-filters/editor-time-brush.tsx:173
+#: app/configurator/interactive-filters/editor-time-brush.tsx:168
 msgid "controls..interactiveFilters.time.defaultSettings"
 msgstr "Paramètres d'origine"
 
-#: app/configurator/components/ui-helpers.ts:590
+#: app/configurator/components/field-i18n.ts:5
 msgid "controls.axis.horizontal"
 msgstr "Axe horizontal"
 
-#: app/configurator/components/ui-helpers.ts:598
+#: app/configurator/components/field-i18n.ts:13
 msgid "controls.axis.vertical"
 msgstr "Axe vertical"
 
-#: app/configurator/components/ui-helpers.ts:700
+#: app/configurator/components/field-i18n.ts:115
 msgid "controls.chart.type.area"
 msgstr "Surfaces"
 
-#: app/configurator/components/ui-helpers.ts:692
+#: app/configurator/components/field-i18n.ts:107
 msgid "controls.chart.type.bar"
 msgstr "Barres"
 
-#: app/configurator/components/ui-helpers.ts:688
+#: app/configurator/components/field-i18n.ts:103
 msgid "controls.chart.type.column"
 msgstr "Colonnes"
 
-#: app/configurator/components/ui-helpers.ts:696
+#: app/configurator/components/field-i18n.ts:111
 msgid "controls.chart.type.line"
 msgstr "Lignes"
 
-#: app/configurator/components/ui-helpers.ts:716
+#: app/configurator/components/field-i18n.ts:131
 msgid "controls.chart.type.map"
 msgstr "Carte"
 
-#: app/configurator/components/ui-helpers.ts:708
+#: app/configurator/components/field-i18n.ts:123
 msgid "controls.chart.type.pie"
 msgstr "Secteurs"
 
-#: app/configurator/components/ui-helpers.ts:704
+#: app/configurator/components/field-i18n.ts:119
 msgid "controls.chart.type.scatterplot"
 msgstr "Nuage de points"
 
-#: app/configurator/components/ui-helpers.ts:712
+#: app/configurator/components/field-i18n.ts:127
 msgid "controls.chart.type.table"
 msgstr "Tableau"
 
-#: app/configurator/components/chart-options-selector.tsx:718
-#: app/configurator/components/ui-helpers.ts:602
+#: app/configurator/components/chart-options-selector.tsx:720
+#: app/configurator/components/field-i18n.ts:17
 msgid "controls.color"
 msgstr "Couleur"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:47
+#: app/configurator/components/chart-controls/control-tab.tsx:45
 msgid "controls.color.add"
 msgstr "Ajouter…"
 
@@ -261,52 +261,52 @@ msgstr "Ajouter…"
 msgid "controls.color.opacity"
 msgstr "Transparence"
 
-#: app/configurator/components/chart-controls/color-palette.tsx:98
-#: app/configurator/components/chart-controls/color-ramp.tsx:120
+#: app/configurator/components/chart-controls/color-palette.tsx:112
+#: app/configurator/components/chart-controls/color-ramp.tsx:115
 msgid "controls.color.palette"
 msgstr "Couleurs"
 
-#: app/configurator/components/chart-controls/color-ramp.tsx:160
+#: app/configurator/components/chart-controls/color-ramp.tsx:155
 msgid "controls.color.palette.diverging"
 msgstr ""
 
-#: app/configurator/components/chart-controls/color-palette.tsx:247
+#: app/configurator/components/chart-controls/color-palette.tsx:261
 msgid "controls.color.palette.reset"
 msgstr "Réinitialiser la palette de couleurs"
 
-#: app/configurator/components/chart-controls/color-ramp.tsx:144
+#: app/configurator/components/chart-controls/color-ramp.tsx:139
 msgid "controls.color.palette.sequential"
 msgstr "Séquentielle"
 
-#: app/configurator/components/chart-options-selector.tsx:840
+#: app/configurator/components/chart-options-selector.tsx:836
 msgid "controls.color.scale.discretization.jenks"
 msgstr "Jenks (intervalles naturels)"
 
-#: app/configurator/components/chart-options-selector.tsx:833
+#: app/configurator/components/chart-options-selector.tsx:829
 msgid "controls.color.scale.discretization.quantiles"
 msgstr "Quantiles (distribution homogène des valeurs)"
 
-#: app/configurator/components/chart-options-selector.tsx:826
+#: app/configurator/components/chart-options-selector.tsx:822
 msgid "controls.color.scale.discretization.quantize"
 msgstr "Intervalles égaux"
 
-#: app/configurator/components/chart-options-selector.tsx:818
+#: app/configurator/components/chart-options-selector.tsx:814
 msgid "controls.color.scale.interpolation"
 msgstr "Interpolation"
 
-#: app/configurator/components/chart-options-selector.tsx:851
+#: app/configurator/components/chart-options-selector.tsx:846
 msgid "controls.color.scale.number.of.classes"
 msgstr "Nombre de classes"
 
-#: app/configurator/components/chart-options-selector.tsx:788
+#: app/configurator/components/chart-options-selector.tsx:786
 msgid "controls.color.scale.type.continuous"
 msgstr "Continue"
 
-#: app/configurator/components/chart-options-selector.tsx:800
+#: app/configurator/components/chart-options-selector.tsx:797
 msgid "controls.color.scale.type.discrete"
 msgstr "Discrète"
 
-#: app/configurator/components/chart-options-selector.tsx:738
+#: app/configurator/components/chart-options-selector.tsx:739
 msgid "controls.color.select"
 msgstr "Sélectionner une couleur"
 
@@ -314,15 +314,15 @@ msgstr "Sélectionner une couleur"
 msgid "controls.colorpicker.open"
 msgstr "Ouvrir la pipette à couleur"
 
-#: app/configurator/components/ui-helpers.ts:612
+#: app/configurator/components/field-i18n.ts:27
 msgid "controls.column.grouped"
 msgstr "groupées"
 
-#: app/configurator/components/ui-helpers.ts:608
+#: app/configurator/components/field-i18n.ts:23
 msgid "controls.column.stacked"
 msgstr "empilées"
 
-#: app/configurator/components/ui-helpers.ts:604
+#: app/configurator/components/field-i18n.ts:19
 msgid "controls.description"
 msgstr "Description"
 
@@ -336,41 +336,41 @@ msgstr "Description"
 #~ msgid "controls.dimension.none"
 #~ msgstr "Aucune"
 
-#: app/charts/shared/chart-data-filters.tsx:217
+#: app/charts/shared/chart-data-filters.tsx:218
 msgid "controls.dimensionvalue.none"
 msgstr "Aucune filtre"
 
-#: app/configurator/components/filters.tsx:464
+#: app/configurator/components/filters.tsx:480
 msgid "controls.filter.nb-elements"
 msgstr "{0} sur {1}"
 
-#: app/configurator/components/filters.tsx:396
-#: app/configurator/components/filters.tsx:642
+#: app/configurator/components/filters.tsx:414
+#: app/configurator/components/filters.tsx:658
 msgid "controls.filter.select.all"
 msgstr "Tout sélectionner"
 
-#: app/configurator/components/filters.tsx:403
-#: app/configurator/components/filters.tsx:640
+#: app/configurator/components/filters.tsx:421
+#: app/configurator/components/filters.tsx:656
 msgid "controls.filter.select.none"
 msgstr "Tout déselectionner"
 
-#: app/configurator/components/filters.tsx:413
+#: app/configurator/components/filters.tsx:431
 msgid "controls.filters.select.filters"
 msgstr "Filtres"
 
-#: app/configurator/components/filters.tsx:445
+#: app/configurator/components/filters.tsx:461
 msgid "controls.filters.select.refresh-colors"
 msgstr "Renouveller les couleurs"
 
-#: app/configurator/components/filters.tsx:427
+#: app/configurator/components/filters.tsx:445
 msgid "controls.filters.select.reset-colors"
 msgstr "Réinitialiser les couleurs"
 
-#: app/configurator/components/filters.tsx:420
+#: app/configurator/components/filters.tsx:438
 msgid "controls.filters.select.selected-filters"
 msgstr "Filtres sélectionnés"
 
-#: app/configurator/interactive-filters/editor-time-interval-brush.tsx:129
+#: app/configurator/interactive-filters/editor-time-interval-brush.tsx:128
 msgid "controls.filters.time.range"
 msgstr "Intervalle de temps"
 
@@ -394,59 +394,68 @@ msgstr "Sélectionnez un élément de design ou une dimension du jeu de données
 msgid "controls.hint.describing.chart"
 msgstr "Sélectionnez une des annotations proposées pour la modifier."
 
-#: app/configurator/components/ui-helpers.ts:672
+#: app/configurator/components/field-i18n.ts:87
 msgid "controls.imputation"
 msgstr "Type d'imputation"
 
-#: app/configurator/components/chart-options-selector.tsx:887
-#: app/configurator/components/ui-helpers.ts:684
+#: app/configurator/components/chart-options-selector.tsx:881
+#: app/configurator/components/field-i18n.ts:99
 msgid "controls.imputation.type.linear"
 msgstr "Interpolation linéaire"
 
-#: app/configurator/components/chart-options-selector.tsx:880
-#: app/configurator/components/chart-options-selector.tsx:892
-#: app/configurator/components/ui-helpers.ts:676
+#: app/configurator/components/chart-options-selector.tsx:874
+#: app/configurator/components/chart-options-selector.tsx:886
+#: app/configurator/components/field-i18n.ts:91
 msgid "controls.imputation.type.none"
 msgstr "-"
 
-#: app/configurator/components/chart-options-selector.tsx:882
-#: app/configurator/components/ui-helpers.ts:680
+#: app/configurator/components/chart-options-selector.tsx:876
+#: app/configurator/components/field-i18n.ts:95
 msgid "controls.imputation.type.zeros"
 msgstr "Zéros"
 
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:94
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:117
 msgid "controls.interactive.filters.dataFilter"
 msgstr "Filtres de données"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:285
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:104
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:97
+msgid "controls.interactive.filters.timeSlider"
+msgstr "Curseur temporel"
+
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:327
 msgid "controls.interactiveFilters.dataFilters.toggledataFilters"
 msgstr "Afficher les filtres de données"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:73
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:77
 msgid "controls.interactiveFilters.legend.toggleInteractiveLegend"
 msgstr "Afficher la légende filtrante"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:213
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:222
 msgid "controls.interactiveFilters.time.noTimeDimension"
 msgstr "Il n'y a pas de dimension temporelle!"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:187
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:197
 msgid "controls.interactiveFilters.time.toggleTimeFilter"
 msgstr "Afficher le filtre temporel"
 
-#: app/configurator/components/ui-helpers.ts:720
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:263
+msgid "controls.interactiveFilters.time.toggleTimeSliderFilter"
+msgstr "Afficher le curseur de temps"
+
+#: app/configurator/components/field-i18n.ts:135
 msgid "controls.language.english"
 msgstr "Anglais"
 
-#: app/configurator/components/ui-helpers.ts:728
+#: app/configurator/components/field-i18n.ts:143
 msgid "controls.language.french"
 msgstr "Français"
 
-#: app/configurator/components/ui-helpers.ts:724
+#: app/configurator/components/field-i18n.ts:139
 msgid "controls.language.german"
 msgstr "Allemand"
 
-#: app/configurator/components/ui-helpers.ts:732
+#: app/configurator/components/field-i18n.ts:147
 msgid "controls.language.italian"
 msgstr "Italien"
 
@@ -455,7 +464,7 @@ msgstr "Italien"
 #~ msgid "controls.location"
 #~ msgstr "Localisation"
 
-#: app/configurator/components/ui-helpers.ts:594
+#: app/configurator/components/field-i18n.ts:9
 msgid "controls.measure"
 msgstr "Variable mesurée"
 
@@ -463,23 +472,23 @@ msgstr "Variable mesurée"
 #~ msgid "controls.none"
 #~ msgstr "Aucun"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:314
+#: app/configurator/components/chart-controls/control-tab.tsx:312
 msgid "controls.option.isActive"
 msgstr "Actif"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:310
+#: app/configurator/components/chart-controls/control-tab.tsx:308
 msgid "controls.option.isNotActive"
 msgstr "Inactif"
 
-#: app/configurator/components/chart-options-selector.tsx:781
+#: app/configurator/components/chart-options-selector.tsx:779
 msgid "controls.scale.type"
 msgstr "Type d'échelle"
 
-#: app/components/form.tsx:563
+#: app/components/form.tsx:566
 msgid "controls.search.clear"
 msgstr "Effacer la recherche"
 
-#: app/configurator/components/chart-options-selector.tsx:347
+#: app/configurator/components/chart-options-selector.tsx:356
 msgid "controls.section.additional-information"
 msgstr "Informations supplémentaires"
 
@@ -491,7 +500,7 @@ msgstr "Paramètres graphiques"
 msgid "controls.section.columns"
 msgstr "Colonnes"
 
-#: app/configurator/table/table-chart-options.tsx:240
+#: app/configurator/table/table-chart-options.tsx:244
 msgid "controls.section.columnstyle"
 msgstr "Style de la colonne"
 
@@ -503,12 +512,12 @@ msgstr "Filtres"
 msgid "controls.section.description"
 msgstr "Titre & description"
 
-#: app/configurator/components/chart-options-selector.tsx:403
-#: app/configurator/components/chart-options-selector.tsx:407
-#: app/configurator/table/table-chart-options.tsx:310
+#: app/configurator/components/chart-options-selector.tsx:411
+#: app/configurator/components/chart-options-selector.tsx:415
 #: app/configurator/table/table-chart-options.tsx:314
-#: app/configurator/table/table-chart-options.tsx:334
+#: app/configurator/table/table-chart-options.tsx:318
 #: app/configurator/table/table-chart-options.tsx:338
+#: app/configurator/table/table-chart-options.tsx:342
 msgid "controls.section.filter"
 msgstr "Filtre"
 
@@ -516,35 +525,35 @@ msgstr "Filtre"
 msgid "controls.section.groups"
 msgstr "Groupes"
 
-#: app/configurator/components/chart-options-selector.tsx:921
+#: app/configurator/components/chart-options-selector.tsx:915
 msgid "controls.section.imputation"
 msgstr "Valeurs manquantes"
 
-#: app/configurator/components/chart-options-selector.tsx:926
+#: app/configurator/components/chart-options-selector.tsx:920
 msgid "controls.section.imputation.explanation"
 msgstr "En raison du type de graphique sélectionné, les valeurs manquantes doivent être remplies. Décidez de la logique d'imputation ou choisissez un autre type de graphique."
 
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:65
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:78
 msgid "controls.section.interactive.filters"
 msgstr "Filtres interactifs"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:104
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:117
 msgid "controls.section.interactiveFilters.dataFilters"
 msgstr "Filtres de données"
 
-#: app/configurator/components/chart-options-selector.tsx:356
+#: app/configurator/components/chart-options-selector.tsx:365
 msgid "controls.section.show-standard-error"
 msgstr "Afficher l'erreur type"
 
-#: app/configurator/components/chart-options-selector.tsx:554
+#: app/configurator/components/chart-options-selector.tsx:557
 msgid "controls.section.sorting"
 msgstr "Trier"
 
-#: app/configurator/table/table-chart-options.tsx:491
+#: app/configurator/table/table-chart-options.tsx:482
 msgid "controls.section.tableSettings"
 msgstr "Paramètres du tableau"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:381
+#: app/configurator/table/table-chart-sorting-options.tsx:384
 msgid "controls.section.tableSorting"
 msgstr "Tri du tableau"
 
@@ -553,32 +562,32 @@ msgid "controls.section.tableoptions"
 msgstr "Options du tableau"
 
 #: app/configurator/components/chart-configurator.tsx:541
-#: app/configurator/components/chart-type-selector.tsx:139
+#: app/configurator/components/chart-type-selector.tsx:135
 #: app/configurator/table/table-chart-configurator.tsx:123
 msgid "controls.select.chart.type"
 msgstr "Type de graphique"
 
-#: app/configurator/components/chart-options-selector.tsx:455
+#: app/configurator/components/chart-options-selector.tsx:461
 msgid "controls.select.column.layout"
 msgstr "Mise en forme de la colonne"
 
-#: app/configurator/table/table-chart-options.tsx:245
+#: app/configurator/table/table-chart-options.tsx:249
 msgid "controls.select.columnStyle"
 msgstr "Style de la colonne"
 
-#: app/configurator/table/table-chart-options.tsx:460
+#: app/configurator/table/table-chart-options.tsx:457
 msgid "controls.select.columnStyle.barColorBackground"
 msgstr "Couleur de fond"
 
-#: app/configurator/table/table-chart-options.tsx:451
+#: app/configurator/table/table-chart-options.tsx:449
 msgid "controls.select.columnStyle.barColorNegative"
 msgstr "Couleur des valeurs négatives"
 
-#: app/configurator/table/table-chart-options.tsx:442
+#: app/configurator/table/table-chart-options.tsx:441
 msgid "controls.select.columnStyle.barColorPositive"
 msgstr "Couleur des valeurs positives"
 
-#: app/configurator/table/table-chart-options.tsx:469
+#: app/configurator/table/table-chart-options.tsx:465
 msgid "controls.select.columnStyle.barShowBackground"
 msgstr "Afficher la couleur de fond"
 
@@ -586,21 +595,21 @@ msgstr "Afficher la couleur de fond"
 msgid "controls.select.columnStyle.columnColor"
 msgstr "Couleur de la colonne"
 
-#: app/configurator/table/table-chart-options.tsx:405
+#: app/configurator/table/table-chart-options.tsx:406
 msgid "controls.select.columnStyle.textColor"
 msgstr "Couleur du texte"
 
-#: app/configurator/table/table-chart-options.tsx:381
+#: app/configurator/table/table-chart-options.tsx:383
 msgid "controls.select.columnStyle.textStyle"
 msgstr "Style du texte"
 
-#: app/configurator/components/chart-options-selector.tsx:208
+#: app/configurator/components/chart-options-selector.tsx:220
 msgid "controls.select.dimension"
 msgstr "Sélectionner une dimension"
 
-#: app/configurator/components/chart-options-selector.tsx:209
-#: app/configurator/components/chart-options-selector.tsx:644
-#: app/configurator/components/chart-options-selector.tsx:723
+#: app/configurator/components/chart-options-selector.tsx:221
+#: app/configurator/components/chart-options-selector.tsx:647
+#: app/configurator/components/chart-options-selector.tsx:725
 msgid "controls.select.measure"
 msgstr "Sélectionner une variable"
 
@@ -611,99 +620,99 @@ msgstr "Sélectionner une variable"
 #~ msgid "controls.select.optional"
 #~ msgstr "optionnel"
 
-#: app/configurator/components/filters.tsx:696
+#: app/configurator/components/filters.tsx:712
 msgid "controls.set-filters"
 msgstr "Appliquer les filtres"
 
-#: app/configurator/components/filters.tsx:703
+#: app/configurator/components/filters.tsx:719
 msgid "controls.set-filters-caption"
 msgstr "Pour de meilleurs résultats, ne sélectionnez pas plus de 7 valeurs dans la visualisation."
 
-#: app/configurator/components/filters.tsx:735
+#: app/configurator/components/filters.tsx:751
 msgid "controls.set-values-apply"
 msgstr "Appliquer les filtres"
 
-#: app/configurator/components/chart-options-selector.tsx:636
+#: app/configurator/components/chart-options-selector.tsx:639
 msgid "controls.size"
 msgstr "Taille"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:248
+#: app/configurator/table/table-chart-sorting-options.tsx:251
 msgid "controls.sorting.addDimension"
 msgstr "Ajouter une dimension"
 
-#: app/configurator/components/chart-options-selector.tsx:506
+#: app/configurator/components/chart-options-selector.tsx:509
 msgid "controls.sorting.byAuto"
 msgstr ""
 
-#: app/configurator/components/chart-options-selector.tsx:500
-#: app/configurator/components/chart-options-selector.tsx:510
+#: app/configurator/components/chart-options-selector.tsx:503
+#: app/configurator/components/chart-options-selector.tsx:513
 msgid "controls.sorting.byDimensionLabel"
 msgstr "Nom"
 
-#: app/configurator/components/ui-helpers.ts:632
-#: app/configurator/components/ui-helpers.ts:636
+#: app/configurator/components/field-i18n.ts:47
+#: app/configurator/components/field-i18n.ts:51
 msgid "controls.sorting.byDimensionLabel.ascending"
 msgstr "A → Z"
 
-#: app/configurator/components/ui-helpers.ts:640
-#: app/configurator/components/ui-helpers.ts:644
+#: app/configurator/components/field-i18n.ts:55
+#: app/configurator/components/field-i18n.ts:59
 msgid "controls.sorting.byDimensionLabel.descending"
 msgstr "Z → A"
 
-#: app/configurator/components/chart-options-selector.tsx:502
+#: app/configurator/components/chart-options-selector.tsx:505
 msgid "controls.sorting.byMeasure"
 msgstr "Mesure"
 
-#: app/configurator/components/ui-helpers.ts:664
+#: app/configurator/components/field-i18n.ts:79
 msgid "controls.sorting.byMeasure.ascending"
 msgstr "1 → 9"
 
-#: app/configurator/components/ui-helpers.ts:668
+#: app/configurator/components/field-i18n.ts:83
 msgid "controls.sorting.byMeasure.descending"
 msgstr "9 → 1"
 
-#: app/configurator/components/chart-options-selector.tsx:504
+#: app/configurator/components/chart-options-selector.tsx:507
 msgid "controls.sorting.byTotalSize"
 msgstr "Taille totale"
 
-#: app/configurator/components/ui-helpers.ts:648
+#: app/configurator/components/field-i18n.ts:63
 msgid "controls.sorting.byTotalSize.ascending"
 msgstr "Croissant"
 
-#: app/configurator/components/ui-helpers.ts:660
+#: app/configurator/components/field-i18n.ts:75
 msgid "controls.sorting.byTotalSize.largestBottom"
 msgstr "Décroissant de bas en haut"
 
-#: app/configurator/components/ui-helpers.ts:652
+#: app/configurator/components/field-i18n.ts:67
 msgid "controls.sorting.byTotalSize.largestFirst"
 msgstr "Décroissant"
 
-#: app/configurator/components/ui-helpers.ts:656
+#: app/configurator/components/field-i18n.ts:71
 msgid "controls.sorting.byTotalSize.largestTop"
 msgstr "Décroissant de haut en bas"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:162
+#: app/configurator/table/table-chart-sorting-options.tsx:161
 msgid "controls.sorting.removeOption"
 msgstr "Supprimer la dimension de tri"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:214
+#: app/configurator/table/table-chart-sorting-options.tsx:213
 msgid "controls.sorting.selectDimension"
 msgstr "Sélectionner une dimension…"
 
-#: app/configurator/components/ui-helpers.ts:628
-#: app/configurator/table/table-chart-sorting-options.tsx:319
+#: app/configurator/components/field-i18n.ts:43
+#: app/configurator/table/table-chart-sorting-options.tsx:322
 msgid "controls.sorting.sortBy"
 msgstr "Trier par"
 
-#: app/configurator/components/chart-type-selector.tsx:144
+#: app/configurator/components/chart-type-selector.tsx:140
 msgid "controls.switch.chart.type"
 msgstr "Passer à une autre visualisation tout en conservant la plupart des filtres"
 
-#: app/configurator/table/table-chart-options.tsx:217
+#: app/configurator/table/table-chart-options.tsx:221
 msgid "controls.table.column.group"
 msgstr "Grouper selon cette colonne"
 
-#: app/configurator/table/table-chart-options.tsx:227
+#: app/configurator/table/table-chart-options.tsx:231
 msgid "controls.table.column.hide"
 msgstr "Masquer la colonne"
 
@@ -715,11 +724,11 @@ msgstr "Paramètres"
 msgid "controls.table.sorting"
 msgstr "Tri"
 
-#: app/configurator/table/table-chart-options.tsx:495
+#: app/configurator/table/table-chart-options.tsx:486
 msgid "controls.tableSettings.showSearch"
 msgstr "Afficher le champ de recherche"
 
-#: app/configurator/components/ui-helpers.ts:603
+#: app/configurator/components/field-i18n.ts:18
 msgid "controls.title"
 msgstr "Titre"
 
@@ -747,11 +756,11 @@ msgstr "Ce graphique n'utilise pas une source de données fiable."
 msgid "dataset-preview.back-to-results"
 msgstr "Revenir aux jeux de données"
 
-#: app/components/chart-footnotes.tsx:111
+#: app/components/chart-footnotes.tsx:113
 msgid "dataset.footnotes.dataset"
 msgstr "Jeu de données"
 
-#: app/components/chart-footnotes.tsx:132
+#: app/components/chart-footnotes.tsx:134
 msgid "dataset.footnotes.updated"
 msgstr "Mise à jour"
 
@@ -759,7 +768,7 @@ msgstr "Mise à jour"
 msgid "dataset.hasImputedValues"
 msgstr "Certaines données de cet ensemble de données sont manquantes et ont été interpolées pour combler les lacunes."
 
-#: app/configurator/components/dataset-browse.tsx:418
+#: app/configurator/components/dataset-browse.tsx:427
 msgid "dataset.includeDrafts"
 msgstr "Inclure les brouillons"
 
@@ -775,7 +784,7 @@ msgstr "Points de contact"
 msgid "dataset.metadata.furtherinformation"
 msgstr "Informations complémentaires"
 
-#: app/components/chart-footnotes.tsx:198
+#: app/components/chart-footnotes.tsx:200
 #: app/configurator/components/dataset-metadata.tsx:118
 msgid "dataset.metadata.learnmore"
 msgstr "En savoir plus sur le jeu de données"
@@ -788,21 +797,21 @@ msgstr "Source"
 msgid "dataset.metadata.version"
 msgstr "Version"
 
-#: app/configurator/components/dataset-browse.tsx:347
+#: app/configurator/components/dataset-browse.tsx:351
 msgid "dataset.order.newest"
 msgstr "Plus récent en premier"
 
-#: app/configurator/components/dataset-browse.tsx:339
+#: app/configurator/components/dataset-browse.tsx:343
 msgid "dataset.order.relevance"
 msgstr "Pertinence"
 
-#: app/configurator/components/dataset-browse.tsx:343
+#: app/configurator/components/dataset-browse.tsx:347
 msgid "dataset.order.title"
 msgstr "Titre"
 
 #: app/components/chart-preview.tsx:85
 #: app/components/chart-published.tsx:126
-#: app/configurator/components/dataset-preview.tsx:53
+#: app/configurator/components/dataset-preview.tsx:109
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Attention, ce jeu de données est à l'état d'ébauche.<0/><1>Ne l'utilisez pas pour une publication!</1>"
 
@@ -810,27 +819,27 @@ msgstr "Attention, ce jeu de données est à l'état d'ébauche.<0/><1>Ne l'util
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Attention, ce jeu de données est expiré.<0/><1>Ne l'utilisez pas pour une publication!</1>"
 
-#: app/configurator/components/dataset-browse.tsx:406
+#: app/configurator/components/dataset-browse.tsx:415
 msgid "dataset.results"
 msgstr "{0, plural, zero {Aucun résultat} one {# résultat} other {# résultats}}"
 
-#: app/configurator/components/dataset-browse.tsx:351
+#: app/configurator/components/dataset-browse.tsx:355
 msgid "dataset.search.label"
 msgstr "Chercher"
 
-#: app/configurator/components/dataset-browse.tsx:356
+#: app/configurator/components/dataset-browse.tsx:360
 msgid "dataset.search.placeholder"
 msgstr "Nom, description, organisation, catégorie, mots clés..."
 
-#: app/configurator/components/dataset-browse.tsx:437
+#: app/configurator/components/dataset-browse.tsx:446
 msgid "dataset.sortby"
 msgstr "Trier par"
 
-#: app/configurator/components/dataset-browse.tsx:1142
+#: app/configurator/components/dataset-browse.tsx:1152
 msgid "dataset.tag.draft"
 msgstr "Brouillon"
 
-#: app/configurator/components/dataset-preview.tsx:126
+#: app/configurator/components/dataset-preview.tsx:171
 msgid "datatable.showing.first.rows"
 msgstr "Seules les 10 premières lignes sont affichées"
 
@@ -894,7 +903,7 @@ msgstr "Vous pouvez partager cette visualisation en copiant l'URL ou en l'intég
 msgid "hint.loading.data"
 msgstr "Chargement des données..."
 
-#: app/configurator/components/chart-type-selector.tsx:157
+#: app/configurator/components/chart-type-selector.tsx:153
 msgid "hint.no.visualization.with.dataset"
 msgstr "Aucune visualisation ne peut être créée avec le jeu de données sélectionné."
 
@@ -918,11 +927,11 @@ msgstr "Valeurs négatives"
 msgid "hint.publication.success"
 msgstr "Votre visualisation est à présent publiée. Partagez-là en copiant l'URL ou en utilisant les options d'intégration."
 
-#: app/charts/shared/chart-data-filters.tsx:82
+#: app/charts/shared/chart-data-filters.tsx:83
 msgid "interactive.data.filters.hide"
 msgstr "Masquer les filtres"
 
-#: app/charts/shared/chart-data-filters.tsx:84
+#: app/charts/shared/chart-data-filters.tsx:85
 msgid "interactive.data.filters.show"
 msgstr "Afficher les filtres"
 
@@ -935,19 +944,19 @@ msgstr "Logo de la Confédération Suisse"
 #~ msgid "metadata.dataset"
 #~ msgstr "Jeu de données"
 
-#: app/components/chart-footnotes.tsx:217
+#: app/components/chart-footnotes.tsx:219
 msgid "metadata.link.created.with.visualize"
 msgstr "Créé avec visualize.admin.ch"
 
-#: app/components/chart-footnotes.tsx:143
+#: app/components/chart-footnotes.tsx:145
 msgid "metadata.source"
 msgstr "Source"
 
-#: app/components/chart-footnotes.tsx:181
+#: app/components/chart-footnotes.tsx:183
 msgid "metadata.switch.chart"
 msgstr "Passer à la vue graphique"
 
-#: app/components/chart-footnotes.tsx:183
+#: app/components/chart-footnotes.tsx:185
 msgid "metadata.switch.table"
 msgstr "Passer à la vue en tableau"
 
@@ -987,7 +996,7 @@ msgstr "Voici une visualisation que j'ai créée sur visualize.admin.ch"
 msgid "publication.share.mail.subject"
 msgstr "visualize.admin.ch"
 
-#: app/configurator/components/filters.tsx:616
+#: app/configurator/components/filters.tsx:632
 msgid "select.controls.filters.search"
 msgstr "Chercher"
 
@@ -1003,8 +1012,8 @@ msgstr "Personnalisez votre visualisation en utilisant les options de filtrage e
 msgid "table.column.no"
 msgstr "Colonne {0}"
 
-#: app/components/chart-footnotes.tsx:113
-#: app/components/chart-footnotes.tsx:134
-#: app/components/chart-footnotes.tsx:145
+#: app/components/chart-footnotes.tsx:115
+#: app/components/chart-footnotes.tsx:136
+#: app/components/chart-footnotes.tsx:147
 msgid "typography.colon"
 msgstr " : "
diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po
index b3b26714b..25342ef9e 100644
--- a/app/locales/it/messages.po
+++ b/app/locales/it/messages.po
@@ -29,8 +29,8 @@ msgstr "Sposta il filtro in basso"
 msgid "Move filter up"
 msgstr "Sposta il filtro in alto"
 
-#: app/configurator/components/dataset-browse.tsx:1027
-#: app/configurator/components/filters.tsx:714
+#: app/configurator/components/dataset-browse.tsx:1037
+#: app/configurator/components/filters.tsx:730
 msgid "No results"
 msgstr "Nessun risultato"
 
@@ -42,15 +42,15 @@ msgstr "[ Nessuna descrizione ]"
 msgid "annotation.add.title"
 msgstr "[ Nessun titolo ]"
 
-#: app/configurator/components/dataset-browse.tsx:958
+#: app/configurator/components/dataset-browse.tsx:968
 msgid "browse-panel.organizations"
 msgstr "Organizzazioni"
 
-#: app/configurator/components/dataset-browse.tsx:940
+#: app/configurator/components/dataset-browse.tsx:950
 msgid "browse-panel.themes"
 msgstr "Categorie"
 
-#: app/configurator/components/dataset-preview.tsx:77
+#: app/configurator/components/dataset-preview.tsx:128
 msgid "browse.dataset.create-visualization"
 msgstr "Iniziare una visualizzazione"
 
@@ -120,7 +120,7 @@ msgstr "Pubblica questa visualizzazione"
 msgid "button.share"
 msgstr "Condividi"
 
-#: app/configurator/components/ui-helpers.ts:620
+#: app/configurator/components/field-i18n.ts:35
 msgid "chart.map.layers.area"
 msgstr "Aree"
 
@@ -145,16 +145,16 @@ msgstr "Aree"
 #~ msgstr "Intervalli uguali"
 
 #: app/configurator/components/chart-configurator.tsx:696
-#: app/configurator/components/chart-options-selector.tsx:996
-#: app/configurator/components/ui-helpers.ts:616
+#: app/configurator/components/chart-options-selector.tsx:989
+#: app/configurator/components/field-i18n.ts:31
 msgid "chart.map.layers.base"
 msgstr "Visualizzazione della mappa"
 
-#: app/configurator/components/chart-options-selector.tsx:1000
+#: app/configurator/components/chart-options-selector.tsx:993
 msgid "chart.map.layers.base.show"
 msgstr "Mostra mappa del mondo"
 
-#: app/configurator/components/chart-options-selector.tsx:1009
+#: app/configurator/components/chart-options-selector.tsx:1001
 msgid "chart.map.layers.base.view.locked"
 msgstr "Vista bloccata"
 
@@ -163,7 +163,7 @@ msgstr "Vista bloccata"
 #~ msgid "chart.map.layers.show"
 #~ msgstr "Mostra il livello"
 
-#: app/configurator/components/ui-helpers.ts:624
+#: app/configurator/components/field-i18n.ts:39
 msgid "chart.map.layers.symbol"
 msgstr "Simboli"
 
@@ -179,81 +179,81 @@ msgstr "Vista compatta"
 msgid "chart.table.number.of.lines"
 msgstr "Numero totale di linee:"
 
-#: app/configurator/table/table-chart-options.tsx:196
+#: app/configurator/table/table-chart-options.tsx:190
 msgid "columnStyle.bar"
 msgstr "Grafico a barre"
 
-#: app/configurator/table/table-chart-options.tsx:182
+#: app/configurator/table/table-chart-options.tsx:200
 msgid "columnStyle.categories"
 msgstr "Categorie"
 
-#: app/configurator/table/table-chart-options.tsx:192
+#: app/configurator/table/table-chart-options.tsx:186
 msgid "columnStyle.heatmap"
 msgstr "Mappa di calore"
 
-#: app/configurator/table/table-chart-options.tsx:178
-#: app/configurator/table/table-chart-options.tsx:188
+#: app/configurator/table/table-chart-options.tsx:182
+#: app/configurator/table/table-chart-options.tsx:196
 msgid "columnStyle.text"
 msgstr "Testo"
 
-#: app/configurator/table/table-chart-options.tsx:395
+#: app/configurator/table/table-chart-options.tsx:397
 msgid "columnStyle.textStyle.bold"
 msgstr "Grassetto"
 
-#: app/configurator/table/table-chart-options.tsx:388
+#: app/configurator/table/table-chart-options.tsx:390
 msgid "columnStyle.textStyle.regular"
 msgstr "Regular"
 
-#: app/configurator/interactive-filters/editor-time-brush.tsx:173
+#: app/configurator/interactive-filters/editor-time-brush.tsx:168
 msgid "controls..interactiveFilters.time.defaultSettings"
 msgstr "Impostazioni predefinite"
 
-#: app/configurator/components/ui-helpers.ts:590
+#: app/configurator/components/field-i18n.ts:5
 msgid "controls.axis.horizontal"
 msgstr "Asse orizzontale"
 
-#: app/configurator/components/ui-helpers.ts:598
+#: app/configurator/components/field-i18n.ts:13
 msgid "controls.axis.vertical"
 msgstr "Asse verticale"
 
-#: app/configurator/components/ui-helpers.ts:700
+#: app/configurator/components/field-i18n.ts:115
 msgid "controls.chart.type.area"
 msgstr "Aree"
 
-#: app/configurator/components/ui-helpers.ts:692
+#: app/configurator/components/field-i18n.ts:107
 msgid "controls.chart.type.bar"
 msgstr "Barre"
 
-#: app/configurator/components/ui-helpers.ts:688
+#: app/configurator/components/field-i18n.ts:103
 msgid "controls.chart.type.column"
 msgstr "Colonne"
 
-#: app/configurator/components/ui-helpers.ts:696
+#: app/configurator/components/field-i18n.ts:111
 msgid "controls.chart.type.line"
 msgstr "Linee"
 
-#: app/configurator/components/ui-helpers.ts:716
+#: app/configurator/components/field-i18n.ts:131
 msgid "controls.chart.type.map"
 msgstr "Mappa"
 
-#: app/configurator/components/ui-helpers.ts:708
+#: app/configurator/components/field-i18n.ts:123
 msgid "controls.chart.type.pie"
 msgstr "Torta"
 
-#: app/configurator/components/ui-helpers.ts:704
+#: app/configurator/components/field-i18n.ts:119
 msgid "controls.chart.type.scatterplot"
 msgstr "Scatterplot"
 
-#: app/configurator/components/ui-helpers.ts:712
+#: app/configurator/components/field-i18n.ts:127
 msgid "controls.chart.type.table"
 msgstr "Tabella"
 
-#: app/configurator/components/chart-options-selector.tsx:718
-#: app/configurator/components/ui-helpers.ts:602
+#: app/configurator/components/chart-options-selector.tsx:720
+#: app/configurator/components/field-i18n.ts:17
 msgid "controls.color"
 msgstr "Colore"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:47
+#: app/configurator/components/chart-controls/control-tab.tsx:45
 msgid "controls.color.add"
 msgstr "Aggiungi ..."
 
@@ -261,52 +261,52 @@ msgstr "Aggiungi ..."
 msgid "controls.color.opacity"
 msgstr "Trasparenza"
 
-#: app/configurator/components/chart-controls/color-palette.tsx:98
-#: app/configurator/components/chart-controls/color-ramp.tsx:120
+#: app/configurator/components/chart-controls/color-palette.tsx:112
+#: app/configurator/components/chart-controls/color-ramp.tsx:115
 msgid "controls.color.palette"
 msgstr "Palette di colori"
 
-#: app/configurator/components/chart-controls/color-ramp.tsx:160
+#: app/configurator/components/chart-controls/color-ramp.tsx:155
 msgid "controls.color.palette.diverging"
 msgstr ""
 
-#: app/configurator/components/chart-controls/color-palette.tsx:247
+#: app/configurator/components/chart-controls/color-palette.tsx:261
 msgid "controls.color.palette.reset"
 msgstr "Ripristina la tavolozza dei colori"
 
-#: app/configurator/components/chart-controls/color-ramp.tsx:144
+#: app/configurator/components/chart-controls/color-ramp.tsx:139
 msgid "controls.color.palette.sequential"
 msgstr "Sequenziale"
 
-#: app/configurator/components/chart-options-selector.tsx:840
+#: app/configurator/components/chart-options-selector.tsx:836
 msgid "controls.color.scale.discretization.jenks"
 msgstr "Jenks (interruzioni naturali)"
 
-#: app/configurator/components/chart-options-selector.tsx:833
+#: app/configurator/components/chart-options-selector.tsx:829
 msgid "controls.color.scale.discretization.quantiles"
 msgstr "Quantili (distribuzione omogenea dei valori)"
 
-#: app/configurator/components/chart-options-selector.tsx:826
+#: app/configurator/components/chart-options-selector.tsx:822
 msgid "controls.color.scale.discretization.quantize"
 msgstr "Intervalli uguali"
 
-#: app/configurator/components/chart-options-selector.tsx:818
+#: app/configurator/components/chart-options-selector.tsx:814
 msgid "controls.color.scale.interpolation"
 msgstr "Interpolazione"
 
-#: app/configurator/components/chart-options-selector.tsx:851
+#: app/configurator/components/chart-options-selector.tsx:846
 msgid "controls.color.scale.number.of.classes"
 msgstr "Numero di classi"
 
-#: app/configurator/components/chart-options-selector.tsx:788
+#: app/configurator/components/chart-options-selector.tsx:786
 msgid "controls.color.scale.type.continuous"
 msgstr "Continuo"
 
-#: app/configurator/components/chart-options-selector.tsx:800
+#: app/configurator/components/chart-options-selector.tsx:797
 msgid "controls.color.scale.type.discrete"
 msgstr "Discreto"
 
-#: app/configurator/components/chart-options-selector.tsx:738
+#: app/configurator/components/chart-options-selector.tsx:739
 msgid "controls.color.select"
 msgstr "Seleziona un colore"
 
@@ -314,15 +314,15 @@ msgstr "Seleziona un colore"
 msgid "controls.colorpicker.open"
 msgstr "Apri il selettore di colore"
 
-#: app/configurator/components/ui-helpers.ts:612
+#: app/configurator/components/field-i18n.ts:27
 msgid "controls.column.grouped"
 msgstr "raggruppate"
 
-#: app/configurator/components/ui-helpers.ts:608
+#: app/configurator/components/field-i18n.ts:23
 msgid "controls.column.stacked"
 msgstr "impilate"
 
-#: app/configurator/components/ui-helpers.ts:604
+#: app/configurator/components/field-i18n.ts:19
 msgid "controls.description"
 msgstr "Descrizione"
 
@@ -336,41 +336,41 @@ msgstr "Descrizione"
 #~ msgid "controls.dimension.none"
 #~ msgstr "Nessuno"
 
-#: app/charts/shared/chart-data-filters.tsx:217
+#: app/charts/shared/chart-data-filters.tsx:218
 msgid "controls.dimensionvalue.none"
 msgstr "Nessun filtro"
 
-#: app/configurator/components/filters.tsx:464
+#: app/configurator/components/filters.tsx:480
 msgid "controls.filter.nb-elements"
 msgstr "{0} di {1}"
 
-#: app/configurator/components/filters.tsx:396
-#: app/configurator/components/filters.tsx:642
+#: app/configurator/components/filters.tsx:414
+#: app/configurator/components/filters.tsx:658
 msgid "controls.filter.select.all"
 msgstr "Seleziona tutti"
 
-#: app/configurator/components/filters.tsx:403
-#: app/configurator/components/filters.tsx:640
+#: app/configurator/components/filters.tsx:421
+#: app/configurator/components/filters.tsx:656
 msgid "controls.filter.select.none"
 msgstr "Deseleziona tutto"
 
-#: app/configurator/components/filters.tsx:413
+#: app/configurator/components/filters.tsx:431
 msgid "controls.filters.select.filters"
 msgstr "Filtri"
 
-#: app/configurator/components/filters.tsx:445
+#: app/configurator/components/filters.tsx:461
 msgid "controls.filters.select.refresh-colors"
 msgstr "Aggiorna i colori"
 
-#: app/configurator/components/filters.tsx:427
+#: app/configurator/components/filters.tsx:445
 msgid "controls.filters.select.reset-colors"
 msgstr "Reimpostare i colori"
 
-#: app/configurator/components/filters.tsx:420
+#: app/configurator/components/filters.tsx:438
 msgid "controls.filters.select.selected-filters"
 msgstr "Filtri selezionati"
 
-#: app/configurator/interactive-filters/editor-time-interval-brush.tsx:129
+#: app/configurator/interactive-filters/editor-time-interval-brush.tsx:128
 msgid "controls.filters.time.range"
 msgstr "intervallo di tempo"
 
@@ -394,59 +394,68 @@ msgstr "Seleziona un elemento di design o una dimensione dei dati per modificarn
 msgid "controls.hint.describing.chart"
 msgstr "Seleziona una delle annotazioni proposte per modificarla."
 
-#: app/configurator/components/ui-helpers.ts:672
+#: app/configurator/components/field-i18n.ts:87
 msgid "controls.imputation"
 msgstr "Tipo di imputazione"
 
-#: app/configurator/components/chart-options-selector.tsx:887
-#: app/configurator/components/ui-helpers.ts:684
+#: app/configurator/components/chart-options-selector.tsx:881
+#: app/configurator/components/field-i18n.ts:99
 msgid "controls.imputation.type.linear"
 msgstr "Interpolazione lineare"
 
-#: app/configurator/components/chart-options-selector.tsx:880
-#: app/configurator/components/chart-options-selector.tsx:892
-#: app/configurator/components/ui-helpers.ts:676
+#: app/configurator/components/chart-options-selector.tsx:874
+#: app/configurator/components/chart-options-selector.tsx:886
+#: app/configurator/components/field-i18n.ts:91
 msgid "controls.imputation.type.none"
 msgstr "-"
 
-#: app/configurator/components/chart-options-selector.tsx:882
-#: app/configurator/components/ui-helpers.ts:680
+#: app/configurator/components/chart-options-selector.tsx:876
+#: app/configurator/components/field-i18n.ts:95
 msgid "controls.imputation.type.zeros"
 msgstr "Zeri"
 
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:94
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:117
 msgid "controls.interactive.filters.dataFilter"
 msgstr "Filtri di dati"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:285
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:104
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:97
+msgid "controls.interactive.filters.timeSlider"
+msgstr "Cursore del tempo"
+
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:327
 msgid "controls.interactiveFilters.dataFilters.toggledataFilters"
 msgstr "Mostra i filtri di dati"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:73
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:77
 msgid "controls.interactiveFilters.legend.toggleInteractiveLegend"
 msgstr "Mostra la legenda filtrante"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:213
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:222
 msgid "controls.interactiveFilters.time.noTimeDimension"
 msgstr "Nessuna dimensione temporale disponibile!"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:187
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:197
 msgid "controls.interactiveFilters.time.toggleTimeFilter"
 msgstr "Mostra i filtri temporali"
 
-#: app/configurator/components/ui-helpers.ts:720
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:263
+msgid "controls.interactiveFilters.time.toggleTimeSliderFilter"
+msgstr "Mostra il cursore del tempo"
+
+#: app/configurator/components/field-i18n.ts:135
 msgid "controls.language.english"
 msgstr "Inglese"
 
-#: app/configurator/components/ui-helpers.ts:728
+#: app/configurator/components/field-i18n.ts:143
 msgid "controls.language.french"
 msgstr "Francese"
 
-#: app/configurator/components/ui-helpers.ts:724
+#: app/configurator/components/field-i18n.ts:139
 msgid "controls.language.german"
 msgstr "Tedesco"
 
-#: app/configurator/components/ui-helpers.ts:732
+#: app/configurator/components/field-i18n.ts:147
 msgid "controls.language.italian"
 msgstr "Italiano"
 
@@ -455,7 +464,7 @@ msgstr "Italiano"
 #~ msgid "controls.location"
 #~ msgstr "Posizione"
 
-#: app/configurator/components/ui-helpers.ts:594
+#: app/configurator/components/field-i18n.ts:9
 msgid "controls.measure"
 msgstr "Misura"
 
@@ -463,23 +472,23 @@ msgstr "Misura"
 #~ msgid "controls.none"
 #~ msgstr "Nessuno"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:314
+#: app/configurator/components/chart-controls/control-tab.tsx:312
 msgid "controls.option.isActive"
 msgstr "Attivo"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:310
+#: app/configurator/components/chart-controls/control-tab.tsx:308
 msgid "controls.option.isNotActive"
 msgstr "Inattivo"
 
-#: app/configurator/components/chart-options-selector.tsx:781
+#: app/configurator/components/chart-options-selector.tsx:779
 msgid "controls.scale.type"
 msgstr "Tipo di scala"
 
-#: app/components/form.tsx:563
+#: app/components/form.tsx:566
 msgid "controls.search.clear"
 msgstr "Cancella la ricerca"
 
-#: app/configurator/components/chart-options-selector.tsx:347
+#: app/configurator/components/chart-options-selector.tsx:356
 msgid "controls.section.additional-information"
 msgstr "Informazioni aggiuntive"
 
@@ -491,7 +500,7 @@ msgstr "Opzioni del grafico"
 msgid "controls.section.columns"
 msgstr "Colonne"
 
-#: app/configurator/table/table-chart-options.tsx:240
+#: app/configurator/table/table-chart-options.tsx:244
 msgid "controls.section.columnstyle"
 msgstr "Stile della colonna"
 
@@ -503,12 +512,12 @@ msgstr "Filtri"
 msgid "controls.section.description"
 msgstr "Titolo e descrizione"
 
-#: app/configurator/components/chart-options-selector.tsx:403
-#: app/configurator/components/chart-options-selector.tsx:407
-#: app/configurator/table/table-chart-options.tsx:310
+#: app/configurator/components/chart-options-selector.tsx:411
+#: app/configurator/components/chart-options-selector.tsx:415
 #: app/configurator/table/table-chart-options.tsx:314
-#: app/configurator/table/table-chart-options.tsx:334
+#: app/configurator/table/table-chart-options.tsx:318
 #: app/configurator/table/table-chart-options.tsx:338
+#: app/configurator/table/table-chart-options.tsx:342
 msgid "controls.section.filter"
 msgstr "Filtro"
 
@@ -516,35 +525,35 @@ msgstr "Filtro"
 msgid "controls.section.groups"
 msgstr "Gruppi"
 
-#: app/configurator/components/chart-options-selector.tsx:921
+#: app/configurator/components/chart-options-selector.tsx:915
 msgid "controls.section.imputation"
 msgstr "Valori mancanti"
 
-#: app/configurator/components/chart-options-selector.tsx:926
+#: app/configurator/components/chart-options-selector.tsx:920
 msgid "controls.section.imputation.explanation"
 msgstr "Per questo tipo di grafico, i valori di sostituzione devono essere assegnati ai valori mancanti. Decidi la logica di imputazione o passa a un altro tipo di grafico."
 
-#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:65
+#: app/configurator/interactive-filters/interactive-filters-configurator.tsx:78
 msgid "controls.section.interactive.filters"
 msgstr "Filtri interattivi"
 
-#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:104
+#: app/configurator/interactive-filters/interactive-filters-config-options.tsx:117
 msgid "controls.section.interactiveFilters.dataFilters"
 msgstr "Filtri di dati"
 
-#: app/configurator/components/chart-options-selector.tsx:356
+#: app/configurator/components/chart-options-selector.tsx:365
 msgid "controls.section.show-standard-error"
 msgstr "Mostra l'errore standard"
 
-#: app/configurator/components/chart-options-selector.tsx:554
+#: app/configurator/components/chart-options-selector.tsx:557
 msgid "controls.section.sorting"
 msgstr "Ordina"
 
-#: app/configurator/table/table-chart-options.tsx:491
+#: app/configurator/table/table-chart-options.tsx:482
 msgid "controls.section.tableSettings"
 msgstr "Impostazioni della tabella"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:381
+#: app/configurator/table/table-chart-sorting-options.tsx:384
 msgid "controls.section.tableSorting"
 msgstr "Ordinamento della tabella"
 
@@ -553,32 +562,32 @@ msgid "controls.section.tableoptions"
 msgstr "Opzioni della tabella"
 
 #: app/configurator/components/chart-configurator.tsx:541
-#: app/configurator/components/chart-type-selector.tsx:139
+#: app/configurator/components/chart-type-selector.tsx:135
 #: app/configurator/table/table-chart-configurator.tsx:123
 msgid "controls.select.chart.type"
 msgstr "Tipo di grafico"
 
-#: app/configurator/components/chart-options-selector.tsx:455
+#: app/configurator/components/chart-options-selector.tsx:461
 msgid "controls.select.column.layout"
 msgstr "Layout a colonne"
 
-#: app/configurator/table/table-chart-options.tsx:245
+#: app/configurator/table/table-chart-options.tsx:249
 msgid "controls.select.columnStyle"
 msgstr "Stile della colonna"
 
-#: app/configurator/table/table-chart-options.tsx:460
+#: app/configurator/table/table-chart-options.tsx:457
 msgid "controls.select.columnStyle.barColorBackground"
 msgstr "Colore dello sfondo"
 
-#: app/configurator/table/table-chart-options.tsx:451
+#: app/configurator/table/table-chart-options.tsx:449
 msgid "controls.select.columnStyle.barColorNegative"
 msgstr "Colore dei valori negativi"
 
-#: app/configurator/table/table-chart-options.tsx:442
+#: app/configurator/table/table-chart-options.tsx:441
 msgid "controls.select.columnStyle.barColorPositive"
 msgstr "Colore dei valori positivi"
 
-#: app/configurator/table/table-chart-options.tsx:469
+#: app/configurator/table/table-chart-options.tsx:465
 msgid "controls.select.columnStyle.barShowBackground"
 msgstr "Mostra il colore dello sfondo"
 
@@ -586,21 +595,21 @@ msgstr "Mostra il colore dello sfondo"
 msgid "controls.select.columnStyle.columnColor"
 msgstr "Colore della colonna"
 
-#: app/configurator/table/table-chart-options.tsx:405
+#: app/configurator/table/table-chart-options.tsx:406
 msgid "controls.select.columnStyle.textColor"
 msgstr "Colore del testo"
 
-#: app/configurator/table/table-chart-options.tsx:381
+#: app/configurator/table/table-chart-options.tsx:383
 msgid "controls.select.columnStyle.textStyle"
 msgstr "Stile del testo"
 
-#: app/configurator/components/chart-options-selector.tsx:208
+#: app/configurator/components/chart-options-selector.tsx:220
 msgid "controls.select.dimension"
 msgstr "Seleziona una dimensione"
 
-#: app/configurator/components/chart-options-selector.tsx:209
-#: app/configurator/components/chart-options-selector.tsx:644
-#: app/configurator/components/chart-options-selector.tsx:723
+#: app/configurator/components/chart-options-selector.tsx:221
+#: app/configurator/components/chart-options-selector.tsx:647
+#: app/configurator/components/chart-options-selector.tsx:725
 msgid "controls.select.measure"
 msgstr "Seleziona una misura"
 
@@ -611,99 +620,99 @@ msgstr "Seleziona una misura"
 #~ msgid "controls.select.optional"
 #~ msgstr "facoltativo"
 
-#: app/configurator/components/filters.tsx:696
+#: app/configurator/components/filters.tsx:712
 msgid "controls.set-filters"
 msgstr "Filtrer"
 
-#: app/configurator/components/filters.tsx:703
+#: app/configurator/components/filters.tsx:719
 msgid "controls.set-filters-caption"
 msgstr "Pour de meilleurs résultats, ne sélectionnez pas plus de 7 valeurs dans la visualisation"
 
-#: app/configurator/components/filters.tsx:735
+#: app/configurator/components/filters.tsx:751
 msgid "controls.set-values-apply"
 msgstr "Appliquer les filtres"
 
-#: app/configurator/components/chart-options-selector.tsx:636
+#: app/configurator/components/chart-options-selector.tsx:639
 msgid "controls.size"
 msgstr "Grandezza"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:248
+#: app/configurator/table/table-chart-sorting-options.tsx:251
 msgid "controls.sorting.addDimension"
 msgstr "Aggiungi una dimensione"
 
-#: app/configurator/components/chart-options-selector.tsx:506
+#: app/configurator/components/chart-options-selector.tsx:509
 msgid "controls.sorting.byAuto"
 msgstr ""
 
-#: app/configurator/components/chart-options-selector.tsx:500
-#: app/configurator/components/chart-options-selector.tsx:510
+#: app/configurator/components/chart-options-selector.tsx:503
+#: app/configurator/components/chart-options-selector.tsx:513
 msgid "controls.sorting.byDimensionLabel"
 msgstr "Nome"
 
-#: app/configurator/components/ui-helpers.ts:632
-#: app/configurator/components/ui-helpers.ts:636
+#: app/configurator/components/field-i18n.ts:47
+#: app/configurator/components/field-i18n.ts:51
 msgid "controls.sorting.byDimensionLabel.ascending"
 msgstr "A → Z"
 
-#: app/configurator/components/ui-helpers.ts:640
-#: app/configurator/components/ui-helpers.ts:644
+#: app/configurator/components/field-i18n.ts:55
+#: app/configurator/components/field-i18n.ts:59
 msgid "controls.sorting.byDimensionLabel.descending"
 msgstr "Z → A"
 
-#: app/configurator/components/chart-options-selector.tsx:502
+#: app/configurator/components/chart-options-selector.tsx:505
 msgid "controls.sorting.byMeasure"
 msgstr "Misura"
 
-#: app/configurator/components/ui-helpers.ts:664
+#: app/configurator/components/field-i18n.ts:79
 msgid "controls.sorting.byMeasure.ascending"
 msgstr "1 → 9"
 
-#: app/configurator/components/ui-helpers.ts:668
+#: app/configurator/components/field-i18n.ts:83
 msgid "controls.sorting.byMeasure.descending"
 msgstr "9 → 1"
 
-#: app/configurator/components/chart-options-selector.tsx:504
+#: app/configurator/components/chart-options-selector.tsx:507
 msgid "controls.sorting.byTotalSize"
 msgstr "Grandezza totale"
 
-#: app/configurator/components/ui-helpers.ts:648
+#: app/configurator/components/field-i18n.ts:63
 msgid "controls.sorting.byTotalSize.ascending"
 msgstr "Il più grande per ultimo"
 
-#: app/configurator/components/ui-helpers.ts:660
+#: app/configurator/components/field-i18n.ts:75
 msgid "controls.sorting.byTotalSize.largestBottom"
 msgstr "Il più grande sotto"
 
-#: app/configurator/components/ui-helpers.ts:652
+#: app/configurator/components/field-i18n.ts:67
 msgid "controls.sorting.byTotalSize.largestFirst"
 msgstr "Il più grande per primo"
 
-#: app/configurator/components/ui-helpers.ts:656
+#: app/configurator/components/field-i18n.ts:71
 msgid "controls.sorting.byTotalSize.largestTop"
 msgstr "Il più grande sopra"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:162
+#: app/configurator/table/table-chart-sorting-options.tsx:161
 msgid "controls.sorting.removeOption"
 msgstr "Rimuovi l'ordinamento"
 
-#: app/configurator/table/table-chart-sorting-options.tsx:214
+#: app/configurator/table/table-chart-sorting-options.tsx:213
 msgid "controls.sorting.selectDimension"
 msgstr "Seleziona una dimensione ..."
 
-#: app/configurator/components/ui-helpers.ts:628
-#: app/configurator/table/table-chart-sorting-options.tsx:319
+#: app/configurator/components/field-i18n.ts:43
+#: app/configurator/table/table-chart-sorting-options.tsx:322
 msgid "controls.sorting.sortBy"
 msgstr "Ordina per"
 
-#: app/configurator/components/chart-type-selector.tsx:144
+#: app/configurator/components/chart-type-selector.tsx:140
 msgid "controls.switch.chart.type"
 msgstr "Passa a un altro tipo di grafico mantenendo la maggior parte delle impostazioni dei filtri"
 
-#: app/configurator/table/table-chart-options.tsx:217
+#: app/configurator/table/table-chart-options.tsx:221
 msgid "controls.table.column.group"
 msgstr "Raggruppa secondo questa colonna"
 
-#: app/configurator/table/table-chart-options.tsx:227
+#: app/configurator/table/table-chart-options.tsx:231
 msgid "controls.table.column.hide"
 msgstr "Nascondi la colonna"
 
@@ -715,11 +724,11 @@ msgstr "Opzioni"
 msgid "controls.table.sorting"
 msgstr "Ordinamento"
 
-#: app/configurator/table/table-chart-options.tsx:495
+#: app/configurator/table/table-chart-options.tsx:486
 msgid "controls.tableSettings.showSearch"
 msgstr "Mostra il campo di ricerca"
 
-#: app/configurator/components/ui-helpers.ts:603
+#: app/configurator/components/field-i18n.ts:18
 msgid "controls.title"
 msgstr "Titolo"
 
@@ -747,11 +756,11 @@ msgstr "Questo grafico non utilizza una fonte di dati affidabile."
 msgid "dataset-preview.back-to-results"
 msgstr "Torna ai set di dati"
 
-#: app/components/chart-footnotes.tsx:111
+#: app/components/chart-footnotes.tsx:113
 msgid "dataset.footnotes.dataset"
 msgstr "Set di dati"
 
-#: app/components/chart-footnotes.tsx:132
+#: app/components/chart-footnotes.tsx:134
 msgid "dataset.footnotes.updated"
 msgstr "Ultimo aggiornamento"
 
@@ -759,7 +768,7 @@ msgstr "Ultimo aggiornamento"
 msgid "dataset.hasImputedValues"
 msgstr "In questo set di dati mancano alcuni dati. Questi sono stati interpolati per colmare le lacune.."
 
-#: app/configurator/components/dataset-browse.tsx:418
+#: app/configurator/components/dataset-browse.tsx:427
 msgid "dataset.includeDrafts"
 msgstr "Includere le bozze"
 
@@ -775,7 +784,7 @@ msgstr "Punti di contatto"
 msgid "dataset.metadata.furtherinformation"
 msgstr "Addizionali informazioni"
 
-#: app/components/chart-footnotes.tsx:198
+#: app/components/chart-footnotes.tsx:200
 #: app/configurator/components/dataset-metadata.tsx:118
 msgid "dataset.metadata.learnmore"
 msgstr "Ulteriori informazioni sul set di dati"
@@ -788,21 +797,21 @@ msgstr "Fonte"
 msgid "dataset.metadata.version"
 msgstr "versione"
 
-#: app/configurator/components/dataset-browse.tsx:347
+#: app/configurator/components/dataset-browse.tsx:351
 msgid "dataset.order.newest"
 msgstr "Più recente"
 
-#: app/configurator/components/dataset-browse.tsx:339
+#: app/configurator/components/dataset-browse.tsx:343
 msgid "dataset.order.relevance"
 msgstr "Rilevanza"
 
-#: app/configurator/components/dataset-browse.tsx:343
+#: app/configurator/components/dataset-browse.tsx:347
 msgid "dataset.order.title"
 msgstr "Titolo"
 
 #: app/components/chart-preview.tsx:85
 #: app/components/chart-published.tsx:126
-#: app/configurator/components/dataset-preview.tsx:53
+#: app/configurator/components/dataset-preview.tsx:109
 msgid "dataset.publicationStatus.draft.warning"
 msgstr "Attenzione, questo set di dati è una bozza.<0/><1>Non utilizzare questo grafico per un rapporto!</1>"
 
@@ -810,27 +819,27 @@ msgstr "Attenzione, questo set di dati è una bozza.<0/><1>Non utilizzare questo
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Attenzione, questo set di dati è scaduto.<0/><1>Non utilizzare questo grafico per un rapporto!</1>"
 
-#: app/configurator/components/dataset-browse.tsx:406
+#: app/configurator/components/dataset-browse.tsx:415
 msgid "dataset.results"
 msgstr "{0, plural, zero {Nessun risultato} one {# resultato} other {# risultate}}"
 
-#: app/configurator/components/dataset-browse.tsx:351
+#: app/configurator/components/dataset-browse.tsx:355
 msgid "dataset.search.label"
 msgstr "Cerca"
 
-#: app/configurator/components/dataset-browse.tsx:356
+#: app/configurator/components/dataset-browse.tsx:360
 msgid "dataset.search.placeholder"
 msgstr ""
 
-#: app/configurator/components/dataset-browse.tsx:437
+#: app/configurator/components/dataset-browse.tsx:446
 msgid "dataset.sortby"
 msgstr "Ordina per"
 
-#: app/configurator/components/dataset-browse.tsx:1142
+#: app/configurator/components/dataset-browse.tsx:1152
 msgid "dataset.tag.draft"
 msgstr "Bozza"
 
-#: app/configurator/components/dataset-preview.tsx:126
+#: app/configurator/components/dataset-preview.tsx:171
 msgid "datatable.showing.first.rows"
 msgstr "Sono mostrate soltanto le prime 10 righe"
 
@@ -894,7 +903,7 @@ msgstr "È possibile condividere questa visualizzazione copiando l'URL o incorpo
 msgid "hint.loading.data"
 msgstr "Caricamento dei dati..."
 
-#: app/configurator/components/chart-type-selector.tsx:157
+#: app/configurator/components/chart-type-selector.tsx:153
 msgid "hint.no.visualization.with.dataset"
 msgstr "Nessuna visualizzazione può essere creata con il dataset selezionato."
 
@@ -918,11 +927,11 @@ msgstr "Valori negativi"
 msgid "hint.publication.success"
 msgstr "La tua visualizzazione è ora pubblicata. Condividila copiando l'URL o utilizzando le opzioni di incorporamento."
 
-#: app/charts/shared/chart-data-filters.tsx:82
+#: app/charts/shared/chart-data-filters.tsx:83
 msgid "interactive.data.filters.hide"
 msgstr "Nascondi i filtri"
 
-#: app/charts/shared/chart-data-filters.tsx:84
+#: app/charts/shared/chart-data-filters.tsx:85
 msgid "interactive.data.filters.show"
 msgstr "Mostra i filtri"
 
@@ -935,19 +944,19 @@ msgstr "Logo della Confederazione svizzera"
 #~ msgid "metadata.dataset"
 #~ msgstr "Dataset"
 
-#: app/components/chart-footnotes.tsx:217
+#: app/components/chart-footnotes.tsx:219
 msgid "metadata.link.created.with.visualize"
 msgstr "Creato con visualize.admin.ch"
 
-#: app/components/chart-footnotes.tsx:143
+#: app/components/chart-footnotes.tsx:145
 msgid "metadata.source"
 msgstr "Fonte"
 
-#: app/components/chart-footnotes.tsx:181
+#: app/components/chart-footnotes.tsx:183
 msgid "metadata.switch.chart"
 msgstr "Passare alla visualizzazione del grafico"
 
-#: app/components/chart-footnotes.tsx:183
+#: app/components/chart-footnotes.tsx:185
 msgid "metadata.switch.table"
 msgstr "Passare alla vista tabella"
 
@@ -987,7 +996,7 @@ msgstr "Ecco una visualizzazione che ho creato usando visualize.admin.ch"
 msgid "publication.share.mail.subject"
 msgstr "visualize.admin.ch"
 
-#: app/configurator/components/filters.tsx:616
+#: app/configurator/components/filters.tsx:632
 msgid "select.controls.filters.search"
 msgstr "Cerca"
 
@@ -1003,8 +1012,8 @@ msgstr "Personalizza la tua visualizzazione utilizzando le opzioni di segmentazi
 msgid "table.column.no"
 msgstr "Colonna {0}"
 
-#: app/components/chart-footnotes.tsx:113
-#: app/components/chart-footnotes.tsx:134
-#: app/components/chart-footnotes.tsx:145
+#: app/components/chart-footnotes.tsx:115
+#: app/components/chart-footnotes.tsx:136
+#: app/components/chart-footnotes.tsx:147
 msgid "typography.colon"
 msgstr ": "
diff --git a/app/test/__fixtures/config/dev/chartConfig-column-covid19.json b/app/test/__fixtures/config/dev/chartConfig-column-covid19.json
index a40d4a74a..d03c57cd2 100644
--- a/app/test/__fixtures/config/dev/chartConfig-column-covid19.json
+++ b/app/test/__fixtures/config/dev/chartConfig-column-covid19.json
@@ -25,6 +25,9 @@
         "to": ""
       }
     },
+    "timeSlider": {
+      "componentIri": ""
+    },
     "dataFilters": {
       "active": false,
       "componentIris": []
diff --git a/app/test/__fixtures/config/prod/line-1.json b/app/test/__fixtures/config/prod/line-1.json
index 3d1ddf0ad..3626ee28c 100644
--- a/app/test/__fixtures/config/prod/line-1.json
+++ b/app/test/__fixtures/config/prod/line-1.json
@@ -11,7 +11,7 @@
       "url": "https://lindas.admin.ch/query"
     },
     "chartConfig": {
-      "version": "1.2.1",
+      "version": "1.3.0",
       "fields": {
         "x": {
           "componentIri": "http://environment.ld.admin.ch/foen/px/0703010000_105/dimension/0"
diff --git a/app/utils/chart-config/versioning.ts b/app/utils/chart-config/versioning.ts
index 44f26be35..9f0230ab8 100644
--- a/app/utils/chart-config/versioning.ts
+++ b/app/utils/chart-config/versioning.ts
@@ -1,6 +1,6 @@
 import produce from "immer";
 
-export const CHART_CONFIG_VERSION = "1.2.1";
+export const CHART_CONFIG_VERSION = "1.3.0";
 
 type Migration = {
   description: string;
@@ -430,6 +430,49 @@ const migrations: Migration[] = [
         });
       }
 
+      return newConfig;
+    },
+  },
+  {
+    description: `ALL
+    interactiveFiltersConfig {
+      + timeSlider
+    }`,
+    from: "1.2.1",
+    to: "1.3.0",
+    up: (config: any) => {
+      let newConfig = { ...config, version: "1.3.0" };
+
+      const { interactiveFiltersConfig } = newConfig;
+
+      if (interactiveFiltersConfig) {
+        newConfig = produce(newConfig, (draft: any) => {
+          draft.interactiveFiltersConfig = {
+            ...draft.interactiveFiltersConfig,
+            timeSlider: {
+              componentIri: "",
+            },
+          };
+        });
+      }
+
+      return newConfig;
+    },
+    down: (config: any) => {
+      let newConfig = { ...config, version: "1.2.1" };
+
+      const { interactiveFiltersConfig } = newConfig;
+
+      if (interactiveFiltersConfig) {
+        newConfig = produce(newConfig, (draft: any) => {
+          draft.interactiveFiltersConfig = {
+            legend: draft.interactiveFiltersConfig.legend,
+            time: draft.interactiveFiltersConfig.time,
+            dataFilters: draft.interactiveFiltersConfig.dataFilters,
+          };
+        });
+      }
+
       return newConfig;
     },
   },
diff --git a/e2e/fixtures/offentliche-ausgaben-chart-config.json b/e2e/fixtures/offentliche-ausgaben-chart-config.json
index eab294344..3584a2196 100644
--- a/e2e/fixtures/offentliche-ausgaben-chart-config.json
+++ b/e2e/fixtures/offentliche-ausgaben-chart-config.json
@@ -10,6 +10,7 @@
     "description": { "de": "", "fr": "", "it": "", "en": "" }
   },
   "chartConfig": {
+    "version": "1.2.1",
     "chartType": "column",
     "filters": {
       "https://environment.ld.admin.ch/foen/fab_Offentliche_Ausgaben_test3/kurzel": {
@@ -27,7 +28,6 @@
       "dataFilters": { "active": false, "componentIris": [] }
     },
     "fields": {
-      "version": "1.2.1",
       "x": {
         "componentIri": "https://environment.ld.admin.ch/foen/fab_Offentliche_Ausgaben_test3/jahr",
         "sorting": { "sortingType": "byDimensionLabel", "sortingOrder": "asc" }