Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import * as React from "react"
import {
VerticalColorLegend,
VerticalColorLegendManager,
} from "./VerticalColorLegend"
export default {
title: "VerticalColorLegend",
component: VerticalColorLegend,
}
const manager: VerticalColorLegendManager = {
maxLegendWidth: 500,
title: "Legend Title",
legendItems: [
{
label: "Canada",
color: "red",
},
{
label: "Mexico",
color: "green",
},
],
activeColors: ["red", "green"],
}
export const CategoricalBins = (): JSX.Element => {
return (
<svg width={600} height={400}>
<VerticalColorLegend manager={manager} />
</svg>
)
}
|