victory-chart
Version:
Chart Component for Victory
304 lines (273 loc) • 6.32 kB
Markdown
VictoryArea
=============
Draw area charts with [React](https://github.com/facebook/react). VictoryArea is a composable component, so it doesn't include axes. Add VictoryArea as a child of VictoryChart for a complete chart.
## Features
### Props are Optional
VictoryArea is written to be highly configurable, but it also includes a set of sensible defaults and fallbacks. If no props are provided, VictoryArea will plot the identity function.
``` playground
<VictoryArea/>
```
To display your own data, just pass in an array of data objects, or an array of arrays via the data prop.
```playground
<VictoryArea
data={[
{x: 1, y: 1},
{x: 2, y: 2},
{x: 3, y: 3},
{x: 4, y: 1},
{x: 5, y: 3},
{x: 6, y: 4},
{x: 7, y: 2}
]}
/>
```
VictoryArea comes with data accessor props to make passing in data much more flexible.
assign a property to x or y, or process data on the fly.
```playground
<VictoryArea
data={[
{amount: 1, yield: 1, error: 0.5},
{amount: 2, yield: 2, error: 1.1},
{amount: 3, yield: 3, error: 0},
{amount: 4, yield: 2, error: 0.1},
{amount: 5, yield: 1, error: 1.5}
]}
x={"amount"}
y={(data) => (data.yield + data.error)}
/>
```
Wrap several VictoryArea components in the VictoryGroup wrapper to create a set of overlapping areas. The areas are automatically colored separately for each data series.
```playground
<VictoryGroup
height={500}
style={{data: {opacity: 0.3}}}
>
<VictoryArea
data={[
{x: 1, y: 1},
{x: 2, y: 2},
{x: 3, y: 3}
]}
/>
<VictoryArea
data={[
{x: 1, y: 2},
{x: 2, y: 1},
{x: 3, y: 1}
]}
/>
<VictoryArea
data={[
{x: 1, y: 3},
{x: 2, y: 4},
{x: 3, y: 2}
]}
/>
</VictoryGroup>
```
Wrap several VictoryArea components in the VictoryGroup wrapper to create a stacked layout. The y domain is automatically set to account for the cumulative maximum of the data:
```playground
<VictoryStack height={500}>
<VictoryArea
data={[
{x: 1, y: 1},
{x: 2, y: 2},
{x: 3, y: 3}
]}
/>
<VictoryArea
data={[
{x: 1, y: 2},
{x: 2, y: 1},
{x: 3, y: 1}
]}
/>
<VictoryArea
data={[
{x: 1, y: 3},
{x: 2, y: 4},
{x: 3, y: 2}
]}
/>
</VictoryStack>
```
### Flexible and Configurable
The sensible defaults VictoryArea provides makes it easy to get started, but everything can be overridden, and configured to suit your needs:
```playground
<VictoryStack
height={800}
style={{ data: {
strokeDasharray: "5,5",
strokeWidth: 2,
fillOpacity: 0.4
}}}
>
<VictoryArea
style={{ data: {
fill: "tomato", stroke: "tomato"
}}}
data={[
{x: 1, y: 1},
{x: 2, y: 2},
{x: 3, y: 3}
]}
/>
<VictoryArea
style={{ data: {
fill: "orange", stroke: "orange"
}}}
data={[
{x: 1, y: 2},
{x: 2, y: 1},
{x: 3, y: 1}
]}
/>
<VictoryArea
style={{ data: {
fill: "gold", stroke: "gold"
}}}
data={[
{x: 1, y: 3},
{x: 2, y: 4},
{x: 3, y: 2}
]}
/>
</VictoryStack>
```
### Data Markers
To create markers and labels for individual data points along an area, just compose VictoryArea with VictoryScatter.
```playground
<svg width={500} height={500}>
<VictoryArea
width={500}
height={300}
standalone={false}
style={{
data: {
fill: "teal",
opacity: 0.3
}
}}
data={[
{x: 0, y: 0},
{x: 1, y: 3},
{x: 2, y: 2},
{x: 3, y: 4},
{x: 4, y: 3},
{x: 5, y: 5}
]}
/>
<VictoryScatter
width={500}
height={300}
standalone={false}
style={{
data: {
fill: "teal",
},
labels: {
fill: "teal",
fontSize: 14,
padding: 12
}
}}
size={4}
labels={[
"a", "b", "c", "d", "e", "f"
]}
data={[
{x: 0, y: 0},
{x: 1, y: 3},
{x: 2, y: 2},
{x: 3, y: 4},
{x: 4, y: 3},
{x: 5, y: 5}
]}
/>
</svg>
```
### Events
Use the `events` prop to attach arbitrary event handlers to data, labels, or the containing svg.
Event handlers on data and labels components are called with the event object, the props
corresponding to that component, and the index of that component. Objects returned from
event handlers are stored by index and namespace in state, and applied as props to
appropriate child components. In the case of VictoryArea, the `data` name space applies
to the rendered area, and the `labels` namespace applies to the series label.
```playground
<VictoryArea
height={400}
style={{
data: {fill: "gold"},
labels: {fill: "none"}
}}
label={"AREA"}
data={[
{x: 1, y: 1},
{x: 2, y: 2},
{x: 3, y: 1},
{x: 4, y: 3},
{x: 5, y: 2},
{x: 6, y: 5}
]}
events={{ data: {
onClick: (evt, props) => {
return props.style.fill === "gold" ?
{
data: {style: {fill: "orange"}},
labels: {style: {fill: "black"}}
} :
{data: null, labels: null}
}
}}}
/>
```
### Animating
VictoryArea animates with the animation module provided in [VictoryCore](http://github.com/formidablelabs/victory-core) as data changes when an `animate` prop is provided.
```playground_norender
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.getData(),
};
}
getData() {
return [1, 2, 3, 4, 5].map((index) => {
return [
{x: "apples", y: Math.random()},
{x: "oranges", y: Math.random()},
{x: "bananas", y: Math.random()},
{x: "peaches", y: Math.random()},
{x: "pears", y: Math.random()}
];
});
}
componentDidMount() {
setInterval(() => {
this.setState({
data: this.getData(),
});
}, 2000);
}
render() {
return (
<VictoryStack height={600}
animate={{duration: 2000}}
colorScale={[
"black", "cornflowerblue",
"tomato", "orange", "gold"
]}
>
{this.state.data.map((data, i) => {
return (
<VictoryArea key={i}
data={data}
/>
);
})}
</VictoryStack>
);
}
}
ReactDOM.render(<App/>, mountNode);
```