@plurall/charts

Componente responsável por renderizar gráficos. Inicialmente dá suporte apenas a gráficos do tipo barra.

Usage no npm install needed!

<script type="module">
  import plurallCharts from 'https://cdn.skypack.dev/@plurall/charts';
</script>

README

PlurallCharts

Componente responsável por renderizar gráficos. Inicialmente dá suporte apenas a gráficos do tipo barra.

Props

  • ariaLabel: string
    • Atributo para acessibilidade.
  • backgroundColor: string
    • Permite alterar a cor de fundo do gráfico.
  • data: Data[] - required,
    • Conjunto de dados para o plot.
  • dataTest: string,
    • Identificador para fins de testes.
  • hideGrid: boolean,
    • Permite que os eixos internos de marcação do grid sejam ocultados.
  • labels: string[] - required
    • Lista de valores que identificam cada marcação no eixo das abscissas.
  • options: object,
  • title: string,
    • Título apresentado para o gráfico.
  • width: number,
    • Especifica, em porcentagem, a largura que o gráfico ocupará, comparativamente ao seu container.

Cada objeto que compõe a prop data é da forma:

- backgroundColor: `string` - `required`
  * Cor da barra

- data: `number[]` - `required`.
  * Lista de valores para cada item (barra).

- label: PropTypes.string.isRequired,
  * Label associado à barra.

Exemplo de uso

<div>
  <PlurallCharts
    ariaLabel='Gráfico de dǘvidas'
    backgroundColor='#FFF'
    data={data}
    hideGrid
    labels={labels}
    options={options}
    title='Dúvidas'
  />
</div>