@vx/legend

@vx/legend

npm install --save @vx/legend

Legends associate shapes and colors to data.

// legends for linear scales
import { LegendLinear } from '@vx/legend';

// legends for quantile scales
import { LegendQuantile } from '@vx/legend';

// legends for ordinal scales
import { LegendOrdinal } from '@vx/legend';

// legends for size scales
import { LegendSize } from '@vx/legend';

// legends for threshold scales
import { LegendThreshold } from '@vx/legend';

// custom legends
import { Legend } from '@vx/legend';

API

LegendLinear

LegendQuantile

LegendOrdinal

LegendThreshold

LegendSize

Legend

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>
  );
}

Changelog

v0.0.141

:rocket: Enhancement

• [hierarchy] add render prop to <Tree /> + <Cluster /> #163
• [axis] render prop for axis, full control over rendering #165
• [event] add touch event support to localPoint(), find owner svg for single arity call #167

:bug: Bug Fix

• [shape] fix typo in stack order enum #164
• [legend] fix legend threshold #166

Changes:
 - @vx/annotation: 0.0.140 => 0.0.141
 - @vx/axis: 0.0.140 => 0.0.141
 - @vx/bounds: 0.0.140 => 0.0.141
 - @vx/demo: 0.0.140 => 0.0.141
 - @vx/event: 0.0.140 => 0.0.141
 - @vx/grid: 0.0.140 => 0.0.141
 - @vx/hierarchy: 0.0.140 => 0.0.141
 - @vx/legend: 0.0.140 => 0.0.141
 - @vx/marker: 0.0.140 => 0.0.141
 - @vx/shape: 0.0.140 => 0.0.141
 - @vx/tooltip: 0.0.140 => 0.0.141
 - @vx/vx: 0.0.140 => 0.0.141