StackedBarChart
Um componente de gráfico reutilizável para exibir dados visualmente.
Quando usar:
- Exibir dados em formatos visuais;
- Comparação de dados como um todo;
- Tendências ao longo do tempo.
Quando não usar:
- Para informações simples que podem ser exibidas em um formato tabular ou em texto;
- Comparação absoluta;
- Muitas categorias.
Uso
js
<CdsStackedBarChart
variant="green"
size="md"
text="Lorem Ipsum"
@click="stackedBarChartClick = true"
/>
Preview
Stacked bar monocromática
Quando a prop variant
é especificada e não há propriedade de cor indicada no objeto de configuração, o gráfico é gerado no modo monocromático, com as shades de variant mudando para cada dataset.
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). |
* 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 |
barWidth | number | 1 | -- | Configura a porcentagem ocupada pela barra do gráfico. (0.1-1). |