victory-canner-components

Chart library for Canner, based on Victory Chart.

IMPORTANT NOTE: you need to additionally install victory in your project, because these packages use victory as peerDependencies.

Usage in Canner

You have to use <component/> tag to use charts in Canner. Learn more

<component
  packageName="@canner/victory-area"
  graphql="<your graphql schema>"
  {...custom props}
  />

Common Props

All charts support common props as below

• container (object): Common Props to setup the chart, learn more VictoryChart

• xAxis (object): X-Axis settings, learn more Victory Axis

• yAxis (object): Y-Axis settings, learn more 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.

Area Chart

npm i --save @canner/victory-area

Additional Props

• chart (object): chart settings, learn more VictoryArea

Bar Chart

npm i --save @canner/victory-bar

Additional Props

• chart (object): chart settings, learn more VictoryBar

Donut Chart

npm i --save @canner/victory-donut

Additional Props

• chart (object): chart settings, learn more VictoryPie

Line Chart

npm i --save @canner/victory-line

Additional Props

• chart (object): chart settings, learn more VictoryLine

Pie Chart

npm i --save @canner/victory-pie

Additional Props

• chart (object): chart settings, learn more VictoryPie

Scatter Chart

npm i --save @canner/victory-scatter

Additional Props

• chart (object): chart settings, learn more VictoryScatter

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.

Area Stack Chart

npm i --save @canner/victory-area-stack

Additional Props

• legend (object): legend settings, learn more VictoryLegend

• chart (object): chart settings, learn more VictoryArea

Bar Stack Chart

npm i --save @canner/victory-bar-stack

Additional Props

• legend (object): legend settings, learn more VictoryLegend

• chart (object): chart settings, learn more VictoryBar

License

MIT