Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

victory-pie

Package Overview
Dependencies
Maintainers
20
Versions
210
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

victory-pie

Pie Component for Victory

  • 37.3.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
185K
decreased by-32.94%
Maintainers
20
Weekly downloads
 
Created

What is victory-pie?

The victory-pie npm package is a part of the Victory library, which provides a set of modular charting components for React. Specifically, victory-pie is used to create pie and donut charts with a variety of customizable options.

What are victory-pie's main functionalities?

Basic Pie Chart

This code demonstrates how to create a basic pie chart using the victory-pie package. The data prop is used to pass the data to the VictoryPie component.

import React from 'react';
import { VictoryPie } from 'victory-pie';

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const BasicPieChart = () => (
  <VictoryPie data={data} />
);

export default BasicPieChart;

Donut Chart

This code demonstrates how to create a donut chart by setting the innerRadius prop on the VictoryPie component.

import React from 'react';
import { VictoryPie } from 'victory-pie';

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const DonutChart = () => (
  <VictoryPie data={data} innerRadius={100} />
);

export default DonutChart;

Custom Colors

This code demonstrates how to customize the colors of the pie chart slices using the colorScale prop.

import React from 'react';
import { VictoryPie } from 'victory-pie';

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const CustomColorsPieChart = () => (
  <VictoryPie data={data} colorScale={['tomato', 'orange', 'gold']} />
);

export default CustomColorsPieChart;

Labels

This code demonstrates how to add custom labels to the pie chart slices using the labels prop.

import React from 'react';
import { VictoryPie } from 'victory-pie';

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const LabeledPieChart = () => (
  <VictoryPie data={data} labels={({ datum }) => `${datum.x}: ${datum.y}%`} />
);

export default LabeledPieChart;

Other packages similar to victory-pie

Keywords

FAQs

Package last updated on 12 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc