@nivo/legends

What is @nivo/legends?

@nivo/legends is a part of the Nivo library, which provides a set of components to build data visualizations in a React application. The @nivo/legends package specifically deals with creating and customizing legends for various types of charts, making it easier to interpret the data being visualized.

What are @nivo/legends's main functionalities?

Basic Legend

This code demonstrates how to create a basic legend using the LegendSvg component from @nivo/legends. The legend is positioned at the top-left corner and displays three series with different colors.

import { LegendSvg } from '@nivo/legends';

const MyLegend = () => (
  <LegendSvg
    data={[
      { id: 'A', label: 'Series A', color: 'hsl(0, 70%, 50%)' },
      { id: 'B', label: 'Series B', color: 'hsl(120, 70%, 50%)' },
      { id: 'C', label: 'Series C', color: 'hsl(240, 70%, 50%)' }
    ]}
    anchor="top-left"
    direction="column"
    justify={false}
    translateX={20}
    translateY={20}
    itemsSpacing={2}
    itemWidth={100}
    itemHeight={20}
    itemDirection="left-to-right"
    itemOpacity={0.75}
    symbolSize={12}
    symbolShape="circle"
  />
);

Interactive Legend

This code demonstrates how to create an interactive legend using the LegendSvg component from @nivo/legends. The legend items are clickable, and clicking on an item will trigger an alert displaying the label of the clicked item.

import { LegendSvg } from '@nivo/legends';

const MyInteractiveLegend = () => (
  <LegendSvg
    data={[
      { id: 'A', label: 'Series A', color: 'hsl(0, 70%, 50%)' },
      { id: 'B', label: 'Series B', color: 'hsl(120, 70%, 50%)' },
      { id: 'C', label: 'Series C', color: 'hsl(240, 70%, 50%)' }
    ]}
    anchor="top-left"
    direction="column"
    justify={false}
    translateX={20}
    translateY={20}
    itemsSpacing={2}
    itemWidth={100}
    itemHeight={20}
    itemDirection="left-to-right"
    itemOpacity={0.75}
    symbolSize={12}
    symbolShape="circle"
    onClick={(datum) => alert(`Clicked on ${datum.label}`)}
  />
);

Custom Symbol Shape

This code demonstrates how to create a legend with custom symbol shapes using the LegendSvg component from @nivo/legends. The symbols are rendered as rectangles with rounded corners instead of the default circles.

import { LegendSvg } from '@nivo/legends';

const MyCustomSymbolLegend = () => (
  <LegendSvg
    data={[
      { id: 'A', label: 'Series A', color: 'hsl(0, 70%, 50%)' },
      { id: 'B', label: 'Series B', color: 'hsl(120, 70%, 50%)' },
      { id: 'C', label: 'Series C', color: 'hsl(240, 70%, 50%)' }
    ]}
    anchor="top-left"
    direction="column"
    justify={false}
    translateX={20}
    translateY={20}
    itemsSpacing={2}
    itemWidth={100}
    itemHeight={20}
    itemDirection="left-to-right"
    itemOpacity={0.75}
    symbolSize={12}
    symbolShape={({ x, y, size, fill, borderWidth, borderColor }) => (
      <rect
        x={x}
        y={y}
        width={size}
        height={size}
        fill={fill}
        strokeWidth={borderWidth}
        stroke={borderColor}
        rx={3}
        ry={3}
      />
    )}
  />
);

Other packages similar to @nivo/legends

react-chartjs-2

react-chartjs-2 is a React wrapper for Chart.js, a popular JavaScript charting library. It provides a variety of chart types and customization options, including legends. Compared to @nivo/legends, react-chartjs-2 offers a more extensive set of chart types but may require more configuration for advanced customizations.

recharts

Recharts is a composable charting library built on React components. It offers a wide range of chart types and customization options, including legends. Recharts is known for its ease of use and flexibility, making it a good alternative to @nivo/legends for creating interactive and customizable charts.

victory

Victory is a collection of composable React components for building interactive data visualizations. It provides a variety of chart types and customization options, including legends. Victory is designed to be highly flexible and modular, allowing developers to create complex visualizations with ease. It compares to @nivo/legends in terms of flexibility and ease of use.

README

@nivo/legends

Changelog

v0.71.0 (2021-06-22)

<a name="v0.70.1"></a>