Column Pair Chart
DataTwo small column groups grow from one dashed baseline that runs unbroken across both, so the comparison is on a single scale
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 3 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Groups *groups · array
One group, or two for a comparison. Two is what this component is for.
now: 2 items
- Scale maxscaleMax · number
Top of the shared scale. 0 derives it from the largest value across both groups, which is almost always right.
now: 0
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: ledger
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
Two small column charts side by side sharing one dashed baseline that draws all the way across the frame before either group appears, the unbroken line is what says both are on the same scale. Bars are flat and square-cornered with no gradient or rounding, growing up from the baseline one after another with their month labels fading in beneath. One group takes the accent colour and the other the alternate, because the pairing is usually the argument.
