move legend to the right of the graph

pull/37/head
Miniapple8888 5 months ago
parent c3b33493e5
commit 4cd27dbbaf
  1. 8
      components/StackedBarGraph.module.css
  2. 21
      components/StackedBarGraph.tsx

@ -1,12 +1,16 @@
.container {
position: relative;
}
.barStack:hover {
filter: drop-shadow(0 0 calc(4rem / 16) var(--label));
}
.legend {
position: relative;
position: absolute;
display: flex;
justify-content: center;
font-size: 16px;
top: 0;
}
.toolTip {

@ -45,11 +45,18 @@ export type StackedBarProps = {
numTicksLeftAxis?: number;
/** Distance between the left axis labels and the start of the lines of the graph, in px. */
valueAxisLeftOffset?: number;
/** Distance between the right side of the graph and the legend, in px. */
legendLeftOffset?: number;
/** Distance between the top of the graph and the legend, in px. */
legendTopOffset?: number;
/** Width of the lines in the graph, in px. */
strokeWidth?: number;
/** Length of the dashes and the gaps in the graph, in px. */
strokeDashArray?: string;
/** Padding between each bar in the stacked bar graph, from 0 to 1 */
scalePadding?: number;
/** Margin for each item in the legend */
itemMargin?: string;
};
const tooltipStyles = {
@ -73,6 +80,9 @@ export function StackedBarGraph({
valueAxisLeftOffset = 40,
strokeWidth = 2.5,
strokeDashArray = "10,4",
legendLeftOffset = 40,
legendTopOffset = 40,
itemMargin = "15px 0 0 0",
}: StackedBarProps) {
const yTotals = data.reduce((allTotals, currCategory) => {
const yTotal = keys.reduce((categoryTotal, k) => {
@ -125,7 +135,7 @@ export function StackedBarGraph({
yScale.range([yMax, 0]);
return width < 10 ? null : (
<div>
<div className={styles.container}>
<svg ref={containerRef} width={width} height={height}>
<Group top={margin.top} left={margin.left}>
<GridRows
@ -228,11 +238,14 @@ export function StackedBarGraph({
/>
</Group>
</svg>
<div className={styles.legend} style={{ width: width }}>
<div
className={styles.legend}
style={{ left: width + legendLeftOffset, top: legendTopOffset }}
>
<LegendOrdinal
scale={colorScale}
direction="row"
labelMargin="0 15px 0 0"
direction="column"
itemMargin={itemMargin}
/>
</div>

Loading…
Cancel
Save