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