Recentemente iniciamos o desenvolvimento de mais cinco widgets no iMasters Planrockr; todos de gráficos. Para a renderização dos mesmos, optamos por usar o D3JS, que é uma das libs mais robustas para a implementação de gráficos atualmente.

Seria possível implementá-los utilizando somente D3 e foi dessa forma que começamos a implementar o primeiro gráfico. No entanto, aprender a lib do zero pode exigir um tempo e esforço considerável, não sendo nada produtivo no estado inicial. No meio do caminho, acabamos conhecendo uma outra lib para React que abstrai o D3JS, a Recharts.

Essa lib possui uma excelente documentação e conta com vários exemplos. Os gráficos são altamente customizáveis, tanto pelos próprios parâmetros dos componentes, quanto pelo CSS.

Para instalá-la em seu projeto é bem simples. Veja abaixo.

Utilizando o npm:

npm install recharts --save

No nosso componente, importamos os componentes do Recharts que iremos utilizar para montar o gráfico. Abaixo, segue o exemplo de como ficaria o código para um gráfico de linhas:

import React, {Component} from 'react';
const {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from 'recharts';

const data = [
  {name: 'Page A', pv: 2400, amt: 2400},
  {name: 'Page B', pv: 1398, amt: 2210},
  {name: 'Page C', pv: 9800, amt: 2290},
  {name: 'Page D', pv: 3908, amt: 2000},
  {name: 'Page E', pv: 4800, amt: 2181},
  {name: 'Page F', pv: 3800, amt: 2500},
  {name: 'Page G', pv: 4300, amt: 2100},
];

class SimpleLineChart extends Component {
  
  render () {
    return (
      <LineChart
        width={600}
        height={300}
        data={data}
        margin={{top: 5, right: 30, left: 20, bottom: 5}}
        >
        <Line
          type='monotone'
          dataKey='pv'
          stroke='#8884d8'
          activeDot={{r: 8}}
          />
        <CartesianGrid strokeDasharray='3 3'/>
        <Tooltip/>
        <YAxis/>
        <XAxis dataKey='name'/>
        <Legend />
      </LineChart>
    );
  }
}

export default SimpleLineChart;

Com o código acima, obtemos o seguinte resultado:

Na imagem abaixo conseguimos observar quais são os elementos que compõem o gráfico:

Cada tipo de gráfico possui seu respectivo componente raiz, que no caso do gráfico acima é o LineChart.

Cada tag interna ao LineChart representa um componente do gráfico, que normalmente são mais genéricos e são utilizados por mais de um tipo de gráfico. Cada um desses componentes possui seus respectivos parâmetros de configuração, fazendo com que o gráfico fique fácil de ser customizado. Os mesmos podem ser consultados na sessão API da documentação.

Além do LineChart, a lib possui outros tipos de gráficos, como:

• AreaChart
• BarChart
• PieChart
• RadarChart
• RadialBarChart
• ScatterChart
• Treemap

Ainda é possível mesclar alguns desses gráficos entre si utilizando o ComposedChart, que permite mesclar um gráfico de linhas, com um de área e com um de barra por exemplo. Podemos ver isso na imagem abaixo:

Customização por CSS

Cada um dos componentes do gráfico possui suas classes, o que permite que você os customize através de CSS, sobrescrevendo os estilos globais. Alguns deles permitem que você forneça um className, tornando o trabalho ainda mais fácil.

Abaixo segue o exemplo de dois gráficos customizados, que foram implementados utilizando a lib:

Responsividade

Ainda é possível construir gráficos responsivos utilizando o componente ResponsiveContainer, que ainda aceita os parâmetros width e height em percentagem ou em pixel. Para utilizá-lo, basta colocá-lo como wrapper do componente pai do gráfico, conforme abaixo:

<ResponsiveContainer>
  <LineChart>
   ...
  </LineChart>
</ResponsiveContainer>

Clique aqui para ver alguns exemplos.

Gostaria de finalizar o artigo deixando os parabéns para essa equipe que criou e que mantém a lib. Nunca foi tão fácil construir gráficos!