# Bar Chart
O BarChart é muito utilizado por ser um gráfico fácil de ser lido por ser um dos gráficos mais comuns.
- Eixo x: Valores do tipo String (Tipo/O que se quer comparar);
- Eixo y: Valor Numérico que é utilizado para calcular o tamanho da barra (Unidade/Valor da comparação);
- Categoria: Categoria é do tipo String para separar os dados em uma diferenciação extra além do eixo x.
Opções
null
TIP
Caso queira selecionar uma cor específica por categoria, utilizar a função colorCustomizer. O valor recebido por ela é o valor da categoria caso seja passada.
WARNING
Os atributos tick-count e ticks e max-y e max-x são mutualmente exclusivos.
# Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| items | O Array de dados utilizados pelo gráfico | array | - | |
| x | A chave do eixo x (categoria) | string | - | |
| y | A chave do eixo y (valor) | string | - | |
| category | Chave da categoria (separa em cores) | string | - | |
| xTitle | A título do eixo X | string | - | |
| yTitle | A título do eixo Y | string | - | |
| yMin | Valor mínimo de exibição para o eixo Y | number | - | |
| yMax | Valor máximo de exibição para o eixo Y | number | - | |
| height | Altura do gráfico | number | - | 300 |
| marginRatio | Define a margem entre as barras do gŕafico ao usar o tipo dodge O valor deve ser entre 0 e 1 | number | - | 0.5 |
| tickCount | Quantidade de ticks (ignorado se passado ticks) | number | - | |
| ticks | array | - | [] | |
| scaleFormatter | Função de formatação das labels do eixo Y | func | - | |
| labelFormatter | Função de formatação da label colocada ao final da barra | func | - | |
| xLabelFormatter | Função de formatação da label colocada ao final da barra | func | - | (text) => text |
| color | Cor das barras | string | - | |
| colorCustomizer | Função de customização da cor | func | - | |
| size | Tamanho da barra | number|array | - | |
| horizontal | Exibição das barras na horizontal | boolean | - | false |
| hideLegend | Flag para esconder a legenda do gráfico | boolean | - | false |
| legendPosition | Posição de exibição da legenda | string | top, bottom, right, left | 'top' |
| innerValue | Flag para indicar que se deve incluir o valor dentro das barras | boolean | - | false |
| type | Tipo do gráfico de barras | string | stack, dodge | null |
| labelStyle | Estilo que pode ser adicionado ao estilo do label formatter | object | - | |
| hideY | Flag para esconder o eixo y | boolean | - | false |
| hideTooltipTitle | Flag para esconder titulo do item no tooltip | boolean | - | false |
| tooltipFormatter | Função usada para formatar o formato do tooltip. Deve retornar ({name: string, value: string|number}) | func | - | (item) => ({...item, value: item.value, name: item.name}) |
| loading | Flag para aplicar estado de loading ao componente | boolean | - | false |
| radius | Radius das barras | array | - | [0, 0, 0, 0] |
# Methods
| Name | Description |
|---|---|
| getChart | Método que retorna o objeto de gráfico para customização mais baixo nível se necessário |
| render | Método que faz a renderização do componente (caso mude alguma configuração, |
necessário mandar re-renderizar)