Is it possible to create a group and stacked vertical bar chart?

[victorodgs]

Hi, people.

I've been tried so many ways in last weeks to create a group stacked vertical bar, like this:

But I just got the standard bar group that can be found in Gallery examples

I also queried some discussions on the repo and found this #1442, but I haven't success.

Thanks for helping.

[rakhi2104]

@victorodgs Did you have any luck implementing this?

[williaster]

going to convert this to a discussion

[wildseansy]

Hope this helps someone, this is how I did represented grouped stacked bars, it's a two-step process

1. Create the "footprint" of the chart with a <BarGroup/> which lays out the horizontal grouping of the stacks
2. Instead of rendering barGroups directly, render stacked <rect /> elements instead, that are grouped using the barGroup horizontal grouping calculations.

Result

For data...

// Waystar Royco Numbers by division: parks/cruises vs. journalistic per month
const data = [
  {
    date: "2022-08-01",
    stacks: [
      {
        amusementPark: 1_222_111,
        cruises: 2_320_002,
      },
      {
        ATN: 6_142_122,
        printMedia: 2_124_111,
      },
    ],
  },
  {
    date: "2022-09-01",
    stacks: [
      {
        amusementPark: 4_970_760,
        cruises: 3_269_338,
      },
      {
        ATN: 2_997_230,
        printMedia: 1_138_940,
      },
    ],
  },
  {
    date: "2022-10-01",
    stacks: [
      {
        amusementPark: 4_504_400,
        cruises: 4_202_206,
      },
      {
        ATN: 1_504_400,
        printMedia: 4_216_808,
      },
    ],
  },
];

Result of <VisxGroupedBarStacks />

Implementation

import { useMemo } from "react";
import { ScaleLinear, ScaleBand, ScaleOrdinal } from "d3-scale";
import { scaleBand, scaleOrdinal, scaleLinear } from "@visx/scale";
import { AxisBottom, AxisLeft, AxisScale, TickFormatter } from "@visx/axis";
import { Group } from "@visx/group";
import { BarGroup } from "@visx/shape";

export type BarStackGroup<T extends string> = {
  date: string;
  stacks: Partial<BarStackValues<T>>[];
};

export type BarStackValues<T extends string> = Record<T, number>;

export type BarStackData<T extends string> = BarStackValues<T> & {
  date: string;
};

export type StackBarFootprint = Record<number, number> & {
  date: string;
};

export const getStackTotal = <T extends string>(
  datum: Partial<BarStackValues<T>>
) => {
  const pointValues: Record<string, number | undefined> = datum;
  const dataKeys = Object.keys(pointValues);

  return dataKeys
    .map((key) => {
      return pointValues[key] ?? 0;
    })
    .reduce((prev, curr) => prev + curr, 0);
};

// Footprint represents the horizontal grouping, but doesn't represent the nature of the stacks within a group
export const useBarGroupFootprint = <T extends string>({
  data,
  xScaleBandwidth,
}: {
  data: BarStackGroup<T>[];
  xScaleBandwidth: number;
}) => {
  return React.useMemo(() => {
    const mockKeys = data[0].stacks.map((_, i) => `${i}`);

    return {
      keys: mockKeys,
      x1Scale: scaleBand<string>({
        domain: mockKeys,
        range: [0, xScaleBandwidth],
        padding: 0.1,
      }),
      // Color won't be used, this is just to not cause typescript to complain when representing <BarGroup/> props
      color: () => "grey",
      data: data.map((group) => {
        const result: StackBarFootprint = {
          date: group.date,
        };

        for (const [index, stack] of group.stacks.entries()) {
          result[index] = getStackTotal(stack);
        }

        return result;
      }),
    };
  }, [data, xScaleBandwidth]);
};

interface Props<T extends string> {
  yScale: ScaleLinear<number, number, never>;
  xScale: ScaleBand<string>;
  yMax: number;
  data: BarStackGroup<T>[];
  keys: T[];
  barColorScale: ScaleOrdinal<T, string, never>;
}

const getDate = (d: { date: string }) => d.date;

