> ## 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.

# Setări pentru diagrame

> Configurați diagramele pentru a afișa datele exact așa cum aveți nevoie.

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;
};

## Accesarea setărilor pentru diagrame

1. Faceți clic pe butonul **Editare** din colțul din dreapta sus al tabloului 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="Mod editare" width="3024" height="1722" data-path="images/user-guide/dashboard/dashboard-edit.png" />

2. Tabloul de bord intră în modul de editare
3. Faceți clic pe orice widget pentru a-l selecta
4. Panoul de setări se deschide în dreapta

Setările sunt organizate în secțiuni:

* **Date**: Ce date să preluați și cum să le filtrați
* **Axa X**: Cum să grupați și să sortați categoriile (diagrame cu bare/linii)
* **Axa Y**: Ce să măsurați și cum să o afișați (diagrame cu bare/linii)
* **Stil**: Culori, etichete și opțiuni vizuale

<Note>
  Unele setări apar doar când sunt configurate alte setări. De exemplu, **Granularitate dată** apare doar când selectați un câmp de tip dată.
</Note>

***

## Setări date

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

Alegeți din ce obiect să preluați date.

1. Faceți clic pe **Sursă**
2. Selectați un obiect (Oportunități, Persoane, Companii etc.)

Toate obiectele standard și personalizate sunt disponibile. Schimbarea sursei resetează alte setări, deoarece opțiunile câmpului depind de obiectul selectat.

<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="Sursă" 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" />Filtru </span>

Limitați ce înregistrări sunt incluse în diagramă.

1. Faceți clic pe **Filtru**
2. Se deschide constructorul de filtre
3. Faceți clic pe **+ Adaugă filtru**
4. Selectați un câmp, o condiție și o valoare
5. Adăugați mai multe filtre după necesități

Filtrele funcționează la fel ca în vizualizările de tabel. Folosiți-le pentru a vă concentra pe segmente specifice ale datelor.

**Exemplu**: Filtrați oportunitățile unde Etapa este egală cu "Câștigat" pentru a afișa doar tranzacțiile închise.

<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="Filtru" width="940" height="1190" data-path="images/user-guide/dashboard/dashboard-chart-settings-filters.png" />

<Tip>
  Pentru câmpurile de tip dată, încercați **Este relativ** pentru a crea filtre dinamice precum "Ultimele 7 zile" sau "Luna aceasta" care se actualizează automat.
</Tip>

<Tip>
  Filtrele avansate sunt acceptate—adăugați mai multe reguli de filtrare și combinați-le cu logica **Și** sau **Sau**.
</Tip>

***

## Setări axa X

Aceste setări controlează axa orizontală a diagramelor cu bare și linii—de obicei modul în care datele sunt grupate în categorii.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-x" />Date afișate </span>

Selectați câmpul după care să grupați datele. Aceasta determină categoriile afișate pe axa X.

**Exemplu**: Selectați "Etapă" pentru a vedea datele grupate după etapa din pipeline, sau "Data creării" pentru a vedea datele în timp.

<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="Date afișate" 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" />Granularitate dată </span>

Când grupați după un câmp de tip dată, alegeți perioada de timp pentru grupare.

| Opțiune               | Grupează datele după      | Exemplu de rezultat                                      |
| --------------------- | ------------------------- | -------------------------------------------------------- |
| **Zi**                | Fiecare zi calendaristică | 1 ian., 2 ian., 3 ian...                                 |
| **Săptămână**         | Săptămâni calendaristice  | Săptămâna 1, Săptămâna 2, Săptămâna 3...                 |
| **Lună**              | Luni calendaristice       | Ianuarie, Februarie, Martie...                           |
| **Trimestru**         | Trimestre fiscale         | T1, T2, T3, T4                                           |
| **An**                | Ani calendaristici        | 2023, 2024, 2025                                         |
| **Ziua săptămânii**   | Zi a săptămânii (agregat) | Luni, Marți... (toate zilele de luni combinate)          |
| **Luna anului**       | Lună (agregat)            | Ianuarie, Februarie... (toate lunile ianuarie combinate) |
| **Trimestrul anului** | Trimestru (agregat)       | T1, T2, T3, T4 (toate T1 combinate)                      |

