> ## Documentation Index
> Fetch the complete documentation index at: https://docs.get-clara.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Paramètres du graphique

> Configurez vos graphiques pour afficher les données exactement selon vos besoins.

export const ChartIcon = ({icon, size = 20}) => {
  const icons = {
    'database': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0" />
        <path d="M4 6v6a8 3 0 0 0 16 0v-6" />
        <path d="M4 12v6a8 3 0 0 0 16 0v-6" />
      </svg>,
    'filter': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227" />
      </svg>,
    'axis-x': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 13v.01" />
        <path d="M4 9v.01" />
        <path d="M4 5v.01" />
        <path d="M17 20l3 -3l-3 -3" />
        <path d="M4 17h16" />
      </svg>,
    'axis-y': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M11 20h-.01" />
        <path d="M15 20h-.01" />
        <path d="M19 20h-.01" />
        <path d="M4 7l3 -3l3 3" />
        <path d="M7 20v-16" />
      </svg>,
    'sum': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" />
      </svg>,
    'chart-pie': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M10 3.2a9 9 0 1 0 10.8 10.8a1 1 0 0 0 -1 -1h-6.8a2 2 0 0 1 -2 -2v-7a.9 .9 0 0 0 -1 -.8" />
        <path d="M15 3.5a9 9 0 0 1 5.5 5.5h-4.5a1 1 0 0 1 -1 -1v-4.5" />
      </svg>,
    'chart-line': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 19l16 0" />
        <path d="M4 15l4 -6l4 2l4 -5l4 4" />
      </svg>,
    'calendar': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" />
        <path d="M16 3v4" />
        <path d="M8 3v4" />
        <path d="M4 11h16" />
        <path d="M11 15h1" />
        <path d="M12 15v3" />
      </svg>,
    'arrows-sort': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 9l4 -4l4 4m-4 -4v14" />
        <path d="M21 15l-4 4l-4 -4m4 4v-14" />
      </svg>,
    'filters': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M7 8a5 5 0 1 0 10 0a5 5 0 1 0 -10 0" />
        <path d="M8 11a5 5 0 1 0 3.998 1.997" />
        <path d="M12.002 19.003a5 5 0 1 0 3.998 -8.003" />
      </svg>,
    'chart-bar-popular': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -6" />
        <path d="M9 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -10" />
        <path d="M15 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -14" />
        <path d="M4 20h14" />
      </svg>,
    'math-min': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M15 18a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
        <path d="M3 13s1 -9 4 -9c2.48 0 5.643 9.565 8.36 12.883" />
        <path d="M18.748 17.038c.702 -.88 1.452 -3.56 2.252 -8.038" />
      </svg>,
    'math-max': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M5 6a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
        <path d="M3 15s.616 -5.544 2.332 -7.93" />
        <path d="M8.637 7.112c2.717 3.313 5.882 12.888 8.363 12.888c2 0 3.333 -3 4 -9" />
      </svg>,
    'color-swatch': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M19 3h-4a2 2 0 0 0 -2 2v12a4 4 0 0 0 8 0v-12a2 2 0 0 0 -2 -2" />
        <path d="M13 7.35l-2 -2a2 2 0 0 0 -2.828 0l-2.828 2.828a2 2 0 0 0 0 2.828l9 9" />
        <path d="M7.3 13h-2.3a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h12" />
        <path d="M17 17l0 .01" />
      </svg>,
    'gizmo': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M20 19l-8 -5.5l-8 5.5" />
        <path d="M12 4v9.5" />
        <path d="M11 4a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
        <path d="M3 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
        <path d="M19 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
      </svg>,
    'stack-2': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M12 4l-8 4l8 4l8 -4l-8 -4" />
        <path d="M4 12l8 4l8 -4" />
        <path d="M4 16l8 4l8 -4" />
      </svg>,
    'badge-2k': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -10" />
        <path d="M14 9v6" />
        <path d="M17 9l-2 3l2 3" />
        <path d="M15 12h-1" />
        <path d="M7 9h2a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-1a1 1 0 0 0 -1 1v1a1 1 0 0 0 1 1h2" />
      </svg>,
    'text-caption': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 15h16" />
        <path d="M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
        <path d="M4 20h12" />
      </svg>,
    'eye-off': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
        <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
        <path d="M3 3l18 18" />
      </svg>,
    'caret-left': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M14 6l-6 6l6 6v-12" />
      </svg>,
    'caret-right': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M10 18l6 -6l-6 -6v12" />
      </svg>,
    'number-123': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 10l2 -2v8" />
        <path d="M9 8h3a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h3" />
        <path d="M17 8h2.5a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1 -1.5 1.5h-1.5h1.5a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1 -1.5 1.5h-2.5" />
      </svg>,
    'frame': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 7l16 0" />
        <path d="M4 17l16 0" />
        <path d="M7 4l0 16" />
        <path d="M17 4l0 16" />
      </svg>,
    'align-box-left-top': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14" />
        <path d="M9 13h-2" />
        <path d="M13 10h-6" />
        <path d="M11 7h-4" />
      </svg>
  };
  const selectedIcon = icons[icon];
  if (!selectedIcon) {
    return null;
  }
  return selectedIcon;
};

