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

victory-chart

Package Overview
Dependencies
Maintainers
8
Versions
288
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

victory-chart

Chart Component for Victory

  • 35.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
284K
increased by19.28%
Maintainers
8
Weekly downloads
 
Created

What is victory-chart?

Victory-chart is a composable charting library for React. It provides a set of modular charting components that can be combined to create complex data visualizations. The library is built on top of D3.js and offers a variety of chart types, including bar charts, line charts, pie charts, and more.

What are victory-chart's main functionalities?

Line Chart

This code demonstrates how to create a simple line chart using Victory-chart. The VictoryLine component is used to render the line chart within a VictoryChart container.

import React from 'react';
import { VictoryChart, VictoryLine } from 'victory';

const data = [
  { x: 1, y: 2 },
  { x: 2, y: 3 },
  { x: 3, y: 5 },
  { x: 4, y: 4 },
  { x: 5, y: 7 }
];

const LineChart = () => (
  <VictoryChart>
    <VictoryLine data={data} />
  </VictoryChart>
);

export default LineChart;

Bar Chart

This code demonstrates how to create a bar chart using Victory-chart. The VictoryBar component is used to render the bar chart within a VictoryChart container.

import React from 'react';
import { VictoryChart, VictoryBar } from 'victory';

const data = [
  { x: 'A', y: 2 },
  { x: 'B', y: 3 },
  { x: 'C', y: 5 },
  { x: 'D', y: 4 },
  { x: 'E', y: 7 }
];

const BarChart = () => (
  <VictoryChart>
    <VictoryBar data={data} />
  </VictoryChart>
);

export default BarChart;

Pie Chart

This code demonstrates how to create a pie chart using Victory-chart. The VictoryPie component is used to render the pie chart.

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

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

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

export default PieChart;

Other packages similar to victory-chart

Keywords

FAQs

Package last updated on 25 Sep 2020

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