# Formato de Gráfico de barras vertical

É utilizado para exibir a informação em formato de **Gráfico de barras vertical**, como quando precisamos exibir uma informação na linha do tempo.

Ao selecionar a opção de **Gráfico de barras vertical**, 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%2FX7hUnGgrMo9NpvrgtgeY%2Fimage.png?alt=media&#x26;token=b20fc776-e502-4ce7-8668-37cd0dc1d3f2" alt=""><figcaption></figcaption></figure>

* **Altura do gráfico (em px)**: O sistema utiliza a unidade de medida em px (pixel) para aumentar ou diminuir a riqueza de detalhes no gráfico. Quanto maior o pixel, maior o detalhamento em linhas aplicado ao gráfico.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FVKXFdF95GQyYEaKE0LhC%2Fimage.png?alt=media&#x26;token=d7403023-1064-474a-a205-083d7255252c" alt=""><figcaption></figcaption></figure>

* **Largura das barras (in px)**: Também é possível ajustar a largura das barras no gráfico em px (pixel).

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FlqtmJIlCfB6AflAd7K4r%2Fimage.png?alt=media&#x26;token=88f701de-86d2-410e-8ad5-5883ca268c58" alt=""><figcaption></figcaption></figure>

* **Agrupar as barras**: Além de agrupar as barras em uma única barra, diferenciando a informação pelas cores da barra e possibilitando exibir o total em cada barra ou a barra em porcentagem.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FbLsyKj8jYonMKqJRCzZm%2Fimage.png?alt=media&#x26;token=5474e75e-6374-444c-a2cd-febe1e300d89" alt=""><figcaption></figcaption></figure>

Ao selecionar a opção **Exibir o total**, o sistema também permite ajustar o tamanho da fonte.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fe8nv6WjdHLAntqftLQY0%2Fimage.png?alt=media&#x26;token=9b9c8c23-f26e-47ee-8e66-814dd0a97031" 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, que permitirá que informe o tamanho da fonte que será exibida no rótulo, 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%2F3mgIBdry4h9JoMwBD7AC%2Fimage.png?alt=media&#x26;token=acddf370-19fe-4912-aebf-9b7c934479f2" 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%2Fb15PBm7OOhl0ICbkmVPR%2Fimage.png?alt=media&#x26;token=c2579147-2edf-4826-acef-bd3d9de774d0" 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%2F8o6CUqSjZZ5K8ffkIwux%2Fimage.png?alt=media&#x26;token=20dd4ef4-85b5-4dbd-b531-f45130dd64f2" alt=""><figcaption></figcaption></figure>

* **Eixos individuais**: Além de permitir habilitar e desabilitar os eixos individuais.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Foo0KErQKRpGNZMKRIydi%2Fimage.png?alt=media&#x26;token=992f5cfe-6328-4be0-85c2-a9c54d23a010" alt=""><figcaption></figcaption></figure>

* **Personalizar cores:** E personalizar as opções de cores exibidas no gráfico, inclusive editando alguma cor  desejada ou inserindo uma nova cor.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FxpDSm9a94iS4B2hRYZnu%2Fimage.png?alt=media&#x26;token=7ed54583-1f97-4902-b822-270ab1b0f4c4" 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>
* **Limitar registros da busca em**: E permite estabelecer um limite de registros retornados na busca. O sistema irá ajustar o tamanho das barras 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%2FxZ5H3jdgmF6F7yimAPwS%2Fimage.png?alt=media&#x26;token=b55afd19-cd64-4637-a06f-29bb4b4c61e1" 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%2F6Cvs7nozZdvHJhXAorFW%2Fimage.png?alt=media&#x26;token=96531467-2219-4e8f-9aca-c09a75c5b571" alt=""><figcaption></figcaption></figure>

Por fim, para essa opção de gráfico, também é possível incluir anotações em formato de balão, dentro da visualização, no modo de edição, conforme ilustrado abaixo:

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FWe6Od0GJW1bzEbzcyVq3%2Fimage.png?alt=media&#x26;token=c29b4db6-c5ea-4ea6-96ce-f16c7bf027e9" alt=""><figcaption></figcaption></figure>

Clicando com na tecla "**CTRL**"  do teclado e o mouse no local onde deseja incluir a sua anotação, o sistema abrira uma tela para incluir uma nova anotação.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2F3QqC05jWW5o9Jj3EzOJY%2Fimage.png?alt=media&#x26;token=0af5d3f0-0e3b-4c6c-9551-eab6eeff794e" alt=""><figcaption></figcaption></figure>

Sendo possível incluir um **texto** menor como título, que irá aparecer na visualização, e outro texto maior como **descrição**, que ficará oculto na visualização.&#x20;

O sistema também permite escolher o **tamanho da fonte**, a **distância** entre o balão e a coluna selecionada para incluir a anotação, além da **largura** do balão contendo a sua anotação. Clicando no botão Salvar, será possível visualizar a anotação criada.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FOSpPPiHRpzMFlUABmQRs%2Fimage.png?alt=media&#x26;token=b81fb710-ca1c-4034-be6d-d0f5e8f7f90b" alt=""><figcaption></figcaption></figure>

E clicando no botão **Mostrar anotações** "![](https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FKFLlLNkvGBbqVKUep0Au%2Fimage.png?alt=media\&token=b3e2ee1a-2cdb-48ac-bb8d-82d26248a21a)", será possível visualizar o conteúdo das anotações criadas:

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2F471nXwWkVqBBnX2bzYRh%2Fimage.png?alt=media&#x26;token=37a5428c-e5dc-4273-b5d2-f845ef985051" alt=""><figcaption></figcaption></figure>

O sistema também permite **editar** uma anotação clicando no botão "![](https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FNRRcrH9KS783ITXO9syI%2Fimage.png?alt=media\&token=b33c5fca-80af-470d-906a-0a90e0f1318e)", e **remover** clicando no botão "![](https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fzjy345xxAcDjz1VoFQee%2Fimage.png?alt=media\&token=ce62bff5-4674-431a-8b48-cc07e5b8e613)".

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FmCg9D55vCKgYEV4Wiq6H%2Fimage.png?alt=media&#x26;token=6cd25536-e0f2-4f33-a822-afa9d9c588cf" alt=""><figcaption></figcaption></figure>
