Design System

# Line Chart

Component Type

O gráfico de linhas geralmente é utilizado para exibir um mesmo valor ao longo de um período de tempo. Além do valor

  • Eixo x: Valores do tipo String (Tipo ou o que se quer mostrar);
  • Eixo y: Valor Numérico que é utilizado para calcular o tamanho da barra;
  • Categoria (category): Categoria também é do tipo String para separar os dados em uma diferenciação extra ao eixo x.

Use o tickCount ou ticks quando quer deixar pré-definido os ticks que vão ser exibidos. Mas note que eles devem ser múltiplos da quantidade total do range. Ex: No range 2000-2020, pode utilzar o tickCount os valores de 10, 5, 4, 2 ou 1. Os outros números não vão respeitar corretamente o número indicado.

Opções

# Props

Prop name Description Type Values Default
items O Array de dados utilizados pelo gráfico array -
type Tipo da renderização do gráfico de linhas string line, area, stacked, left TYPES.LINE
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 -
height Altura do gráfico number - 300
ticks Array de ticks ticks do eixo y fixados array - []
tickCount Quantidade de ticks (ignorado se passado ticks) number -
scaleFormatter Função de formatação das labels do eixo Y func -
color Cor das barras string -
colorCustomizer Função de customização da cor func -
smooth Flag para indicar se o gráfico deve ter linhas curvas ou
retas		 boolean - false
size Tamanho da barra number -
legendPosition Posição de exibição da legenda string top, bottom, right, left 'top'
withPoints Flag para adicionar pontos aos pontinhos
dos gráficos		 boolean - false
hideLines Flag para esconder o grid/linhas de escala boolean - false
hideY Flag para esconder o eixo Y boolean - false
loading Aplica estado de loading no gráfico 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})
padding Padding do gráfico. Array com o padding das 4 posições array - [10, 10, 50, 40]

# 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)

← Pie Chart →