https://github.com/cannercms/victory-canner-components
A chart library for Canner, based on Victory Chart
https://github.com/cannercms/victory-canner-components
Last synced: 8 months ago
JSON representation
A chart library for Canner, based on Victory Chart
- Host: GitHub
- URL: https://github.com/cannercms/victory-canner-components
- Owner: CannerCMS
- Created: 2018-10-18T04:06:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-22T09:52:00.000Z (over 7 years ago)
- Last Synced: 2025-01-13T22:28:11.143Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://canner.github.io/victory-canner-components/
- Size: 752 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# victory-canner-components [](https://lernajs.io/) [](https://canner.github.io/victory-canner-components/)
Chart library for [Canner](https://github.com/Canner/canner), based on [Victory Chart](https://formidable.com/open-source/victory).
> IMPORTANT NOTE: you need to additionally install `victory` in your project, because these packages use victory as peerDependencies.
## Usage in [Canner](https://www.canner.io)
You have to use `` tag to use charts in Canner. [Learn more](https://www.canner.io/docs/schema-page-tags#lt-component-gt)
```jsx
```
## Common Props
All charts support common props as below
- `container (object)`: Common Props to setup the chart, [learn more VictoryChart](https://formidable.com/open-source/victory/docs/common-props/)
- `xAxis (object)`: X-Axis settings, [learn more Victory Axis](https://formidable.com/open-source/victory/docs/victory-axis)
- `yAxis (object)`: Y-Axis settings, [learn more Victory Axis](https://formidable.com/open-source/victory/docs/victory-axis)
Other than common props, every charts have additional settings for each chart, and is listed in each section below.
## Simple Charts
All charts have one props called `value`. `value` is the data that send into the chart it's format must followed by the **[standard data in victory](https://formidable.com/open-source/victory/docs/common-props/#data)**.
### Area Chart [](https://www.npmjs.com/package/@canner/victory-area)
```
npm i --save @canner/victory-area
```
#### Additional Props
- `chart (object)`: chart settings, [learn more VictoryArea](https://formidable.com/open-source/victory/docs/victory-area/#props)
### Bar Chart [](https://www.npmjs.com/package/@canner/victory-bar)
```
npm i --save @canner/victory-bar
```
#### Additional Props
- `chart (object)`: chart settings, [learn more VictoryBar](https://formidable.com/open-source/victory/docs/victory-bar/#props)
### Donut Chart [](https://www.npmjs.com/package/@canner/victory-donut)
```
npm i --save @canner/victory-donut
```
#### Additional Props
- `chart (object)`: chart settings, [learn more VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie/#props)
### Line Chart [](https://www.npmjs.com/package/@canner/victory-line)
```
npm i --save @canner/victory-line
```
#### Additional Props
- `chart (object)`: chart settings, [learn more VictoryLine](https://formidable.com/open-source/victory/docs/victory-line/#props)
### Pie Chart [](https://www.npmjs.com/package/@canner/victory-pie)
```
npm i --save @canner/victory-pie
```
#### Additional Props
- `chart (object)`: chart settings, [learn more VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie/#props)
### Scatter Chart [](https://www.npmjs.com/package/@canner/victory-scatter)
```
npm i --save @canner/victory-scatter
```
#### Additional Props
- `chart (object)`: chart settings, [learn more VictoryScatter](https://formidable.com/open-source/victory/docs/victory-scatter/#props)
## Stack Charts
Regarding to stack charts, the data in stack chart's data is like `array[array[object]]` data type. It is an array of **[standard data in victory](https://formidable.com/open-source/victory/docs/common-props/#data)**.
### Area Stack Chart [](https://www.npmjs.com/package/@canner/victory-area-stack)
```
npm i --save @canner/victory-area-stack
```
#### Additional Props
- `legend (object)`: legend settings, [learn more VictoryLegend](https://formidable.com/open-source/victory/docs/victory-legend/#props)
- `chart (object)`: chart settings, [learn more VictoryArea](https://formidable.com/open-source/victory/docs/victory-area/#props)
### Bar Stack Chart [](https://www.npmjs.com/package/@canner/victory-bar-stack)
```
npm i --save @canner/victory-bar-stack
```
#### Additional Props
- `legend (object)`: legend settings, [learn more VictoryLegend](https://formidable.com/open-source/victory/docs/victory-legend/#props)
- `chart (object)`: chart settings, [learn more VictoryBar](https://formidable.com/open-source/victory/docs/victory-bar/#props)
## License
MIT