@vx/legend

@vx/legend

Legends associate shapes and colors to data.

Example

import { LegendThreshold } from '@vx/legend';
import { scaleThreshold } from '@vx/scale';

const threshold = scaleThreshold({
  domain: [0.02, 0.04, 0.06, 0.08, 0.1],
  range: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f']
});

function MyChart() {
  return (
    <div>
      <svg>{/** chart stuff */}</svg>
      <LegendThreshold
        scale={threshold}
        direction="column-reverse"
        itemDirection="row-reverse"
        labelMargin="0 20px 0 0"
        shapeMargin="1px 0 0"
      />
    </div>
  );
}

Installation

npm install --save @vx/legend

Components

• Legend
• LegendItem
• LegendLabel
• LegendShape
• Linear
• Ordinal
• Quantile
• Size
• Threshold
• Circle
• Rect

API

<Legend />

# Legend.children<func>

# Legend.className<string>

# Legend.direction<string>

Default

'column'

# Legend.domain<array>

# Legend.fill<any>

Default

valueOrIdentity

# Legend.itemDirection<string>

Default

'row'

# Legend.itemMargin<string>

Default

'0'

# Legend.labelAlign<string>

Default

'left'

# Legend.labelFlex<string>

Default

'1'

# Legend.labelFormat<func>

Default

valueOrIdentity

# Legend.labelMargin<string>

Default

'0 4px'

# Legend.labelTransform<func>

Default

function defaultTransform({ scale, labelFormat }) { return (d, i) => { return { datum: d, index: i, text: ${labelFormat(d, i)}, value: scale(d), }; }; }

# Legend.scale<union(func|object)> required

# Legend.shape<any>

# Legend.shapeHeight<union(number|string)>

Default

15

# Legend.shapeMargin<any>

Default

'2px 4px 2px 0'

# Legend.shapeStyle<any>

# Legend.shapeWidth<union(number|string)>

Default

15

# Legend.size<any>

Default

valueOrIdentity

# Legend.style<any>

Default

{ display: 'flex', }

<LegendItem />

# LegendItem.alignItems<string>

Default

'center'

# LegendItem.children<any>

# LegendItem.display<string>

Default

'flex'

# LegendItem.flexDirection<string>

Default

'row'

# LegendItem.margin<union(string|number)>

Default

'0'

<LegendLabel />

# LegendLabel.align<string>

Default

'left'

# LegendLabel.children<any>

# LegendLabel.flex<union(string|number)>

Default

'1'

# LegendLabel.label<any>

# LegendLabel.margin<union(string|number)>

Default

'5px 0'

<LegendShape />

# LegendShape.fill<any>

# LegendShape.height<any>

# LegendShape.label<any>

# LegendShape.margin<any>

# LegendShape.shape<any>

Default

ShapeRect

# LegendShape.shapeStyle<any>

# LegendShape.size<any>

# LegendShape.width<any>

<Linear />

# Linear.domain<array>

# Linear.labelFormat<func>

Default

x => x

# Linear.labelTransform<func>

Default

function defaultTransform({ scale, labelFormat }) { return (d, i) => { return { text: ${labelFormat(d, i)}, value: scale(d), }; }; }

# Linear.scale<func> required

# Linear.steps<number>

Default

5

<Ordinal />

# Ordinal.domain<array>

# Ordinal.labelFormat<func>

Default

valueOrIdentity

# Ordinal.labelTransform<func>

Default

function defaultTransform({ scale, labelFormat }) { return (d, i) => { return { datum: d, index: i, text: ${labelFormat(d, i)}, value: scale(d), }; }; }

# Ordinal.scale<func> required

<Quantile />

# Quantile.domain<array>

# Quantile.labelDelimiter<string>

Default

'-'

# Quantile.labelFormat<func>

Default

x => x

# Quantile.labelTransform<func>

# Quantile.scale<func> required

<Size />

# Size.domain<array>

# Size.labelFormat<func>

Default

x => x

# Size.labelTransform<func>

Default

function defaultTransform({ scale, labelFormat }) { return (d, i) => { return { text: ${labelFormat(d, i)}, value: scale(d), datum: d, index: i, }; }; }

# Size.scale<func> required

# Size.steps<number>

Default

5

<Threshold />

# Threshold.domain<array>

# Threshold.labelDelimiter<string>

Default

'to'

# Threshold.labelFormat<func>

Default

x => x

# Threshold.labelLower<string>

Default

'Less than '

# Threshold.labelTransform<func>

# Threshold.labelUpper<string>

Default

'More than '

# Threshold.scale<func> required

<Circle />

# Circle.fill<any>

# Circle.height<union(number|string)>

# Circle.style<object>

# Circle.width<union(number|string)>

<Rect />

# Rect.fill<any>

# Rect.height<union(number|string)>

# Rect.style<object>