Opțiunile "din săptămână/an" agregă pe întreaga perioadă de timp. Folosiți **Ziua săptămânii** pentru a vedea în ce zi din săptămână se obțin de obicei cele mai multe tranzacții. Folosiți **Lună** pentru a vedea tendințele lună de lună.

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

Controlați ordinea categoriilor pe axa X.

* **Poziție** – Folosește ordinea definită în setările câmpului Select
* **Alfabetic** – de la A la Z (sau cronologic pentru date)
* **După valoare** – Ordonat după metrică (mai întâi cele mai mari sau cele mai mici)
* **Manual** – Trageți pentru a stabili propria ordine

<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="Sortează după" width="938" height="1248" data-path="images/user-guide/dashboard/dashboard-chart-settings-x-sort.png" />

**Sfat**: Pentru etapele din pipeline, utilizați **Poziție** pentru a afișa etapele în ordinea procesului de vânzări (Potențial → Calificat → Ofertă → Câștigat).

<Note>
  Opțiunile afișate depind de tipul câmpului. Câmpurile de tip Select au toate opțiunile; câmpurile de tip dată și text afișează mai puține.
</Note>

<Tip>
  Cu sortarea **Manual**, trageți categoriile pentru a crea o ordine personalizată—perfect pentru a evidenția segmente specifice sau pentru a spune o poveste cu datele dvs.
</Tip>

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="eye-off" />Omite valorile zero </span>

Ascundeți categoriile care au valoare zero sau nu au date.

* **Activat**: Categoriile fără înregistrări sunt ascunse
* **Dezactivat**: Toate categoriile sunt afișate, chiar dacă sunt goale

Folosiți această opțiune pentru a curăța diagramele cu date rare.

***

## Setări axa Y

Aceste setări controlează ce măsurați și cum este afișat.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-y" />Date afișate </span>

Selectați câmpul și operația pentru a calcula metrica.

* **Numărări** – Numără toate, Numără gol, Numără ne-gol, Numără valori unice
* **Matematică** – Sumă, Medie, Minim, Maxim (câmpuri numerice)
* **Procente** – Procent gol, Procent ne-gol

Câmpurile booleene adaugă Numără adevărat/fals. Diagramele agregate cu câmpuri de tip dată afișează Cel mai timpuriu/Cel mai târziu.

**Exemplu**: Selectați "Sumă" cu operația Sumă pentru a vedea valoarea totală a tranzacțiilor pe categorie, sau Numără toate pentru a vedea numărul de tranzacții.

<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="Date afișate" width="940" height="1616" data-path="images/user-guide/dashboard/dashboard-chart-settings-y-data-on-display.png" />

<Note>
  Opțiunile afișate depind de câmpul și tipul de diagramă. Dacă nu vedeți o operație așteptată, verificați tipul câmpului.
</Note>

### Raport

Pentru câmpuri de tip Select, Multi-select sau Boolean, puteți calcula procentul unei valori specifice.

1. Selectați un câmp de tip Select, Multi-select sau Boolean
2. Activați **Raport**
3. Alegeți opțiunea de măsurat

**Exemplu**: Afișați tranzacțiile "Câștigat" ca procent din toate oportunitățile. Dacă aveți 10 Câștigate dintr-un total de 50, diagrama afișează 20%.

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

Adăugați o a doua dimensiune pentru a crea mai multe serii (mai multe bare sau linii).

1. Stabiliți mai întâi câmpul pentru axa X
2. Faceți clic pe **Grupează după**
3. Selectați un al doilea câmp

**Exemplu**: Grupați tranzacțiile după Etapă (axa X) ȘI după Proprietar (Grupează după) pentru a vedea alăturat distribuția pipeline-ului fiecărei persoane.

<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="Grupare după" width="942" height="1618" data-path="images/user-guide/dashboard/dashboard-chart-settings-y-group-by.png" />

