Discrete legend

The DiscreteLegend component help the viewer of a graphic interpret mappings between categories or classes and colors and/or opacities.

<script>
  import { Graphic, DiscreteLegend, Label } from '@snlab/florence'
</script>

<Graphic width={300} height={200} scaleX={[0, 300]} scaleY={[0, 200]}>

  <DiscreteLegend
    x1={50} x2={250}
    y1={25} y2={175}
    fill={['red', 'blue', 'green']}
    labels={['red', 'blue', 'green']}
  >

    <Label x={0.5} y={0.1} text="Discrete legend" />

  </DiscreteLegend>

</Graphic>

Properties

Positioning

Prop	Required	Type(s)	Default	Unit(s)
x1	`true`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
x2	`true`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
y1	`true`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
y2	`true`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate

Positioning the DiscreteLegend works similar to positioning the Section and Rectangle, except that for the DiscreteLegend all positioning props are required.

Internal positioning

Prop	Required	Type(s)	Default	Unit(s)
xDivider	`false`	`Number`	`0.3`	Number between 0 and 1
yDivider	`false`	`Number`	`0.2`	Number between 0 and 1
padding	`false`	`Number`, `Object`	`1`	Pixel
cellPadding	`false`	`Number`, `Object`	`2`	Pixel

xDivider is used to determine what proportion of horizontal space the color swatches get. The remaining space is used by the labels. At the default value of 0.2 the color swatches get 20% of the space inside of the legend. The labels will thus start at 20% of the distance between x1 and x2, plus left-side padding.

yDivider determines what proportion of empty vertical space is made available at the top of the legend for, for example, titles (see Slot below). The remaining space is used by the color swatches and labels.

padding and cellPadding are used to apply padding around respectively all the color swatches/labels, and each individual color swatch/label. Both props can either be Numbers, representing padding in pixels on all sides, or Objects with any of the members top, bottom, left and/or right. For example:

{
  top: 10,
  right: 20
}

Labels and aesthetics

Prop	Required	Type(s)	Default	Unit(s)
labels	`true`	`String[]`, `Number[]`	`undefined`	-
fill	`true`	`String`, `String[]`	`undefined`	Named, hex, rgb or hsl color
opacity	`false`	`Number`, `Number[]`	`1`	Number between 0 and 1

labels and fill are always required. If fill and opacity are passed as Arrays, they must be of the same length as the labels Array.

Other aesthetics

Prop	Required	Type(s)	Default	Unit(s)
stroke	`false`	`String`	`'none'`	Named, hex, rgb or hsl color
strokeWidth	`false`	`Number`	`2`	Pixel
labelFont	`false`	`String`	`'Helvetica'`	Name of font family
labelFontSize	`false`	`Number`	`10`	Pixel
labelFontWeight	`false`	`Number`, `String`	`'normal'`	See Label docs
labelOpacity	`false`	`Number`	`1`	Number between 0 and 1
labelColor	`false`	`String`	`'black'`	Named, hex, rgb or hsl color

stroke and strokeWidth refer to the color swatches.

Other

Prop	Required	Type(s)	Default	Unit(s)
clip	`false`	`String`, `undefined`	`'outer'`	Either `'padding'`, `'outer'` or `undefined`

Can be used to override the clip mode of the parent Graphic, Section or Glyph. When undefined, inherits from the parent Section or Graphic.

Slot

The DiscreteLegend has a slot where any florence component can be placed. This is particularly useful for titles using the Label component, which can be placed in the space on the top of the legend (determined by the yDivider prop, by default 0.2) . The legend functions as a Section with a local coordinate system that spans from 0 to 1 in both x and y dimensions. For an example of a legend with a title, see the example on the top of the page.