@vx/shape

What is @vx/shape?

@vx/shape is a part of the vx library, which is a collection of reusable low-level visualization components. The @vx/shape package provides a set of components for creating various shapes and paths in SVG, which can be used to build complex visualizations like charts and graphs.

What are @vx/shape's main functionalities?

Bar

The Bar component allows you to create bar charts. The code sample demonstrates how to create a simple bar chart using SVG rectangles.

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

LinePath

The LinePath component is used to create line charts. The code sample shows how to create a simple line chart using an SVG path element.

const LinePath = ({ data }) => (
  <svg width={500} height={500}>
    <path
      d={`M ${data.map((d, i) => `${i * 30},${500 - d}`).join(' L ')}`}
      fill="none"
      stroke="blue"
    />
  </svg>
);

Pie

The Pie component is used to create pie charts. The code sample demonstrates how to create a simple pie chart using SVG path elements.

const Pie = ({ data }) => (
  <svg width={500} height={500}>
    {data.map((d, i) => (
      <path
        key={i}
        d={`M250,250 L${250 + 200 * Math.cos(2 * Math.PI * i / data.length)},${250 + 200 * Math.sin(2 * Math.PI * i / data.length)} A200,200 0 0,1 ${250 + 200 * Math.cos(2 * Math.PI * (i + 1) / data.length)},${250 + 200 * Math.sin(2 * Math.PI * (i + 1) / data.length)} Z`}
        fill={d.color}
      />
    ))}
  </svg>
);

Other packages similar to @vx/shape

d3-shape

d3-shape is a part of the D3.js library that provides functions for creating complex shapes and paths. It is more comprehensive and flexible compared to @vx/shape, but also more complex to use.

react-vis

react-vis is a React-based visualization library that provides a set of high-level components for creating charts and graphs. It is easier to use compared to @vx/shape but offers less customization and flexibility.

victory

Victory is another React-based library for creating data visualizations. It provides a wide range of pre-built components for different types of charts and is easier to use compared to @vx/shape, but it may not offer the same level of customization.

README

The README file is missing

Changelog

v0.0.159

:rocket: Enhancements

• [axis] By default <Axis /> components now use @vx/text to render tick labels. This enables multi line labels and scaling text to fit in a certain amount of space. #260

Example:

<Axis 
  {...axisProps}
  tickLabelProps = (tickValue, index) => ({
    textAnchor: 'middle',
    verticalAnchor: 'middle',
    width: 100,
    scaleToFit: true
  })
/>

• [axis] <Axis /> components got a new prop tickComponent to enable rendering of custom ticks. With this prop one can completely customize ticks without having to create a new custom <Axis /> component. #260

Example:

<Axis
  {...axisProps}
  tickComponent={({ x, y, formattedValue }) => (
    <g>
      <circle cx={x} cy={y} r={2} fill='rebeccapurple' />
      <text x={x + 4} y={y}>{formattedValue}</text>
    </g>
  )}
/>

tickComponent accepts a function and gets called with the following attribute:

tickComponent({ x, y, formattedValue, ...tickLabelPropsObj })

:memo: Documentation

• [axis] update @vx/axis documentation. #260
• [demo] fix bargroup example code. #250
• [demo] fix barstack example code. #249
• [text] fix readme.md of @vx/text package. #257

:trophy: Contributors

• bulat-f
• sto3psl
• browniefed

Changes:
 - @vx/axis: 0.0.158 => 0.0.159
 - @vx/demo: 0.0.158 => 0.0.159
 - @vx/text: 0.0.153 => 0.0.159
 - @vx/vx: 0.0.158 => 0.0.159