diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx
index 6e4d711c18..da5968f1db 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx
@@ -6,7 +6,7 @@ import { useIndicateurValeurs } from '@/app/app/pages/collectivite/Indicateurs/u
 import PictoIndicateurVide from '@/app/ui/pictogrammes/PictoIndicateurVide';
 import { Button, EmptyCard, Icon } from '@/ui';
 import DownloadIndicateurChartModal from '../../chart/DownloadIndicateurChart';
-import IndicateurChartNew from '../../chart/IndicateurChartNew';
+import IndicateurChart from '../../chart/IndicateurChart';
 import { DataSourceTooltip } from './DataSourceTooltip';
 import { transformeValeurs } from './transformeValeurs';
 
@@ -81,7 +81,7 @@ const IndicateurDetailChart = ({
           )}
         </div>
 
-        <IndicateurChartNew data={data} isLoading={isLoadingValeurs} />
+        <IndicateurChart data={data} isLoading={isLoadingValeurs} />
 
         {!!metadonnee && (
           <DataSourceTooltip metadonnee={metadonnee}>
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/DownloadIndicateurChart.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/DownloadIndicateurChart.tsx
index c570d8719a..6447be33bb 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/DownloadIndicateurChart.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/DownloadIndicateurChart.tsx
@@ -1,6 +1,6 @@
 import { Modal } from '@/ui';
 import { OpenState } from '@/ui/utils/types';
-import IndicateurChartNew, { IndicateurChartData } from './IndicateurChartNew';
+import IndicateurChart, { IndicateurChartData } from './IndicateurChart';
 
 type Props = {
   openState: OpenState;
@@ -22,7 +22,7 @@ const DownloadIndicateurChartModal = ({
       size="xl"
       openState={openState}
       render={() => (
-        <IndicateurChartNew
+        <IndicateurChart
           data={data}
           isLoading={isLoading}
           title={title}
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChart.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChart.tsx
index 8999ed46df..c2ba10a8ff 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChart.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChart.tsx
@@ -1,157 +1,107 @@
-import { CustomLayerProps } from '@nivo/line';
-import classNames from 'classnames';
-
-import { SliceTooltip } from '@/app/app/pages/collectivite/Indicateurs/chart/SliceTooltip';
-import Chart, { ChartInfosProps } from '@/app/ui/charts/Chart';
-import { LineChartProps } from '@/app/ui/charts/Line/LineChart';
-import PictoIndicateurVide from '@/app/ui/pictogrammes/PictoIndicateurVide';
+import {
+  LAYERS,
+  ReactECharts,
+  makeLineSeries,
+  makeOption,
+} from '@/app/ui/charts/echarts';
 import SpinnerLoader from '@/app/ui/shared/SpinnerLoader';
 import { TIndicateurValeur } from '../useIndicateurValeurs';
-import { getXTickValues, indicateurBaseData, prepareData } from './utils';
 
-/** Data issues de l'api pour générer les données formatées pour Nivo */
+/** Data issues de l'api pour générer les données formatées pour echarts */
+/** TODO: le format devra être revu après la refonte indicateurs et la maj du fetch */
 export type IndicateurChartData = {
   /** Unité affichée pour l'axe des abscisses et le tooltip */
   unite?: string;
-  /** Valeurs d'un indicateur issues de l'API  */
-  valeurs: TIndicateurValeur[];
+  /** Valeurs de l'indicateur  */
+  valeurs: {
+    objectifs: TIndicateurValeur[];
+    resultats: TIndicateurValeur[];
+  };
 };
 
 /** Props du graphique générique Indicateur */
 export type IndicateurChartProps = {
   /** Data issues de l'api pour générer les données formatées pour Nivo */
   data: IndicateurChartData;
+  /** Titre du graphe */
+  title?: string;
   /** Booléen de chargement des données et infos du graphique */
   isLoading: boolean;
+  /** Taille du graphe */
+  variant?: 'thumbnail' | 'modal' | 'detail';
   /** ClassName du container */
   className?: string;
-  /** Configuration du graphique */
-  chartConfig?: Omit<LineChartProps, 'data'>;
-  /** Information du graphique pour la modale de téléchargement */
-  chartInfos?: ChartInfosProps;
 };
 
-/** Charge les données d'un indicateur et affiche le graphique */
 const IndicateurChart = ({
   data,
+  title,
   isLoading,
+  variant = 'detail',
   className,
-  chartConfig,
-  chartInfos,
 }: IndicateurChartProps) => {
-  const noData = data.valeurs.length === 0;
+  const { objectifs, resultats } = data.valeurs;
+
+  const noData = objectifs.length === 0 && resultats.length === 0;
+
+  if (noData) return null;
+
+  const dataset = [
+    {
+      color: LAYERS.resultats.color,
+      id: 'resultats',
+      name: LAYERS.resultats.label,
+      source: resultats.map((res) => ({
+        x: new Date(res.annee, 0, 1).toISOString(),
+        y: res.valeur,
+      })),
+    },
+    {
+      color: LAYERS.objectifs.color,
+      id: 'objectifs',
+      name: LAYERS.objectifs.label,
+      source: objectifs.map((obj) => ({
+        x: new Date(obj.annee, 0, 1).toISOString(),
+        y: obj.valeur,
+      })),
+    },
+  ];
 
-  /**
-   * On déconstruit chartConfig afin de faire un traitement sur la valeur `gridXValues`
-   * et quand même spread le reste des valeurs dans `axisBottom`
-   */
-  const { axisBottom, ...config } = chartConfig ?? {};
+  const style = { height: 450 };
+  if (variant === 'thumbnail') style.height = 320;
+  if (variant === 'modal') style.height = 550;
 
-  /** Permet de faire matcher le nombre de ligne de la grille avec le nombre de valeur affichées sur les ordonnées */
-  const axisBottomTickValues = config?.gridXValues
-    ? getXTickValues(data.valeurs, parseInt(config?.gridXValues as string))
-    : getXTickValues(data.valeurs);
+  let grid = {};
+  if (variant === 'thumbnail') {
+    grid = { top: '8%', bottom: '15%', right: '5%' };
+  }
+  if (variant === 'detail') {
+    grid = { left: 32, right: 32 };
+  }
+
+  const option = makeOption({
+    option: {
+      dataset,
+      series: makeLineSeries(dataset),
+      grid,
+      title: variant === 'detail' ? { left: 28 } : {},
+    },
+    titre: title,
+    unite: variant !== 'thumbnail' ? data.unite : undefined,
+    disableToolbox: variant !== 'modal',
+  });
 
   return (
-    <div
-      className={classNames('grow flex items-center justify-center', className)}
-    >
-      {
-        // Chargement
-        isLoading ? (
-          <div
-            className={classNames(
-              'flex justify-center items-center',
-              config.className
-            )}
-          >
-            <SpinnerLoader className="w-8 h-8 fill-primary-5" />
-          </div>
-        ) : // Pas de données
-        noData ? (
-          <PictoIndicateurVide className="grow" />
-        ) : (
-          // Graphique
-          <Chart
-            line={{
-              chart: {
-                data: prepareData(data.valeurs),
-                theme: {
-                  axis: {
-                    ticks: {
-                      text: {
-                        fontSize: 14,
-                      },
-                    },
-                  },
-                },
-                colors: { datum: 'color' },
-                className,
-                layers: [
-                  'grid',
-                  'markers',
-                  'areas',
-                  generateStyledLines,
-                  'slices',
-                  'points',
-                  'axes',
-                  'legends',
-                ],
-                xScale: {
-                  type: 'time',
-                  precision: 'year',
-                  format: '%Y',
-                  min: 'auto',
-                  max: 'auto',
-                },
-                gridXValues: axisBottomTickValues,
-                axisBottom: {
-                  format: '%Y',
-                  tickValues: axisBottomTickValues,
-                  ...axisBottom,
-                },
-                gridYValues: 5,
-                axisLeft: {
-                  tickValues: config.gridYValues ?? 5,
-                },
-                axisLeftLegend: data.unite,
-                sliceTooltip: (props) => (
-                  <SliceTooltip {...props} unite={data.unite ?? ''} />
-                ),
-                ...config,
-              },
-            }}
-            infos={chartInfos}
-          />
-        )
-      }
+    <div className={className} style={style}>
+      {isLoading ? (
+        <div className="h-full w-full rounded-lg flex justify-center items-center bg-primary-0">
+          <SpinnerLoader className="w-8 h-8 fill-primary-5" />
+        </div>
+      ) : (
+        <ReactECharts option={option} style={style} />
+      )}
     </div>
   );
 };
 
 export default IndicateurChart;
-
-/** Génère les lignes en appliquant le style correspondant à l'id de la série */
-const generateStyledLines = ({
-  series,
-  lineGenerator,
-  xScale,
-  yScale,
-}: CustomLayerProps) => {
-  return series.map(({ id, data, color }) => (
-    <path
-      key={id}
-      d={
-        lineGenerator(
-          data.map((d) => ({
-            x: (xScale as any)(d.data.x),
-            y: (yScale as any)(d.data.y),
-          }))
-        ) || undefined
-      }
-      fill="none"
-      stroke={color}
-      style={indicateurBaseData[id].style}
-    />
-  ));
-};
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChartNew.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChartNew.tsx
deleted file mode 100644
index da45a3ef80..0000000000
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/chart/IndicateurChartNew.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import {
-  LAYERS,
-  ReactECharts,
-  makeLineSeries,
-  makeOption,
-} from '@/app/ui/charts/echarts';
-import SpinnerLoader from '@/app/ui/shared/SpinnerLoader';
-import { TIndicateurValeur } from '../useIndicateurValeurs';
-
-/** Data issues de l'api pour générer les données formatées pour echarts */
-/** TODO: le format devra être revu après la refonte indicateurs et la maj du fetch */
-export type IndicateurChartData = {
-  /** Unité affichée pour l'axe des abscisses et le tooltip */
-  unite?: string;
-  /** Valeurs de l'indicateur  */
-  valeurs: {
-    objectifs: TIndicateurValeur[];
-    resultats: TIndicateurValeur[];
-  };
-};
-
-/** Props du graphique générique Indicateur */
-export type IndicateurChartProps = {
-  /** Data issues de l'api pour générer les données formatées pour Nivo */
-  data: IndicateurChartData;
-  /** Titre du graphe */
-  title?: string;
-  /** Booléen de chargement des données et infos du graphique */
-  isLoading: boolean;
-  /** Taille du graphe */
-  variant?: 'thumbnail' | 'modal' | 'detail';
-  /** ClassName du container */
-  className?: string;
-};
-
-const IndicateurChartNew = ({
-  data,
-  title,
-  isLoading,
-  variant = 'detail',
-  className,
-}: IndicateurChartProps) => {
-  const { objectifs, resultats } = data.valeurs;
-
-  const noData = objectifs.length === 0 && resultats.length === 0;
-
-  if (noData) return null;
-
-  const dataset = [
-    {
-      color: LAYERS.resultats.color,
-      id: 'resultats',
-      name: LAYERS.resultats.label,
-      source: resultats.map((res) => ({
-        x: new Date(res.annee, 0, 1).toISOString(),
-        y: res.valeur,
-      })),
-    },
-    {
-      color: LAYERS.objectifs.color,
-      id: 'objectifs',
-      name: LAYERS.objectifs.label,
-      source: objectifs.map((obj) => ({
-        x: new Date(obj.annee, 0, 1).toISOString(),
-        y: obj.valeur,
-      })),
-    },
-  ];
-
-  const style = { height: 450 };
-  if (variant === 'thumbnail') style.height = 320;
-  if (variant === 'modal') style.height = 550;
-
-  let grid = {};
-  if (variant === 'thumbnail') {
-    grid = { top: '8%', bottom: '15%', right: '5%' };
-  }
-  if (variant === 'detail') {
-    grid = { left: 32, right: 32 };
-  }
-
-  const option = makeOption({
-    option: {
-      dataset,
-      series: makeLineSeries(dataset),
-      grid,
-      title: variant === 'detail' ? { left: 28 } : {},
-    },
-    titre: title,
-    unite: variant !== 'thumbnail' ? data.unite : undefined,
-    disableToolbox: variant !== 'modal',
-  });
-
-  return (
-    <div className={className} style={style}>
-      {isLoading ? (
-        <div className="h-full w-full rounded-lg flex justify-center items-center bg-primary-0">
-          <SpinnerLoader className="w-8 h-8 fill-primary-5" />
-        </div>
-      ) : (
-        <ReactECharts option={option} style={style} />
-      )}
-    </div>
-  );
-};
-
-export default IndicateurChartNew;
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/lists/IndicateurCard/IndicateurCard.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/lists/IndicateurCard/IndicateurCard.tsx
index 08ae85c8ff..d16ce75f63 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/lists/IndicateurCard/IndicateurCard.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/lists/IndicateurCard/IndicateurCard.tsx
@@ -16,7 +16,6 @@ import {
   IndicateurListItem,
 } from '@/api/indicateurs/domain';
 import { transformeValeurs } from '@/app/app/pages/collectivite/Indicateurs/Indicateur/detail/transformeValeurs';
-import { IndicateurChartProps } from '@/app/app/pages/collectivite/Indicateurs/chart/IndicateurChart';
 import { useIndicateurChartInfo } from '@/app/app/pages/collectivite/Indicateurs/chart/useIndicateurChartInfo';
 import BadgeIndicateurPerso from '@/app/app/pages/collectivite/Indicateurs/components/BadgeIndicateurPerso';
 import BadgeOpenData from '@/app/app/pages/collectivite/Indicateurs/components/BadgeOpenData';
@@ -25,9 +24,9 @@ import PictoIndicateurComplet from '@/app/ui/pictogrammes/PictoIndicateurComplet
 import PictoIndicateurVide from '@/app/ui/pictogrammes/PictoIndicateurVide';
 import { BadgeACompleter } from '@/app/ui/shared/Badge/BadgeACompleter';
 import DownloadIndicateurChartModal from '../../chart/DownloadIndicateurChart';
-import IndicateurChartNew, {
+import IndicateurChart, {
   IndicateurChartData,
-} from '../../chart/IndicateurChartNew';
+} from '../../chart/IndicateurChart';
 import { getIndicateurRestant } from './utils';
 
 /** Props de la carte Indicateur */
@@ -49,8 +48,6 @@ export type IndicateurCardProps = {
   href?: string;
   /** ClassName de la carte */
   className?: string;
-  /** Props du composant `IndicateurChart` sans ce qui est relatif aux données */
-  chart?: Omit<IndicateurChartProps, 'data' | 'isLoading'>;
   /** Affiche ou masque le graphique */
   hideChart?: boolean;
   /** Affiche ou masque le graphique quand il n'y a pas de valeur */
@@ -125,7 +122,6 @@ export const IndicateurCardBase = ({
   className,
   isLoading,
   definition,
-  chart,
   chartInfo,
   isEditable = false,
   hideChart = false,
@@ -258,7 +254,7 @@ export const IndicateurCardBase = ({
                   }
                 />
               ) : (
-                <IndicateurChartNew
+                <IndicateurChart
                   data={data}
                   isLoading={isLoading}
                   variant="thumbnail"
diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/IndicateurChartsGrid.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/IndicateurChartsGrid.tsx
index fb3919ee93..49427c3455 100644
--- a/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/IndicateurChartsGrid.tsx
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/IndicateurChartsGrid.tsx
@@ -23,7 +23,7 @@ const IndicateurChartsGrid = (props: TIndicateurChartsGridProps) => {
   const { definitions, view } = props;
 
   return (
-    <div className="grid lg:grid-cols-2 gap-x-6 gap-y-8">
+    <div className="grid lg:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-8">
       {definitions?.map((definition) => (
         <IndicateurChartContainer
           key={definition.id}