How to use the @vx/scale/build/scales/ordinal function in @vx/scale
To help you get started, we’ve selected a few @vx/scale examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
williaster / data-ui / packages / demo / examples / 01-xy-chart / StackedAreaExample.jsx View on Github 
return { ...obj, y: obj.y + value, [key]: value };
},
{ y: 0 },
),
}));
const percentStackedData = stackedData.map(d => ({
...d,
y: 1,
...stackKeys.reduce((obj, key) => ({ ...obj, [key]: d[key] / d.y }), {}),
}));
const patternIds = [PATTERN_ID_1, PATTERN_ID_2, PATTERN_ID_3];
const stackFills = patternIds.map(id => `url(#${id})`);
const legendScale = scaleOrdinal({ range: stackFills, domain: stackKeys });
export default function StackedAreaExample() {
return (
{asPercent => (
<div>
<div style="{{">
(
<svg height="{height}" width="{width}">
<rect fill="{fill}" height="{height}" width="{width}"></rect>
</svg>
)}</div></div>
