Visualização de dados com ApexCharts

ApexCharts é uma biblioteca de gráficos moderna que ajuda os desenvolvedores a criar visualizações bonitas e interativas para páginas da web com uma API simples, enquanto React-ApexCharts é a integração React do ApexChart que nos permite usar ApexCharts em nossos aplicativos. Este artigo será benéfico para aqueles que precisam mostrar dados gráficos complexos para seus clientes.

Começando

Primeiro, instale o componente React-ApexCharts em seu aplicativo React e importe react-apexcharts .

 npm i react-apexcharts apexcharts import ReactApexCharts from 'react-apexcharts'

Os componentes principais de um ApexChart são seu objeto de configuração. No objeto de configuração, definimos as propriedades de series e options de um gráfico. series são os dados que queremos visualizar no gráfico. Na série, definimos os dados e o nome dos dados. Os valores na matriz de dados serão plotados no eixo y do gráfico. O nome dos dados aparecerá quando você passar o mouse sobre o gráfico. Você pode ter uma única ou várias séries de dados. Em options , definimos como queremos que um gráfico fique, os recursos e ferramentas que queremos adicionar a um gráfico e os rótulos dos eixos x e y de um gráfico. Os dados que definimos nas propriedades series e options do objeto de configuração são o que passamos para as props series e options do componente ReactApexChart , respectivamente.

Aqui está uma amostra de como os componentes de um ApexChart funcionam juntos. (Vamos dar uma olhada neles mais adiante no artigo.)

 const config = { series: [1, 2, 3, 4, 5], options: { chart: { toolbar: { show: true }, } } } return ( <ReactApexChart options={config.options} series={config.series} type="polarArea" /> )

Ao percorrer os documentos, você notará que a largura, a altura e o tipo de gráfico são definidos no objeto de opções, como no trecho de código abaixo.

 const config = { series: [44, 55, 13, 43, 22], chart: { width: 380, type: 'pie' } },

Isso ocorre porque os documentos foram escritos com o aplicativo JavaScript vanilla em mente. Estamos trabalhando com React, então definimos a largura, altura e tipo passando-os como props para o componente ReactApexCharts . Veremos como isso funciona na próxima seção.

Gráficos de linha

Este é um tipo de gráfico usado para mostrar informações que mudam ao longo do tempo. Traçamos uma linha usando vários pontos conectados por linhas retas. Usamos gráficos de linha para visualizar como um dado muda ao longo do tempo. Por exemplo, em um aplicativo financeiro, você pode usá-lo para mostrar a um usuário como suas compras aumentaram ao longo do tempo.

Este gráfico é composto pelos seguintes componentes:

• Título
  Isso fica no topo do gráfico e informa ao usuário quais dados o gráfico representa.
• Barra de ferramentas
  A barra de ferramentas está no canto direito da imagem acima. Ele controla o nível de zoom do gráfico. Você também pode exportar o caractere através da barra de ferramentas.
• Rótulos de eixo
  Nos eixos esquerdo e direito, temos os rótulos para cada eixo.
  
• Rótulos de dados
  Os rótulos de dados são visíveis em cada ponto de plotagem na linha. Eles facilitam a visualização dos dados no gráfico.

Vimos como um gráfico de linhas se parece e seus diferentes componentes. Agora vamos passar pelas etapas de construção de um.

