@visa/charts-react

A react wrapper built with Stencil's bindings for the visa-charts-lib stencil.js based component library.

Usage no npm install needed!

<script type="module">
  import visaChartsReact from 'https://cdn.skypack.dev/@visa/charts-react';
</script>

README

@visa/charts-react

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.

Installation Steps

  • Using npm
    $ npm i @visa/charts-react
  • Using yarn
    $ yarn add @visa/charts-react

Components with Ready status in this bundle

# 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}
/>;