## Accéder aux paramètres du graphique

1. Cliquez sur le bouton **Edit** situé dans l'angle supérieur droit de votre tableau de bord

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-edit.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=392cdb9a6e32036b1f252ee017eb820f" alt="Mode édition" width="3024" height="1722" data-path="images/user-guide/dashboard/dashboard-edit.png" />

2. Le tableau de bord passe en mode édition
3. Cliquez sur n'importe quel widget pour le sélectionner
4. Le panneau des paramètres s'ouvre à droite

Les paramètres sont organisés en sections :

* **Données** : Quelles données récupérer et comment les filtrer
* **Axe X** : Comment regrouper et trier les catégories (graphiques à barres/lignes)
* **Axe Y** : Que mesurer et comment l'afficher (graphiques à barres/lignes)
* **Style** : Couleurs, libellés et options visuelles

<Note>
  Certains paramètres n'apparaissent que lorsque d'autres paramètres sont configurés. Par exemple, **Granularité de date** n'apparaît que lorsque vous sélectionnez un champ de date.
</Note>

***

## Paramètres des données

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="database" />Source </span>

Choisissez à partir de quel objet récupérer les données.

1. Cliquez sur **Source**
2. Sélectionnez un objet (Opportunités, Personnes, Entreprises, etc.)

Tous vos objets standard et personnalisés sont disponibles. Modifier la source réinitialise d'autres paramètres, car les options de champ dépendent de l'objet sélectionné.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-source.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=3fb95da16784d7371600e1f829cf2f0c" alt="Source" width="938" height="1226" data-path="images/user-guide/dashboard/dashboard-chart-settings-source.png" />

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filter" />Filtre </span>

Limitez les enregistrements inclus dans le graphique.

1. Cliquez sur **Filtre**
2. Le générateur de filtres s'ouvre
3. Cliquez sur **+ Add filter**
4. Sélectionnez un champ, une condition et une valeur
5. Ajoutez d'autres filtres selon vos besoins

Les filtres fonctionnent de la même manière que dans les vues en tableau. Utilisez-les pour vous concentrer sur des segments spécifiques de vos données.

**Exemple** : Filtrez les opportunités où Stage est égal à "Won" pour n'afficher que les affaires clôturées.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-filters.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=eda97aea77fbb2921a977a90ecfc7f27" alt="Filtre" width="940" height="1190" data-path="images/user-guide/dashboard/dashboard-chart-settings-filters.png" />

<Tip>
  Pour les champs de date, essayez **Is relative** pour créer des filtres dynamiques comme "Past 7 days" ou "This month" qui se mettent à jour automatiquement.
</Tip>

<Tip>
  Les filtres avancés sont pris en charge — ajoutez plusieurs règles de filtre et combinez-les avec la logique **And** ou **Or**.
</Tip>

***

## Paramètres de l'axe X

Ces paramètres contrôlent l'axe horizontal des graphiques à barres et à lignes — généralement la manière dont vos données sont regroupées en catégories.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-x" />Données affichées </span>

Sélectionnez le champ par lequel regrouper vos données. Cela détermine les catégories affichées sur l'axe X.

**Exemple** : Sélectionnez "Stage" pour voir les données regroupées par étape du pipeline, ou "Created date" pour voir les données dans le temps.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-x-data-on-display.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=130b7729bd8959070127245cadfd3d25" alt="Données affichées" width="938" height="1426" data-path="images/user-guide/dashboard/dashboard-chart-settings-x-data-on-display.png" />

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />Granularité de date </span>

Lors d'un regroupement par un champ de date, choisissez la période de regroupement.