Când Grupează după este setat, veți vedea mai multe culori în diagramă și apare o legendă.

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

Când Grupează după este un câmp de tip dată, alegeți perioada de timp (aceleași opțiuni ca pentru axa X).

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

Când **Grupează după** este setat, controlați ordinea seriilor grupate (de ex., bara cărui proprietar apare prima în fiecare categorie).

Aceleași opțiuni ca sortarea pe axa X—Poziție, Alfabetic și Manual—cu excepția faptului că **sortarea bazată pe valori nu este disponibilă** pentru gruparea secundară.

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

Afișați totaluri cumulative în locul valorilor individuale.

* **Dezactivat**: Fiecare bară/punct își afișează propria valoare
* **Activ**: Fiecare bară/punct afișează suma tuturor valorilor anterioare plus propria valoare

**Exemplu**: Ianuarie = 10, Februarie = 15

* Cumulativ dezactivat: Afișează 10 și 15
* Cumulativ activ: Afișează 10 și 25 (10 + 15)

Folosiți opțiunea Cumulativ pentru a urmări progresul către un obiectiv în timp.

<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="Cumulativ" 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" />Interval minim / <ChartIcon icon="math-max" />Interval maxim </span>

Stabiliți valori minime și maxime fixe pentru axa Y.

* Lăsați necompletat pentru scalare automată
* Introduceți un număr pentru a fixa limita

**Când se folosește:**

* Setați Min la 0 pentru comparații vizuale corecte
* Setați ambele pentru scări consistente între mai multe diagrame
* Concentrați-vă pe un interval de valori specific setând ambele

***

## Setări de stil

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

Setați schema de culori pentru diagrama dvs. Alegeți dintr-o varietate de palete de culori.

<Note>
  Când grupați după un câmp de tip Select, diagrama folosește automat culorile definite pentru fiecare opțiune în setările câmpului.
</Note>

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

Alegeți ce etichete de axă să afișați: **Niciuna**, **Axa X**, **Axa Y**, sau **Ambele** (numai pentru diagrame cu bare și linii).

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="stack-2" />Bare stivuite / Linii stivuite </span>

Când Grupează după este setat, alegeți cum sunt afișate mai multe serii.

* **Dezactivat (Grupate)**: Seriile apar una lângă alta. Folosiți când comparați valori exacte între grupuri.
* **Activ (Stivuite)**: Seriile se stivuiesc una peste alta. Folosiți când arătați compoziția—cum părțile formează un întreg.

**Exemplu**: Tranzacții după etapă, grupate după proprietar

* Grupate: Vedeți numerele exacte ale fiecărui proprietar una lângă alta
* Stivuite: Vedeți totalul tranzacțiilor pe etapă, cu contribuția fiecărui proprietar stivuită

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

Afișați valorile direct pe elementele diagramei (bare, puncte, segmente).

* **Activ**: Valorile apar pe diagramă
* **Dezactivat**: Nu se afișează valori (aspect mai curat)

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

Afișați sau ascundeți legenda (apare doar când Grupează după este setat).

* **Activ**: Legenda arată ce reprezintă fiecare culoare
* **Dezactivat**: Nu se afișează legendă

<Tip>
  **Treceți cursorul** peste un element al legendei pentru a evidenția acel grup. Faceți clic pentru a ascunde temporar acel grup din diagramă.
</Tip>

***

## Note specifice diagramelor

### Grafice circulare

* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="chart-pie" size={16} /></span> **Fiecare segment reprezintă** – Definiți cum sunt grupate segmentele
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="eye-off" size={16} /></span> **Ascunde categoria goală** – Elimină segmentele cu valoare zero
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="number-123" size={16} /></span> **Afișează valoarea în centru** – Afișează valoarea agregată (sumă, medie, număr etc.)

### Diagrame agregate

* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-left" size={16} /></span> **Prefix** – Adăugați text înaintea numărului (de ex., `$`)
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-right" size={16} /></span> **Sufix** – Adăugați text după număr (de ex., `%`)
