# Formato de Grafico de donut

É utilizado para exibir a informação em formato de **Grafico de donut**, diferenciando as partes por cor.

Ao selecionar a opção de **Grafico de donut**, o sistema permitirá que customize algumas outras configurações referentes a opção de gráfico. Para cada customização realizada, será necessário utilizar o botão "aplicar" para que reflita na visualização.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FjOJOnN6oenhLKDqn0bpp%2Fimage.png?alt=media&#x26;token=56f42862-a342-4fd7-bb41-4ddf8642c117" alt=""><figcaption></figcaption></figure>

* **Altura do gráfico (em px)**: O sistema utiliza a unidade de medida em px (pixel) para aumentar ou diminuir o gráfico.&#x20;

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FdQt1cmlDLbeG8eopT9w9%2Fimage.png?alt=media&#x26;token=301aa6fb-93cb-4a3f-8a62-324fb9297353" alt=""><figcaption></figcaption></figure>

* **Mostrar rótulos**: Assim como em outros tipos de gráficos, o sistema permite habitar a opção mostrar rótulos, permitindo que informe a distancia entre os rótulos, para que seja possível ajustar de acordo com o espaço disponível.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fd4yodTRDmjAgTPWPpgkr%2Fimage.png?alt=media&#x26;token=4af0ca40-7e9b-4df8-aace-81c25a10dcc8" alt=""><figcaption></figcaption></figure>

* **Mostrar legenda**: Possibilitando também habilitar e desabilitar a legenda exibida no gráfico.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FLddEcYF62AMTKOotE506%2Fimage.png?alt=media&#x26;token=7c75b835-6e6c-4f9d-92e8-b09cf8b635ad" alt=""><figcaption></figcaption></figure>

Clicando em cima da legenda desejada, é possível ocultar a informação da visualização

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FnGruqhbRvSWSUG3F8w5V%2Fimage.png?alt=media&#x26;token=fc60f96e-20a6-48ba-8c39-2ea67a4b4591" alt=""><figcaption></figcaption></figure>

* **Exibir o total**: Além de permitir exibir o valor total no meio do gráfico, caso faça sentido para a visualização.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FDBb3UWMiJTwIxkEgNzK5%2Fimage.png?alt=media&#x26;token=585b34e3-27eb-49d2-951f-17b55635a8bd" alt=""><figcaption></figcaption></figure>

* **Personalizar cores:** E personalizar as opções de cores exibidas no gráfico.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FbkWpVwQNOP9vt8ZFJT8X%2Fimage.png?alt=media&#x26;token=d07b2830-aba4-438f-86b1-89a8d7e04582" alt=""><figcaption></figcaption></figure>

Podendo adicionar novas cores clicando no ícone "+" ou selecionar uma paleta de cores clicando no ícone "![](https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FKZgNN1z1ToxhSnxFF49P%2Fimage.png?alt=media\&token=5439ff26-fdea-47fc-8449-73e48b12cace)".

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FJ3xRMvYt1ablqXtgLo5C%2Fimage.png?alt=media&#x26;token=1dfb26f9-1d13-4420-ba5a-5c909a43132b" alt=""><figcaption></figcaption></figure>

Selecionando a opção para adicionar uma paleta de cores, o sistema abrirá a tela de **Paleta de Cores**:

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FTPROk2bfEl3ktHnW6ELb%2Fimage.png?alt=media&#x26;token=c9b9cb9e-6f28-4cda-82ed-ce605bcf24c0" alt=""><figcaption></figcaption></figure>

Sendo possível selecionar uma paleta existente, sendo ela padrão, o sistema assumirá as mesmas cores dos outros gráficos que estiverem utilizando a paleta padrão. Podendo também criar uma nova paleta, que será customizada para a sua necessidade e será aplicada apenas para a visualização que estiver utilizando essa paleta.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FMtVZB2fSwTvgJdUJxwkK%2Fimage.png?alt=media&#x26;token=65fb7b01-869c-4c63-acd6-c4d40c44c8b6" alt=""><figcaption></figcaption></figure>

Clicando no ícone "**+ Adicionar**", o sistema abrirá uma tela para criação de uma nova paleta, podendo adicionar novas cores&#x20;

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fe20xS8jAc0XnxW0Jmr9t%2Fimage.png?alt=media&#x26;token=b6e3d4f2-e771-44d9-9161-354b33af0edd" alt=""><figcaption></figcaption></figure>

E alterar as cores existentes clicando em cima da cor que deseja alterar

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FNH8SrwaeP7YcnyzzEbVT%2Fimage.png?alt=media&#x26;token=85c87ef6-73b0-45be-ae0b-108ec53c00a3" alt=""><figcaption></figcaption></figure>

Selecionando a nova cor desejada e clicando no botão **Salvar**, para efetivar a alteração

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2F6L8ACKke4S0AsquUyDjc%2Fimage.png?alt=media&#x26;token=846dd72b-12f5-4494-9759-74a11d01ac08" alt=""><figcaption></figcaption></figure>

Após **salvar** a nova paleta criada, o sistema retornará para a tela principal de Paleta de Cores, podendo selecionar a nova paleta para utilização:

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FjpB8DNaOacOinPRQIcNy%2Fimage.png?alt=media&#x26;token=e078f254-79d6-4453-9d51-b06aadd94930" alt=""><figcaption></figcaption></figure>

Ou até mesmo **definir uma nova paleta como padrão,** além de **remover** uma paleta existente clicando no ícone "![](https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fth1gVeKzkbDDGyB6QKAU%2Fimage.png?alt=media\&token=502978d0-0f9b-4f11-b64b-532a2215baba)"

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2F7AXsQ1XxixSyGb0jpBL7%2Fimage.png?alt=media&#x26;token=8d8dc4a3-0d27-4e0d-9d1d-5c229a167edc" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
OBS.: Caso a Paleta padrão seja alterada, todas as visualizações que estiverem utilizando a Paleta padrão, irão sofrer alteração.
{% endhint %}

* **Expandir competência para:** O sistema irá permitir que a competência seja expendida para:

  * &#x20;**Início do ano:**  Exibe as informações a partir do início do ano.
  * **Ano completo:** Exibe o ano completo.
  * **Estático:** Necessário configurar o mês inicial da competência
  * **Dinâmico:** Necessário configurar a quantidade de meses atrás ou depois.

  <figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FUSPucZtz1vnZKDiTHTE9%2Fimage.png?alt=media&#x26;token=df842b76-ceb5-48c2-b4d3-66b885d0b916" alt="" width="429"><figcaption></figcaption></figure>
* **Alternar linhas e colunas:** Inverter a posição de linhas e colunas, caso faça sentido para a sua visualização.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FNljCLWBu6CwnPkc8IOD7%2Fimage.png?alt=media&#x26;token=4ae62d98-c4bb-4f6e-968a-837d2f43f97c" alt=""><figcaption></figcaption></figure>

* **Limitar registros da busca em**: E permite estabelecer um limite de registros retornados na busca. O sistema irá ajustar o tamanho das partes de acordo com a quantidade de registros retornados.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FEGt2Ik4rXFtdP41u5ElW%2Fimage.png?alt=media&#x26;token=344903f2-35b7-488b-9c2a-7fabc05189de" alt=""><figcaption></figcaption></figure>

* **Incluir meses**: O sistema também permite inserir um ou mais meses do ano para retornar na busca, desde que esteja dentro do período filtrado.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FjwCRoPcPtwCZVYrG2xO2%2Fimage.png?alt=media&#x26;token=34567745-4005-4181-9de0-dbec107c6b81" alt=""><figcaption></figcaption></figure>