| Option                   | Regroupe les données par    | Exemple de résultat                                     |
| ------------------------ | --------------------------- | ------------------------------------------------------- |
| **Jour**                 | Chaque jour du calendrier   | 1 janv., 2 janv., 3 janv....                            |
| **Semaine**              | Semaines calendaires        | Semaine 1, Semaine 2, Semaine 3...                      |
| **Mois**                 | Mois calendaires            | janvier, février, mars...                               |
| **Trimestre**            | Trimestres fiscaux          | Q1, Q2, Q3, Q4                                          |
| **Année**                | Années civiles              | 2023, 2024, 2025                                        |
| **Jour de la semaine**   | Jour de la semaine (agrégé) | lundi, mardi... (tous les lundis combinés)              |
| **Mois de l'année**      | Mois (agrégé)               | janvier, février... (tous les mois de janvier combinés) |
| **Trimestre de l'année** | Trimestre (agrégé)          | Q1, Q2, Q3, Q4 (tous les Q1 combinés)                   |

Les options "de la semaine/de l'année" agrègent sur l'ensemble des périodes. Utilisez **Jour de la semaine** pour voir quel jour reçoit généralement le plus d'affaires. Utilisez **Mois** pour voir les tendances mois par mois.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />Trier par </span>

Contrôlez l'ordre des catégories sur l'axe X.

