@visx/legend

What is @visx/legend?

@visx/legend is a part of the VisX library, which provides a collection of reusable low-level visualization components for React. The @visx/legend package specifically helps in creating legends for charts and graphs, making it easier to interpret the data being visualized.

What are @visx/legend's main functionalities?

Legend

This code demonstrates how to create a simple ordinal legend using the @visx/legend package. The LegendOrdinal component is used to map domain values to colors, making it easier to understand the data represented in a chart.

import React from 'react';
import { LegendOrdinal } from '@visx/legend';
import { scaleOrdinal } from '@visx/scale';

const ordinalColorScale = scaleOrdinal({
  domain: ['Apple', 'Banana', 'Cherry'],
  range: ['#ff0000', '#ffff00', '#ff007f'],
});

const LegendExample = () => (
  <LegendOrdinal scale={ordinalColorScale} labelFormat={label => `${label}`} />
);

export default LegendExample;

Legend with Shape

This example shows how to create a legend with custom shapes using the @visx/legend package. The Circle component from @visx/shape is used to render colored circles next to each legend label.

import React from 'react';
import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
import { scaleOrdinal } from '@visx/scale';
import { Circle } from '@visx/shape';

const ordinalColorScale = scaleOrdinal({
  domain: ['Apple', 'Banana', 'Cherry'],
  range: ['#ff0000', '#ffff00', '#ff007f'],
});

const LegendWithShapeExample = () => (
  <LegendOrdinal scale={ordinalColorScale} labelFormat={label => `${label}`}>
    {labels =>
      labels.map((label, i) => (
        <LegendItem key={`legend-ordinal-${i}`} margin="0 5px">
          <Circle fill={label.value} size={10} />
          <LegendLabel align="left" margin="0 0 0 4px">
            {label.text}
          </LegendLabel>
        </LegendItem>
      ))
    }
  </LegendOrdinal>
);

export default LegendWithShapeExample;

Other packages similar to @visx/legend

recharts

Recharts is a composable charting library built on React components. It provides a wide range of chart types and built-in legends, making it easy to create complex visualizations. Compared to @visx/legend, Recharts offers more high-level components and is easier to use for common charting needs.

victory

Victory is another React-based charting library that offers a variety of chart types and built-in legends. It is highly customizable and provides a more extensive set of features for creating interactive and animated charts. Victory is more feature-rich compared to @visx/legend, but it may have a steeper learning curve.

nivo

Nivo provides a rich set of dataviz components, built on top of D3 and React. It offers a variety of chart types and built-in legends, similar to @visx/legend. Nivo is known for its beautiful and highly customizable charts, making it a strong alternative for creating visually appealing data visualizations.

README

@visx/legend

Legends associate shapes and colors to data, and are associated with scales.

Example

import { LegendThreshold } from '@visx/legend';
import { scaleThreshold } from '@visx/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 @visx/legend