README
victory-composed
Ready-made composed Victory Components!
Getting Started
victory-composed
is a set of composed, pre-styled Victory components that can be used to display rich, interactive charts. Our theming system not only supports style based theming, but behavioral/compositional theming as well.
Add
victory-composed
to your projectnpm install victory-composed --save
For React Native, you'll need victory-native
and react-native-svg
:
npm install victory-native victory-composed react-native-svg --save
react-native link react-native-svg
Add your first
victory-composed
component:import React, { Component } from 'react'; import { render } from 'react-dom'; import { VictoryLineChart } from 'victory-composed'; class MyLineChart extends Component { render() { return ( <VictoryLineChart /> ); } } render(<MyLineChart />, document.getElementById('app'));
Explore the API below and out the various possible components and configurations and their themes!
API Documentation
Common Props
The following is a list of common props shared by each chart, with the exception of VictoryPieChart where noted:
oneOfType(shape({ x: arrayOf(string), y: arrayOf(string) }), arrayOf(string))
categories The categories prop specifies how categorical data for a chart should be ordered. This prop should be given as an array of string values, or an object with these arrays of values specified for x and y. If this prop is not set, categorical data will be plotted in the order it was given in the data array.
Not applicable to VictoryPieChart
Examples: ["dogs", "cats", "mice"], { x: ["dogs","cats"], y: ["mice","birds"]}
--
oneOfType(shape({ x: arrayOf(number), y: arrayOf(number) }), arrayOf(number))
domain The domain prop describes the range of values your chart will include. This prop can be given as a array of the minimum and maximum expected values for your chart, or as an object that specifies separate arrays for x and y. If this prop is not provided, a domain will be calculated from data, or other available information.
Not applicable to VictoryPieChart
Examples: [-1, 1], {x: [0, 100], y: [0, 1]}
--
oneOfType(shape({ x: number, y: number }), number))
domainPadding The domainPadding prop specifies a number of pixels of padding to add to the beginning and end of a domain. This prop is useful for explicitly spacing ticks farther from the origin to prevent crowding. This prop should be given as an object with numbers specified for x and y.
Not applicable to VictoryPieChart
Examples: 20, { x: 5, y: 10 }
--
number
height The height props specifies the height of the svg viewBox of the chart container. This value should be given as a number of pixels.
--
string
subtitle The subtitle for your chart. This value should be a string.
--
object
theme This prop specifies which theme to use for your chart. See the themes section below for available themes and how to add them.
Example Themes.simple
--
string
title The title for your chart. This value should be a string.
--
number
width The width props specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.
--
object
xAxis This prop specifies a set of props to pass to the x axis. Valid props can be found here: VictoryAxis
Not applicable to VictoryPieChart
Example { name: "test" }
--
object
yAxis This prop specifies a set of props to pass to the y axis. Valid props can be found here: VictoryAxis
Not applicable to VictoryPieChart
Example { scale: "time" }
VictoryAreaChart
--
string
interpolation The interpolation prop determines how data points should be connected when plotting a line. The following values are valid:
"basis", "basisClosed", "basisOpen", "bundle", "cardinal", "cardinalClosed", "cardinalOpen", "catmullRom", "catmullRomClosed", "catmullRomOpen", "linear", "linearClosed", "monotoneX", "monotoneY", "natural", "radial", "step", "stepAfter", "stepBefore"
--
arrayOf(object)
series The series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found here: VictoryArea
The series child object shape is as follows:
{
data: oneOfType(array, object),
samples: number,
style: object,
x: oneOfType(string, func),
y: oneOfType(string, func)
}
Example [{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]
--
bool
stacked The stacked prop is a boolean value that determines whether to stack your area chart series.
VictoryBarChart
--
bool
horizontal The horizontal prop is a boolean value that determines whether to display your bar chart series horizontally.
--
func
labels The labels prop defines labels that will appear above each bar in your bar chart. This prop should be given as a function of data.
Example (datum) => datum.y
--
number
offset The offset prop on VictoryGroup controls the spacing between each series of bars in a group.
--
arrayOf(object)
series The series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found here: VictoryBar
The series child object shape is as follows:
{
data: oneOfType(array, object),
style: object,
x: oneOfType(string, func),
y: oneOfType(string, func)
}
Example [{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]
--
bool
stacked The stacked prop is a boolean value that determines whether to stack your bar chart series.
VictoryLineChart
string
interpolation The interpolation prop determines how data points should be connected when plotting a line. The following values are valid:
"basis", "basisClosed", "basisOpen", "bundle", "cardinal", "cardinalClosed", "cardinalOpen", "catmullRom", "catmullRomClosed", "catmullRomOpen", "linear", "linearClosed", "monotoneX", "monotoneY", "natural", "radial", "step", "stepAfter", "stepBefore"
--
arrayOf(object)
series The series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found here: VictoryLine
The series child object shape is as follows:
{
data: oneOfType(array, object),
samples: number,
style: object,
x: oneOfType(string, func),
y: oneOfType(string, func)
}
Example [{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]
VictoryScatterChart
func
labels The labels prop defines labels that will appear above each bar in your bar chart. This prop should be given as a function of data.
Example (datum) => datum.y
--
arrayOf(object)
series The series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found here: VictoryScatter
The series child object shape is as follows:
{
bubbleProperty: string,
data: oneOfType(array, object),
samples: number,
size: number,
symbol: oneOfType(string, func),
style: object,
x: oneOfType(string, func),
y: oneOfType(string, func)
}
Example [{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]
--
oneOfType(number, func)
size The size prop determines how to scale each data point
Example 3
--
oneOfType(string, func)
symbol The symbol prop determines which symbol should be drawn to represent data points.
Valid string values: "circle", "diamond", "plus", "square", "star", "triangleDown", "triangleUp"
Example "circle"
VictoryPieChart
number
cornerRadius Set the cornerRadius for every dataComponent (Slice by default) within VictoryPie
number
endAngle The overall end angle of the pie in degrees. This prop is used in conjunction with startAngle to create a pie that spans only a segment of a circle.
number
innerRadius When creating a donut chart, this prop determines the number of pixels between the center of the chart and the inner edge of a donut. When this prop is set to zero a regular pie chart is rendered.
oneOfType(arrayOf(string), func)
labels The labels prop defines labels that will appear above each bar in your bar chart. This prop should be given as a function of data or an array of strings.
Example (datum) => datum.y
--
number
padAngle The padAngle prop determines the amount of separation between adjacent data slices in number of degrees
--
number
startAngle The overall start angle of the pie in degrees. This prop is used in conjunction with endAngle to create a pie that spans only a segment of a circle.
Themes
victory-composed
has a set of beautiful preset themes ready to go. We default to the simple
theme by default, but if you want to try out the whole gang, here is how:
import { VictoryLineChart, Themes } from "victory-composed";
class MyChart extends Component {
render() {
return (
<VictoryLineChart theme={Themes.dark} />
)
}
}
Right now we have 4 themes you can choose from:
bright
- A bright, fun theme.
simple
- A simple, yet elegant theme.
dark
- Uh oh who turned the lights out. A dark theme for your charts.
danceparty
- Use this one carefully. You might have too much fun.
Keep your eyes peeled, there are more themes on the way!
Development
# Run the demo app server
$ npm start
# Open the demo app
$ open http://localhost:3000
# Run tests
$ npm test
For more on the development environment, see DEVELOPMENT in the project builder archetype.
Contributing
Please review our Code of Conduct before contributing.
For a detailed contribution guide, please see CONTRIBUTING in the project builder archetype.
IMPORTANT
This project is in a pre-release state. We're hard at work fixing bugs and improving the API. Be prepared for breaking changes!