* **Position** – Utilise l'ordre défini dans les paramètres de votre champ Select
* **Alphabétique** – A à Z (ou chronologique pour les dates)
* **Par valeur** – Ordonné selon la métrique (du plus élevé au plus faible ou l'inverse)
* **Manuel** – Faites glisser pour définir votre propre ordre

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-x-sort.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=7cca30332cc156f2e3aecfecbe14d03b" alt="Trier par" width="938" height="1248" data-path="images/user-guide/dashboard/dashboard-chart-settings-x-sort.png" />

**Astuce** : Pour les étapes du pipeline, utilisez **Position** pour afficher les étapes dans l'ordre de votre processus commercial (Lead → Qualified → Proposal → Won).

<Note>
  Les options affichées dépendent du type de votre champ. Les champs Select disposent de toutes les options ; les champs de date et de texte en affichent moins.
</Note>

<Tip>
  Avec le tri **Manuel**, faites glisser les catégories pour créer un ordre personnalisé — idéal pour mettre en avant des segments spécifiques ou raconter une histoire avec vos données.
</Tip>

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="eye-off" />Omettre les valeurs nulles </span>

Masquez les catégories qui ont une valeur nulle ou aucune donnée.

* **Activé** : Les catégories sans enregistrements sont masquées
* **Désactivé** : Toutes les catégories sont affichées, même si elles sont vides

Utilisez ceci pour épurer les graphiques avec des données clairsemées.

***

## Paramètres de l'axe Y

Ces paramètres déterminent ce que vous mesurez et comment c'est affiché.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-y" />Données affichées </span>

Sélectionnez le champ et l'opération pour calculer votre métrique.

* **Comptages** – Compter tout, Compter les vides, Compter les non vides, Compter les valeurs uniques
* **Math** – Somme, Moyenne, Min, Max (champs numériques)
* **Pourcentages** – Pourcentage vide, Pourcentage non vide

Les champs booléens ajoutent Compter true/false. Les graphiques agrégés avec des champs de date affichent Earliest/Latest.

**Exemple** : Sélectionnez "Amount" avec Sum pour voir la valeur totale des affaires par catégorie, ou Count all pour voir le nombre d'affaires.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-y-data-on-display.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=55e607195f09d382ba634cfcaa680b13" alt="Données affichées" width="940" height="1616" data-path="images/user-guide/dashboard/dashboard-chart-settings-y-data-on-display.png" />

<Note>
  Les options affichées dépendent de votre champ et du type de graphique. Si vous ne voyez pas une opération attendue, vérifiez le type de votre champ.
</Note>

### Ratio

Pour les champs Select, Multi-select ou booléens, vous pouvez calculer le pourcentage d'une valeur spécifique.

1. Sélectionnez un champ Select, Multi-select ou booléen
2. Activez **Ratio**
3. Choisissez l'option à mesurer

**Exemple** : Affichez les affaires "Won" en pourcentage de toutes les opportunités. Si vous avez 10 Won sur 50 au total, le graphique affiche 20 %.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filters" />Regrouper par </span>

Ajoutez une deuxième dimension pour créer plusieurs séries (plusieurs barres ou lignes).

1. Définissez d'abord le champ de l'axe X
2. Cliquez sur **Regrouper par**
3. Sélectionnez un deuxième champ

**Exemple** : Regroupez les affaires par Stage (axe X) ET par Owner (Regrouper par) pour voir, côte à côte, la répartition du pipeline de chaque personne.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-y-group-by.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=75770edc506599ec7270d991ad75f64b" alt="Grouper par" width="942" height="1618" data-path="images/user-guide/dashboard/dashboard-chart-settings-y-group-by.png" />

Lorsque Regrouper par est activé, vous verrez plusieurs couleurs dans votre graphique et une légende apparaît.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />Granularité de date </span>

Lorsque Regrouper par est un champ de date, choisissez la période (mêmes options que pour l'axe X).

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />Trier par </span>

Lorsque **Regrouper par** est défini, contrôlez l'ordre des séries regroupées (p. ex., quelle barre du propriétaire apparaît en premier dans chaque catégorie).

Mêmes options que le tri de l'axe X — Position, Alphabétique et Manuel — sauf que **le tri basé sur la valeur n'est pas disponible** pour le regroupement secondaire.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="chart-bar-popular" />Cumulatif </span>

Affichez des totaux cumulés au lieu de valeurs individuelles.

* **Désactivé** : Chaque barre/point affiche sa propre valeur
* **Activé** : Chaque barre/point affiche la somme de toutes les valeurs précédentes plus la sienne

**Exemple** : janvier = 10, février = 15

* Cumulatif désactivé : Affiche 10 et 15
* Cumulatif activé : Affiche 10 et 25 (10 + 15)

Utilisez le cumulatif pour suivre la progression vers un objectif dans le temps.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-y-cumulative.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=e8378fefec9080de8d2bc8d802501964" alt="Cumulé" width="2164" height="868" data-path="images/user-guide/dashboard/dashboard-chart-settings-y-cumulative.png" />

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="math-min" />Plage minimale / <ChartIcon icon="math-max" />Plage maximale </span>

Définissez des valeurs minimales et maximales fixes pour l'axe Y.

* Laissez vide pour un ajustement automatique
* Saisissez un nombre pour fixer la limite

**Quand l'utiliser :**

* Définissez Min à 0 pour des comparaisons visuelles précises
* Définissez les deux pour des échelles cohérentes entre plusieurs graphiques
* Concentrez-vous sur une plage de valeurs spécifique en définissant les deux

***

## Paramètres de style

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="color-swatch" />Couleurs </span>

Définissez le jeu de couleurs de votre graphique. Choisissez parmi une variété de palettes de couleurs.

<Note>
  Lors d'un regroupement par un champ Select, le graphique utilise automatiquement les couleurs définies pour chaque option dans les paramètres de votre champ.
</Note>

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="gizmo" />Nom de l'axe </span>

Choisissez quels libellés d'axe afficher : **Aucun**, **Axe X**, **Axe Y** ou **Les deux** (graphiques à barres et à lignes uniquement).

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="stack-2" />Barres empilées / Lignes empilées </span>

Lorsque Regrouper par est défini, choisissez comment plusieurs séries sont affichées.

* **Désactivé (Groupé)** : Les séries apparaissent côte à côte. À utiliser pour comparer des valeurs exactes entre des groupes.
* **Activé (Empilé)** : Les séries s'empilent les unes sur les autres. À utiliser pour montrer la composition — comment les parties constituent un tout.

**Exemple** : Affaires par étape, regroupées par propriétaire

* Groupé : Voir côte à côte les chiffres exacts de chaque propriétaire
* Empilé : Voir le total des affaires par étape, avec la contribution de chaque propriétaire empilée

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="badge-2k" />Libellés de données </span>

Affichez les valeurs directement sur les éléments du graphique (barres, points, secteurs).

* **Activé** : Les valeurs apparaissent sur le graphique
* **Désactivé** : Aucune valeur affichée (apparence plus sobre)

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="text-caption" />Légende </span>

Afficher ou masquer la légende (apparaît uniquement lorsque Regrouper par est défini).

* **Activé** : La légende indique ce que représente chaque couleur
* **Désactivé** : Aucune légende affichée

<Tip>
  **Survolez** un élément de la légende pour mettre ce groupe en évidence. **Cliquez** pour le masquer temporairement du graphique.
</Tip>

***

## Notes spécifiques au graphique

### Diagrammes en secteurs

* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="chart-pie" size={16} /></span> **Chaque secteur représente** – Définissez la façon dont les secteurs sont regroupés
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="eye-off" size={16} /></span> **Masquer la catégorie vide** – Supprimer les secteurs à valeur zéro
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="number-123" size={16} /></span> **Afficher la valeur au centre** – Afficher la valeur agrégée (somme, moyenne, comptage, etc.)

### Graphiques agrégés

* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-left" size={16} /></span> **Préfixe** – Ajoutez du texte avant le nombre (p. ex., `$`)
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-right" size={16} /></span> **Suffixe** – Ajoutez du texte après le nombre (p. ex., `%`)
