@visx/shape

What is @visx/shape?

@visx/shape is a part of the VisX library, which provides a collection of low-level visualization components for building custom visualizations in React. The @visx/shape package specifically focuses on providing a variety of shape components such as bars, lines, areas, and more, which can be used to create complex and highly customizable charts and graphs.

What are @visx/shape's main functionalities?

Bar

The Bar component is used to create bar charts. The code sample demonstrates how to render a simple bar chart using the Bar component, where each bar's height is determined by the data values.

import { Bar } from '@visx/shape';

const MyBarChart = ({ data }) => (
  <svg width={500} height={500}>
    {data.map((d, i) => (
      <Bar
        key={`bar-${i}`}
        x={i * 30}
        y={500 - d.value}
        width={25}
        height={d.value}
        fill="teal"
      />
    ))}
  </svg>
);

LinePath

The LinePath component is used to create line charts. The code sample demonstrates how to render a simple line chart using the LinePath component, where the line's path is determined by the data values.

import { LinePath } from '@visx/shape';

const MyLineChart = ({ data }) => (
  <svg width={500} height={500}>
    <LinePath
      data={data}
      x={(d, i) => i * 30}
      y={d => 500 - d.value}
      stroke="blue"
      strokeWidth={2}
    />
  </svg>
);

AreaClosed

The AreaClosed component is used to create area charts. The code sample demonstrates how to render a simple area chart using the AreaClosed component, where the area is filled based on the data values.

import { AreaClosed } from '@visx/shape';

const MyAreaChart = ({ data }) => (
  <svg width={500} height={500}>
    <AreaClosed
      data={data}
      x={(d, i) => i * 30}
      y={d => 500 - d.value}
      yScale={d => 500 - d}
      fill="lightblue"
      stroke="blue"
    />
  </svg>
);

Other packages similar to @visx/shape

d3-shape

d3-shape is a part of the D3.js library that provides functions for creating common shapes such as lines, areas, arcs, pies, and more. It is highly flexible and powerful, but it requires more manual setup compared to @visx/shape, which is more React-friendly and provides ready-to-use React components.

recharts

Recharts is a charting library built on React components, similar to @visx/shape. It provides a higher-level API for creating charts and is easier to use for common chart types. However, it may not offer the same level of customization and flexibility as @visx/shape for creating highly customized visualizations.

victory

Victory is another React-based charting library that provides a wide range of chart components. It is similar to @visx/shape in terms of providing React components for visualization, but it offers more built-in chart types and theming options, making it easier to get started with standard charts.

README

@visx/shape

Shapes are the core elements of visx. Most of what you see on the screen, like lines, bars, and areas are all made with shape primitives.

Installation

npm install --save @visx/shape

Changelog

v3.12.0 (2024-11-07)

:rocket: Enhancements

• feat(sankey): add @visx/sankey #1880

:memo: Documentation

• Fix small error in the code example in the "Theming" section #1863

:trophy: Contributors

• jacksonhardaker
• maurer2