LineChart
Um componente de gráfico reutilizável para exibir dados visualmente.
Quando usar:
- Exibir dados em formatos visuais;
- Ideal para mostrar tendências ao longo do tempo;
- Comparação de múltiplas séries.
Quando não usar:
- Para informações simples que podem ser exibidas em um formato tabular ou em texto;
- Dados discretos sem sequência lógica;
- Grande quantidade de série de dados..
Uso
js
<CdsLineChart
variant="green"
size="md"
text="Lorem Ipsum"
@click="lineChartClick = true"
/>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* data (required) | object | { datasets: [ { label: '', data: [], } ] } | -- | Define o conjunto de dados a serem mostrados no gráfico. O objeto deve conter o parâmetro `name` (para identificar o conjunto de dados) e `datasets`, array de objetos que apresentará `label` (indicar o rótulo do dado) e `data` (array com os valores númericos). |
xAxisRange | array | [0, 100] | -- | Define os intervalos máximo e mínimo sugeridos para o eixo X. Caso os valores do dataset ultrapassem os intervalos sugeridos, estes serão desconsiderados, prevalencendo o dataset. |
yAxisRange | array | [0, 100] | -- | Define os intervalos máximo e mínimo sugeridos para o eixo Y. Caso os valores do dataset ultrapassem os intervalos sugeridos, estes serão desconsiderados, prevalencendo o dataset. |
* variant (required) | string | 'green' | green teal blue indigo violet pink red orange amber dark | Personaliza a paleta de cores do gráfico. São 11 variantes implementadas: `green`, `teal`, `turquoise`, `blue`, `indigo`, `violet`, `pink`, `red`, `orange`, `amber`, `gray`, `dark`. |
theme | string | '' | blue indigo | Define o tema do gráfico. |
* labels (required) | array | [] | -- | Defina as labels do gráfico |
* showLabelName (required) | boolean | true | -- | Defina o texto a ser exibido para a legenda. Quando definido como verdadeiro (true), espera-se que exiba o nome do data. Quando definido como falso (false), será definido o nome do dataset |
fill | boolean | false | -- | Defina se deve ser aplicado preenchimento ao gráfico. |
isDashed | boolean | false | -- | Defina se deve transformar o gráfico de linhas sólidas em linhas tracejadas. |
borderDash | array | [] | -- | Defina efeito de linha tracejada. Especificamente, o valor [a, b] define o padrão de traços da linha, onde `a` representa o comprimento de cada traço sólido e `b` representa o comprimento de cada espaço entre os traços. |
smoothing | number | 0.3 | -- | Defina o nível de suavização das linhas do gráfico. |
scales | object | {} | -- | Objeto de configuação de animation. O objeto sobrescreve a configuração padrão. |
animation | object | {} | -- | Objeto de configuação de animation. O objeto sobrescreve a configuração padrão. |
plugins | object | {} | -- | Objeto de configuação de plugins. O objeto sobrescreve a configuração padrão. |