Começamos com series . Aqui definimos os dados da série e seu nome. Em seguida, passamos as options e series para as props do componente ReactApexChart . Também definimos o tipo de gráfico no type prop e o configuramos como line .

 const config = { series: [{ name: "Performance", data: [10, 21, 35, 41, 59, 62, 79, 81, 98] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="line" /> )

A parte crítica de um ApexChart são seus dados de series . As configurações definidas na propriedade options são opcionais. Sem definir nenhuma definição nas options , os dados ainda serão exibidos. No entanto, pode não ser o gráfico mais legível. Se você decidir não definir nenhuma definição personalizada em options , ela ainda deverá estar presente como um objeto vazio.

Vamos configurar as opções do gráfico adicionando alguns valores ao objeto options que temos no objeto config .

Na propriedade chart do objeto options , definimos as configurações do gráfico. Aqui, adicionamos a barra de ferramentas do gráfico definindo sua propriedade show como true . A barra de ferramentas nos fornece ferramentas para controlar o nível de zoom do gráfico e exportar o gráfico em diferentes formatos de arquivo. A barra de ferramentas é visível por padrão.

 options: { chart: { toolbar: { show: true }, }, }

Podemos tornar nosso gráfico mais fácil de ler ativando rótulos de dados para o gráfico. Para fazer isso, adicionamos a propriedade dataLabels ao objeto options e definimos sua propriedade enabled como true . Isso facilita a interpretação dos dados no gráfico.

 dataLabels: { enabled: true },

Por padrão, o traço de um gráfico de linhas é reto. No entanto, podemos torná-lo curvo. Adicionamos a propriedade stroke às options e configuramos sua curve para smooth .

 stroke: { curve: "smooth" }

Uma parte importante de qualquer gráfico é o seu título. Adicionamos uma propriedade title às options para dar um título ao gráfico.

 title: { text: 'A Line Chart', align: 'left' },

Podemos adicionar rótulos aos eixos x e y do gráfico. Para fazer isso, adicionamos as propriedades xaxis e yaxis às options e lá definimos o title para cada eixo.

 xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], title: { text: 'Month' } }, yaxis: { title: { text: 'Performance' } }

No final, seu código deve ficar assim. Com essas etapas, não apenas criamos um gráfico de linhas, mas também vimos um detalhamento de como as options que definimos podem aprimorar um gráfico.

 import ReactApexCharts from 'react-ApexCharts' const config = { series: [{ name: "Performance", data: [10, 21, 35, 41, 59, 62, 79, 81, 98] }], options: { chart: { toolbar: { show: true }, }, dataLabels: { enabled: true }, stroke: { curve: "smooth" } title: { text: 'A Line Chart', align: 'left' }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], title: { text: 'Month' } }, yaxis: { title: { text: 'Performance' } } } } return ( <ReactApexChart options={config.options} series={config.series} type="line" /> )

Gráficos de área

Um gráfico de área é como um gráfico de linhas em termos de como os valores de dados são plotados no gráfico e conectados usando segmentos de linha. A única diferença é que em um gráfico de área, a área plotada pelos pontos de dados é preenchida com sombras ou cores. Assim como os gráficos de linha, os gráficos de área descrevem como um dado muda ao longo do tempo. No entanto, ao contrário dos gráficos de linhas, eles também podem representar visualmente o volume. Podemos usá-lo para mostrar como os grupos em uma série de dados se cruzam. Por exemplo, um gráfico que mostra o volume de usuários que acessam seu aplicativo por meio de diferentes navegadores.

Na imagem acima, temos um exemplo de gráfico de área. Assim como o gráfico de linhas, ele tem um título, rótulos de dados e rótulos de eixo. A parte sombreada do gráfico de área plotada mostra o volume nos dados. Também mostra como os dados da series1 cruzam com os da series2 . Outro caso de uso de gráficos de área é mostrar a relação entre dois ou mais dados e como eles se cruzam.

Vamos ver como construir um gráfico de área empilhada e como adicionar rótulos de dados a ele.

Para fazer um gráfico de área, definimos o tipo de gráfico como area e o traço como smooth . Este é o traço padrão para um gráfico de área.

 const config = { options: { stroke: { curve: 'smooth' } } } return ( <ReactApexChart options={config.options} series={config.series} type="area" /> )

