This package bundles visa chart components web components and exports them as react components. We leveage stencil's react bindings in the creation of @visa/charts-react.
- Using npm
$ npm i @visa/charts-react - Using yarn
$ yarn add @visa/charts-react
- @visa/bar-chart
- @visa/clustered-bar-chart
- @visa/stacked-bar-chart
- @visa/line-chart
- @visa/pie-chart
- @visa/scatter-plot
- @visa/heat-map
- @visa/circle-packing
- @visa/parallel-plot
- @visa/dumbbell-plot
- @visa/world-map
- @visa/alluvial-diagram
- @visa/visa-charts-data-table
- @visa/keyboard-instructions
# Use VCC as react components
Step 1: Install yarn add @visa/charts-react
Step 2: Use component as any other React component
import { BarChart, VisaChartsDataTable } from '@visa/charts-react';
// OR, depending on your webpack or bundling approach you may need to pull each component directly
import { BarChart } from '@visa/charts-react/dist/components/bar-chart';
import { DataTable as VisaChartsDataTable } from '@visa/charts-react/dist/components/visa-charts-data-table';
<BarChart
mainTitle={'BarChart'}
subTitle={'Vertical (default) bar chart example'}
data={state.data}
ordinalAccessor={'month'}
valueAccessor={'value'}
height={400}
width={600}
/>;