export const VisxGroupedBarStacks = <T extends string>({
  data,
  xScale,
  yScale,
  keys,
  barColorScale,
  yMax,
}: Props<T>) => {
  const xScaleBandwidth = xScale.bandwidth();

  const barGroupFootprint = useBarGroupFootprint({ data, xScaleBandwidth });

  return (
    <BarGroup<StackBarFootprint, string>
      x0={getDate}
      x0Scale={xScale}
      yScale={yScale}
      keys={barGroupFootprint.keys}
      data={barGroupFootprint.data}
      color={barGroupFootprint.color}
      height={yMax}
      x1Scale={barGroupFootprint.x1Scale}
    >
      {(barGroups) =>
        barGroups.map((barGroup, dateIndex) => {
          const finalBar = barGroup.bars[barGroup.bars.length - 1];
          const firstBar = barGroup.bars[0];

          // If needed for other calculations, this is the width of the group:
          const groupWidth = finalBar.x + finalBar.width - firstBar.x;

          return (
            <Group
              left={barGroup.x0}
              key={`bar-group-${barGroup.index}-${barGroup.x0}`}
            >
              {barGroup.bars.map((bar, stackIndex) => {
                const dateItem = data[dateIndex];
                const stackItem = dateItem.stacks[stackIndex];
                const stacksShown = keys
                  .filter(
                    (key) =>
                      stackItem[key] !== undefined && stackItem[key] !== 0
                  )
                  .map((key) => ({ value: stackItem[key] ?? 0, key }));

                return stacksShown.map(({ key, value }, i) => {
                  const priorValues = stacksShown
                    .filter((_, j) => j < i)
                    .reduce((prev, curr) => curr.value + prev, 0);
                  const barY = yScale(priorValues);
                  const barHeight = yMax - yScale(value);

                  return (
                    <rect
                      key={`bar-group-bar-${key}`}
                      x={bar.x}
                      y={barY - barHeight}
                      height={barHeight}
                      width={bar.width}
                      fill={barColorScale(key)}
                    />
                  );
                });
              })}
            </Group>
          );
        })
      }
    </BarGroup>
  );
};

// Waystar Royco Numbers by division: parks/cruises vs. journalistic per month
const data: BarStackGroup<RevenueType>[] = [
  {
    date: "2022-08-01",
    stacks: [
      {
        amusementPark: 1_222_111,
        cruises: 2_320_002,
      },
      {
        ATN: 6_142_122,
        printMedia: 2_124_111,
      },
    ],
  },
  {
    date: "2022-09-01",
    stacks: [
      {
        amusementPark: 4_970_760,
        cruises: 3_269_338,
      },
      {
        ATN: 2_997_230,
        printMedia: 1_138_940,
      },
    ],
  },
  {
    date: "2022-10-01",
    stacks: [
      {
        amusementPark: 4_504_400,
        cruises: 4_202_206,
      },
      {
        ATN: 1_504_400,
        printMedia: 4_216_808,
      },
    ],
  },
];

type RevenueType = "amusementPark" | "cruises" | "ATN" | "printMedia";
export type ColorScheme<T extends string> = {
  domain: T[];
  range: string[];
};

const keyOrder: RevenueType[] = [
  "amusementPark",
  "ATN",
  "cruises",
  "printMedia",
];


const colorScheme: ColorScheme<RevenueType> = {
  domain: keyOrder,
  range: ["darkkhaki", "khaki", "steelblue", "skyblue"],
};

export const WaystarRoycoMetrics = () => {
  const width = 600;
  const height = 270;
  const chartMargin = { top: 80, right: 0, bottom: 66, left: 40 };

  const xMax = width - chartMargin.left - chartMargin.right;
  const gridXMax = width - chartMargin.left - chartMargin.right;
  const yMax = height - chartMargin.top - chartMargin.bottom;

  // scales, memoize for performance
  const xScale = useMemo(
    () =>
      scaleBand<string>({
        range: [0, xMax],
        round: true,
        domain: data.map((item) => `${item.date}`),
        padding: 0.2,
      }),
    [xMax, data]
  );
  const yScale = useMemo(
    () =>
      scaleLinear<number>({
        range: [yMax, 0],
        round: true,
        domain: [0, maximumValue],
        nice: true,
      }),
    [yMax, maximumValue]
  );

  return (
    <ScaleSVG width={width} height={height} innerRef={containerRef}>
      <AxisLeft<AxisScale<number>>
        scale={yScale}
        top={chartMargin.top}
        left={chartMargin.left}
        numTicks={6}
        tickFormat={formatYAxis}
        hideTicks
        hideAxisLine
        tickLabelProps={leftAxisLabelProps}
      />
      <GridRows
        top={chartMargin.top}
        left={chartMargin.left}
        scale={yScale}
        width={gridXMax}
        height={yMax}
      />
      <VisxGroupedBarStacks
        keys={keyOrder}
        data={data}
        xScale={xScale}
        yScale={yScale}
        barColorScale={colorScale}
        yMax={yMax}
      />
      <AxisBottom
        top={yMax + chartMargin.top}
        left={chartMargin.left}
        scale={xScale}
        numTicks={3}
        hideTicks
        rangePadding={chartMargin.left - chartMargin.left}
      />
    </ScaleSVG>
  );
};