Para torná-lo um gráfico empilhado, na propriedade chart do objeto options , definimos stacked como true .

 const config = { options: { stroke: { curve: 'smooth' }, chart: { stacked: true } } return ( <ReactApexChart options={config.options} series={config.series} type="area" /> )

Gráficos de barra

Usamos gráficos de barras para apresentar dados com barras retangulares em alturas ou comprimentos proporcionais aos valores que representam. É melhor usado para comparar diferentes categorias, como que tipo de carro as pessoas têm ou quantos clientes uma loja tem em dias diferentes.

As barras horizontais são os principais componentes de um gráfico de barras. Eles nos permitem comparar facilmente valores de diferentes categorias com facilidade.

Ao construir um gráfico de barras, começamos definindo os dados da série para o gráfico e definindo o type do componente ReactApexChart como bar .

 const config = { series: [{ data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="bar" /> )

Vamos dar mais vida e distinção às barras. Por padrão, os gráficos de barras são verticais. Para torná-los horizontais, definimos como queremos que as barras fiquem na propriedade plotOptions . Definimos o suporte horizontal como true para tornar as barras horizontais. Definimos a posição dos dataLabels para bottom . Também podemos configurá-lo para top ou center . O adereço distributed adiciona distinção às nossas barras. Sem ele, nenhuma cor distinta será aplicada às barras e a legenda não será exibida na parte inferior do gráfico. Também definimos a forma das barras usando as propriedades startingShape e endingShape .

 options{ plotOptions: { bar: { distributed: true, horizontal: true, startingShape: "flat", endingShape: "rounded", dataLabels: { position: 'bottom', }, } }, }

Em seguida, adicionamos as categorias, rótulos e títulos ao gráfico.

 xaxis: { categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'India'] }, title: { text: 'A bar Chart', align: 'center', },

Gráficos de colunas

Um gráfico de colunas é uma visualização de dados onde cada categoria é representada por um retângulo, com a altura do retângulo sendo proporcional aos valores plotados. Assim como os gráficos de barras, os gráficos de colunas são usados ​​para comparar diferentes categorias de dados. Os gráficos de colunas também são conhecidos como gráficos de barras verticais. Para converter o gráfico de barras acima em um gráfico de colunas, tudo o que precisamos fazer é definir horizontal para false em plotOptions .

As colunas verticais facilitam a interpretação dos dados que visualizamos. Além disso, os rótulos de dados adicionados ao topo de cada coluna aumentam a legibilidade do gráfico.

Vamos analisar a construção de um gráfico de colunas básico e ver como podemos convertê-lo em um gráfico de colunas empilhadas.

Como sempre, começamos com os dados da series e definindo o type de gráfico como “barra”.

 const config = { series: [{ name: 'Net Profit', data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }, { name: 'Revenue', data: [76, 85, 101, 98, 87, 105, 91, 114, 94] }, { name: 'Free Cash Flow', data: [35, 41, 36, 26, 45, 48, 52, 53, 41] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="bar" /> )

Isso é o que tiramos da caixa. No entanto, podemos personalizá-lo. Definimos a largura e a forma das barras na propriedade plotOptions . Também definimos a posição do dataLabel como top .

 options: { plotOptions: { bar: { columnWidth: '75%', endingShape: 'flat', dataLabels: { position: "top" }, }, }, }

Em seguida, definimos o estilo e o tamanho da fonte dos rótulos de dados e sua distância dos gráficos. Finalmente, adicionamos os rótulos para os eixos x e y.

 options: { dataLabels: { offsetY: -25, style: { fontSize: '12px', colors: ["#304758"] } }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], }, yaxis: { title: { text: '$ (thousands)' } }, }

Para converter isso em um gráfico empilhado, tudo o que precisamos fazer é adicionar uma propriedade stacked ao chart e defini-la como true . Além disso, como mudamos para um gráfico empilhado, alteraremos a endingShape das barras para flat para remover as curvas.

 options: { chart: { stacked: true, }, plotOptions: { bar: { endingShape: 'flat', } } }

Gráficos de pizza e rosquinhas

Um gráfico de pizza é um gráfico circular que mostra categorias individuais como fatias – ou porcentagens – do todo. O gráfico de rosca é uma variante do gráfico de pizza, com um furo no centro e exibe categorias como arcos em vez de fatias. Ambos tornam os relacionamentos parte-todo fáceis de entender de relance. Gráficos de pizza e gráficos de rosca são comumente usados ​​para visualizar resultados de eleições e censos, receita por produto ou divisão, dados de reciclagem, respostas a pesquisas, detalhamentos orçamentários, estatísticas educacionais, planos de gastos ou segmentação populacional.

Nos gráficos de pizza e rosca, as series são calculadas em porcentagens. Isso significa que a soma dos valores na series deve ser 100.

Vamos começar construindo um gráfico de pizza. Definimos o type de gráfico como pie . Também definimos a series para o gráfico e definimos os rótulos nas options . A ordem dos rótulos corresponde aos valores na matriz de series .

 const config = { series: [20, 10, 35, 12, 23], options: { labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'], } } return ( <ReactApexChart options={config.options} series={config.series} type="pie" /> )

Podemos controlar a natureza responsiva de nossos gráficos. Para fazer isso, adicionamos uma propriedade responsive às options do gráfico. Aqui definimos o ponto de interrupção max-width para 480px . Em seguida, definimos a width do gráfico para 450px e a position da legenda para o bottom . Agora, em tamanhos de tela de 480px e abaixo, a legenda aparecerá na parte inferior do gráfico.

 options: { labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'], responsive: [{ breakpoint: 480, options: { chart: { width: 450 }, legend: { position: 'bottom' } } }] },

Para converter o gráfico de pizza em um gráfico de rosca, tudo o que você precisa fazer é alterar o type do componente para donut .

 <ReactApexChart options={config.options} series={config.series} type="donut" />

Gráficos mistos

Os gráficos mistos permitem combinar dois ou mais tipos de gráficos em um único gráfico. Você pode usar gráficos mistos quando os números em seus dados variam muito de série de dados para série de dados ou quando você tem tipos mistos de dados (por exemplo, preço e volume). Gráficos mistos facilitam a visualização simultânea de diferentes tipos de dados no mesmo formato.

Vamos fazer uma combinação de um gráfico de linha, área e coluna.

Definimos os dados da series e o type para cada um dos gráficos. Para gráficos mistos, o tipo de cada gráfico é definido em sua series e não na prop type do componente ReactApexChart .

 const config = { series: [{ name: 'TEAM A', type: 'column', data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30] }, { name: 'TEAM B', type: 'area', data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43] }, { name: 'TEAM C', type: 'line', data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39] }], options: {} }

Em seguida, definimos o tipo de traço para smooth e definir sua largura. Passamos um array de valores para definir a largura de cada gráfico. Os valores na matriz correspondem à ordem dos gráficos definidos em series . Também definimos a opacidade do preenchimento de cada gráfico. Para isso, também passamos um array. Dessa forma, podemos controlar a opacidade de cada gráfico separadamente.

Por fim, adicionamos os rótulos para os eixos x e y.

 options: { stroke: { width: [2,2,4], curve: 'smooth' }, fill: { opacity: [0.7, 0.3, 1], }, labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov'], yaxis: { title: { text: 'Points', }, }, }

Personalizando nossos gráficos

Além de alterar a cor de nossos gráficos, podemos adicionar algum nível de personalização a eles.

Podemos adicionar grades aos nossos gráficos e estilizá-los. Na propriedade grid , definimos as cores das linhas e colunas do gráfico. Adicionar grades ao gráfico pode facilitar a compreensão.

 options: { grid: { row: { colors: ['#f3f3', 'transparent'], opacity: 0.5 }, column: { colors: ['#dddddd', 'transparent'], opacity: 0.5 }, }, }

Podemos ajustar o curso dos gráficos e definir suas cores. Vamos fazer isso com o gráfico de colunas. Cada cor na matriz de colors corresponde aos dados na matriz de series .

 options: { stroke: { show: true, width: 4, colors: ['red', "blue", "green" ] }, }

Conclusão

Passamos por alguns dos tipos de gráfico que o ApexCharts fornece e aprendemos como alternar de um tipo de gráfico para outro. Também vimos algumas maneiras de personalizar a aparência de nossos gráficos. Ainda há muitas coisas para descobrir, então mergulhe nos documentos do ApexCharts imediatamente.