@visx/xychart

What is @visx/xychart?

@visx/xychart is a powerful and flexible library for creating complex and customizable charts in React applications. It leverages D3 for calculations and rendering, providing a declarative API for building various types of XY charts.

What are @visx/xychart's main functionalities?

Line Chart

This code demonstrates how to create a simple line chart using @visx/xychart. It includes animated axes, grid, and a line series with a tooltip.

import { XYChart, AnimatedAxis, AnimatedGrid, AnimatedLineSeries, Tooltip } from '@visx/xychart';

const data = [
  { x: 0, y: 50 },
  { x: 1, y: 10 },
  { x: 2, y: 20 },
  { x: 3, y: 30 },
  { x: 4, y: 40 },
];

const accessors = {
  xAccessor: d => d.x,
  yAccessor: d => d.y,
};

function LineChart() {
  return (
    <XYChart height={300} width={500} xScale={{ type: 'linear' }} yScale={{ type: 'linear' }}>
      <AnimatedAxis orientation="bottom" />
      <AnimatedAxis orientation="left" />
      <AnimatedGrid columns={false} numTicks={4} />
      <AnimatedLineSeries dataKey="Line Series" data={data} {...accessors} />
      <Tooltip />
    </XYChart>
  );
}

Bar Chart

This code demonstrates how to create a bar chart using @visx/xychart. It includes animated axes, grid, and a bar series with a tooltip.

import { XYChart, AnimatedAxis, AnimatedGrid, AnimatedBarSeries, Tooltip } from '@visx/xychart';

const data = [
  { x: 'A', y: 30 },
  { x: 'B', y: 80 },
  { x: 'C', y: 45 },
  { x: 'D', y: 60 },
  { x: 'E', y: 20 },
];

const accessors = {
  xAccessor: d => d.x,
  yAccessor: d => d.y,
};

function BarChart() {
  return (
    <XYChart height={300} width={500} xScale={{ type: 'band' }} yScale={{ type: 'linear' }}>
      <AnimatedAxis orientation="bottom" />
      <AnimatedAxis orientation="left" />
      <AnimatedGrid columns={false} numTicks={4} />
      <AnimatedBarSeries dataKey="Bar Series" data={data} {...accessors} />
      <Tooltip />
    </XYChart>
  );
}

Scatter Plot

This code demonstrates how to create a scatter plot using @visx/xychart. It includes animated axes, grid, and a point series with a tooltip.

import { XYChart, AnimatedAxis, AnimatedGrid, AnimatedPointSeries, Tooltip } from '@visx/xychart';

const data = [
  { x: 10, y: 20 },
  { x: 20, y: 30 },
  { x: 30, y: 40 },
  { x: 40, y: 50 },
  { x: 50, y: 60 },
];

const accessors = {
  xAccessor: d => d.x,
  yAccessor: d => d.y,
};

function ScatterPlot() {
  return (
    <XYChart height={300} width={500} xScale={{ type: 'linear' }} yScale={{ type: 'linear' }}>
      <AnimatedAxis orientation="bottom" />
      <AnimatedAxis orientation="left" />
      <AnimatedGrid columns={false} numTicks={4} />
      <AnimatedPointSeries dataKey="Point Series" data={data} {...accessors} />
      <Tooltip />
    </XYChart>
  );
}

Other packages similar to @visx/xychart

recharts

Recharts is a composable charting library built on React components. It provides a wide range of chart types and is known for its simplicity and ease of use. Compared to @visx/xychart, Recharts offers a more straightforward API but may lack some of the advanced customization options.

nivo

Nivo provides a rich set of dataviz components, built on top of D3 and React. It offers a variety of chart types and is highly customizable. Nivo is similar to @visx/xychart in terms of flexibility and customization but provides more out-of-the-box chart types and themes.

victory

Victory is a collection of composable React components for building interactive data visualizations. It is known for its modularity and ease of integration. Victory offers a balance between ease of use and customization, similar to @visx/xychart, but with a different approach to component composition.

README

@visx/xychart

Coming 🔜