@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.179

:boom: Breaking Changes

• [vx] there's a possibility that new prop type checks might not be as care free as before. #371

:rocket: Enhancements

• [vx] add missing propTypes to all components. #371

:house: Internal

• [vx] add .eslintrc. #371
• [vx] fix all eslint errors + warnings. #371

:trophy: Contributors

• hshoff

Changes:
 - @vx/annotation: 0.0.178 => 0.0.179
 - @vx/axis: 0.0.178 => 0.0.179
 - @vx/brush: 0.0.165 => 0.0.179
 - @vx/demo: 0.0.178 => 0.0.179
 - @vx/drag: 0.0.165 => 0.0.179
 - @vx/event: 0.0.165 => 0.0.179
 - @vx/geo: 0.0.170 => 0.0.179
 - @vx/glyph: 0.0.170 => 0.0.179
 - @vx/grid: 0.0.178 => 0.0.179
 - @vx/heatmap: 0.0.173 => 0.0.179
 - @vx/hierarchy: 0.0.170 => 0.0.179
 - @vx/legend: 0.0.178 => 0.0.179
 - @vx/marker: 0.0.178 => 0.0.179
 - @vx/mock-data: 0.0.165 => 0.0.179
 - @vx/network: 0.0.172 => 0.0.179
 - @vx/pattern: 0.0.165 => 0.0.179
 - @vx/responsive: 0.0.177 => 0.0.179
 - @vx/scale: 0.0.178 => 0.0.179
 - @vx/shape: 0.0.178 => 0.0.179
 - @vx/stats: 0.0.178 => 0.0.179
 - @vx/text: 0.0.175 => 0.0.179
 - @vx/threshold: 0.0.178 => 0.0.179
 - @vx/tooltip: 0.0.165 => 0.0.179
 - @vx/vx: 0.0.178 => 0.0.179