@visa/charts-angular

An angular 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 visaChartsAngular from 'https://cdn.skypack.dev/@visa/charts-angular';
</script>

README

@visa/charts-angular

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

Installation Steps

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

Components with Ready status in this bundle


# Use VCC as angular components

Step 1: Install yarn add @visa/charts-angular

Step 2: Use component as any other Angular component

// in component.ts

public props = {
    ordinalAccessor: 'month',
    valueAccessor: 'value',
    data: [
        {'month': 'Apr 17', 'value': 1407543},
        {'month': 'May 17', 'value': 6042320},
        {'month': 'Jun 17', 'value': 3234002},
        {'month': 'Jul 17', 'value': 2221233},
        {'month': 'Aug 17', 'value': 4476321},
        {'month': 'Sep 17', 'value': 3789221},
        {'month': 'Oct 17', 'value': 6543535},
        {'month': 'Nov 17', 'value': 7457432},
        {'month': 'Dec 17', 'value': 2636346},
        {'month': 'Jan 18', 'value': 2340000},
        {'month': 'Feb 18', 'value': 3202340},
        {'month': 'Mar 18', 'value': 8503536}
    ]
}
<!-- in component.html -->
<bar-chart [ordinalAccessor]="props.ordinalAccessor" [valueAccessor]="props.valueAccessor" [data]="props.data">
</bar-chart>