--- title: Graph description: O componente Graph é um elemento essencial na criação de páginas web, oferecendo a capacidade de incorporar gráficos visuais em seu template. Esses gráficos são recursos poderosos para representar dados de maneira visualmente impactante e informativa. Com a ferramenta Graph,… url: "https://gaianocode.com.br/docs/graph/" updated: "2024-02-06" category: Pages / Page Componentes / Gaph --- # Graph O componente Graph é um elemento essencial na criação de páginas web, oferecendo a capacidade de incorporar gráficos visuais em seu template. Esses gráficos são recursos poderosos para representar dados de maneira visualmente impactante e informativa. Com a ferramenta Graph, você tem a flexibilidade de escolher entre diferentes tipos de gráficos, como barras, linhas, pizza entre outros, permitindo adaptar a apresentação conforme a natureza dos dados que deseja comunicar. Além disso, a capacidade de personalizar a aparência e as configurações do gráfico conforme necessário torna essa funcionalidade valiosa para criar páginas web envolventes e informativas, alinhadas com as preferências e requisitos específicos do seu projeto. Os gráficos no nocode foram construídos com base na API chamada chart.js. Ao visitar o site [https://www.chartjs.org/](https://www.chartjs.org/), você pode explorar uma variedade de exemplos, conjuntos de dados, opções de configuração, personalização de estilos e uma ampla gama de funcionalidades adicionais relacionadas aos gráficos. Para obter mais informações sobre a utilização do componente de Graph, acesse o vídeo explicativo em: [https://www.youtube.com/watch?v=XVvX8m6qjnc](https://www.youtube.com/watch?v=XVvX8m6qjnc). ![](https://gaianocode.com.br/wp-content/uploads/2024/01/graph-1024x409.png) ## Localização O componente Graph se encontra dentro de WebCompoents conforme ilustrado abaixo: ![](https://gaianocode.com.br/wp-content/uploads/2024/02/graph2.png) ## Propriedades ### Basic As propriedades básicas do componente Graph referem-se ao tipo de gráfico, proporcionando a opção de escolher entre 8 tipos distintos. ### Bar ![](https://gaianocode.com.br/wp-content/uploads/2024/02/graph-1024x409.png) Ao optar pelo tipo "Bar", será gerado um gráfico de barras que fornece uma maneira de mostrar valores de dados representados como barras verticais. ### Bubble ![](https://gaianocode.com.br/wp-content/uploads/2024/02/graph3-1024x392.png) Ao selecionar o tipo "Bubble", um gráfico de bolhas será gerado, permitindo a exibição de três dimensões de dados simultaneamente. A posição de cada bolha é determinada pelas duas primeiras dimensões, representadas pelos eixos horizontal e vertical. Já a terceira dimensão é refletida pelo tamanho das bolhas individuais. ### Doughnut ![](https://gaianocode.com.br/wp-content/uploads/2024/02/graph4-1024x497.png) Ao optar pelo tipo "Doughnut", um gráfico de rosquinha será gerado. Esse gráfico é dividido em segmentos, onde cada segmento representa o valor proporcional de um dado específico. O arco de cada segmento mostra essa proporção dentro do gráfico. ### Line ![](https://gaianocode.com.br/wp-content/uploads/2024/02/graph5-1024x393.png) Ao optar pelo tipo "Line", um gráfico de linha será gerado, esse gráfico é uma forma de plotar pontos de dados em uma linha.  ### Mixed ![](https://gaianocode.com.br/wp-content/uploads/2024/02/graph6-1024x391.png) Ao selecionar o tipo "Mixed", um gráfico misto será gerado, o qual combina dois ou mais tipos de gráficos diferentes em uma única representação. Um exemplo comum é um gráfico de barras que também inclui um conjunto de dados de linha. ### Polar Area ![](https://gaianocode.com.br/wp-content/uploads/2024/02/graph7-1024x451.png) Ao selecionar o tipo "Polar Area", um gráfico de área polar será gerado, os gráficos de área polar são semelhantes aos gráficos de pizza, mas cada segmento tem o mesmo ângulo sendo que o raio do segmento difere dependendo do valor. ### Radar ![](https://gaianocode.com.br/wp-content/uploads/2024/02/graph8-1024x451.png) Ao selecionar o tipo "Radar", um gráfico radar será gerado, esse gráfico é uma forma de mostrar vários pontos de dados e a variação entre eles. ### Scatter ![](https://gaianocode.com.br/wp-content/uploads/2024/02/graph9-1024x400.png) Ao selecionar o tipo "Scatter", um gráfico de dispersão será gerado, esses gráficos são baseados em gráficos de linhas básicos com o eixo x alterado para um eixo linear. ## Params As propriedades de parâmetros do componente Graph, abrangendo os tipos bar, doughnut, line, mixer, polar, area e radar, incluem options, datasets, box-size e labels. A opção options refere-se à configuração desejada para o gráfico, enquanto datasets diz respeito ao conjunto de dados que serão utilizados na construção dos gráficos. Por sua vez, labels corresponde aos rótulos atribuídos a cada tipo de gráfico, além do box-size, que define o tamanho dos gráficos. Essa estrutura oferece a flexibilidade necessária para incluir novos parâmetros conforme necessário. ![](https://gaianocode.com.br/wp-content/uploads/2024/02/graph10.png) Enquanto as propriedades de parâmetros do componente Graph, abrangendo os tipos Bubble e Scatter, incluem options, datasets, box-size. A opção options refere-se à configuração desejada para o gráfico, enquanto datasets diz respeito ao conjunto de dados que serão utilizados na construção dos gráficos. Por sua vez, box-size corresponde ao tamanho dos gráficos. Essa estrutura oferece a flexibilidade necessária para incluir novos parâmetros conforme necessário. ![](https://gaianocode.com.br/wp-content/uploads/2024/02/graph11.png)