@visa/charts-react

This package bundles visa chart components web components and exports them as react components. We leverage stencil's react bindings in the creation of @visa/charts-react.

---

Installation Steps

• Using npm

  $ npm i @visa/charts-react
  

• Using yarn

  $ yarn add @visa/charts-react
  

---

Components with Ready status in this bundle

• @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, DataTable as VisaChartsDataTable } from '@visa/charts-react/dist/components/visa-charts';

<BarChart
  mainTitle={'BarChart'}
  subTitle={'Vertical (default) bar chart example'}
  data={state.data}
  ordinalAccessor={'month'}
  valueAccessor={'value'}
  height={400}
  width={600}
/>;