# Rect.width<union(number|string)>

Changelog

v0.0.193

See the TypeScript project for a full list of issues + PRs.

:trophy: Contributors

• williaster
• hshoff
• Rudeg
• diagramatics
• geekplux
• dennisja

:rocket: Enhancements

• [@vx/*]
  • all packages re-written in TypeScript and export types under lib/index.d.ts
  • Many misc bug fixes with improved type safety, most propTypes are likely stricter now
• [brush] @vx/brush now exports a working Brush component :tada:
• [demo]
  • all gallery demos re-written with react hooks + types
  • new @vx/brush demo is added

:memo: Documentation

• [@vx/*] all components in all packages now have full doc strings. note: these is not yet reflected on the docs site.

:boom: Breaking Changes

• [boxplot] @vx/boxplot deprecated in favor of @vx/stats #561
• [mock-data] radius and distance values in the @vx/mock-data exoplanet dataset were updated from strings to numbers to remove the need for consumers to coerce to numbers themselves #579
• [drag] #499
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • Empty parent <g> wrapper around Drag children was replaced with a React.Fragment which removes a DOM element.
• [pattern] PatternOrientation is no longer the default export of @vx/patterns/lib/constants and is instead a named export. PatternOrientation is still used as the export name if importing from the index: import { PatternOrientation } from '@vx/pattern' #503
• [shape] #507
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • the Arc centroid prop was removed as it was not functional (it was called as if it was an arc.centroid() configuration parameter, but in reality the .centroid method is for returning the centroid of a datum.
  • the Area component is no longer wrapped in an empty <g> element
  • order and offset props for Stack, BarStack, BarStackHorizontal, and AreaStack previously supported string, array, or functions. Only the string prop was functional, and only the enumerated string presets are now allowed.
• [voronoi] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #512
• [network] #535
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • <Nodes /> inner node wrapper <g> element className changed to singular (vx-network-nodes => vx-network-node) and outer wrapper <g> was replaced with a React.Fragment
  • <Links /> inner link wrapper <g> element className changed to singular (vx-network-links => vx-network-link) and outer wrapper <g> was replaced with a React.Fragment
• [glyph] #518
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • (non-functional) children prop removed from GlyphDot component
• [heatmap] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #520
• [hierarchy] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #524
• [threshold] makes the Threshold id prop required #533
• [geo] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #537
• [legend] #551
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • the following directory structures were changed which will break deep imports: src/legends/* => src/*
• [stats] #570
  • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
  • the following directory structures were changed which will break deep imports
    • src/violinplot/ViolinPlot.jsx => src/ViolinPlot.tsx
    • src/boxplot/BoxPlot.jsx => src/BoxPlot.tsx

:house: Internal

• add TypeScript build support to monorepo #488
• [text] Remove deprecated lifecycles used in Text #576

Changes:
 - @vx/annotation: 0.0.192 => 0.0.193
 - @vx/axis: 0.0.192 => 0.0.193
 - @vx/bounds: 0.0.192 => 0.0.193
 - @vx/brush: 0.0.192 => 0.0.193
 - @vx/chord: 0.0.192 => 0.0.193
 - @vx/clip-path: 0.0.192 => 0.0.193
 - @vx/curve: 0.0.192 => 0.0.193
 - @vx/demo: 0.0.192 => 0.0.193
 - @vx/drag: 0.0.192 => 0.0.193
 - @vx/event: 0.0.192 => 0.0.193
 - @vx/geo: 0.0.192 => 0.0.193
 - @vx/glyph: 0.0.192 => 0.0.193
 - @vx/gradient: 0.0.192 => 0.0.193
 - @vx/grid: 0.0.192 => 0.0.193
 - @vx/group: 0.0.192 => 0.0.193
 - @vx/heatmap: 0.0.192 => 0.0.193
 - @vx/hierarchy: 0.0.192 => 0.0.193
 - @vx/legend: 0.0.192 => 0.0.193
 - @vx/marker: 0.0.192 => 0.0.193
 - @vx/mock-data: 0.0.192 => 0.0.193
 - @vx/network: 0.0.192 => 0.0.193
 - @vx/pattern: 0.0.192 => 0.0.193
 - @vx/point: 0.0.192 => 0.0.193
 - @vx/responsive: 0.0.192 => 0.0.193
 - @vx/scale: 0.0.192 => 0.0.193
 - @vx/shape: 0.0.192 => 0.0.193
 - @vx/stats: 0.0.192 => 0.0.193
 - @vx/text: 0.0.192 => 0.0.193
 - @vx/threshold: 0.0.192 => 0.0.193
 - @vx/tooltip: 0.0.192 => 0.0.193
 - @vx/voronoi: 0.0.192 => 0.0.193
 - @vx/vx: 0.0.192 => 0.0.193
 - @vx/zoom: 0.0.192 => 0.0.193