Stacked Bar chart

[PMLS3]

Is there an example of a stacked bar chart somewhere? Thanks in advance

[ghalex]

Hi @PMLS3,

You need to use <Group /> component:

<Chart
  <Chart
  :size="{ width, height: 400 }"
  :data="data"
  :axis="axis"
  :margin="margin"
  :direction="direction"
>
  <template #layers>
    <Grid strokeDasharray="2,2" :center="false" />
    <Group :stacked="true">
      <Bar :dataKeys="['name', 'pl']" :barStyle="{ fill: 'red' }" />
      <Bar :dataKeys="['name', 'avg']" :barStyle="{ fill: 'blue' }" />
    </Group>
  </template>
  <template #widgets>
    <Tooltip
      hideLine
      :config="{
        name: { hide: true },
        inc: { hide: true },
        pl: { color: '#0077b6' },
        avg: { label: 'averange', color: '#0096c7' }
      }"
    />
  </template>
</Chart>

[PMLS3]

Appreciate

[mberneis]

Bars disappear for me when I use the Group component (Yes, I imported it and added it to the components definition)

[rbrugo]

Same here, any solution?