@visa/charts-angular
TypeScript icon, indicating that this package has built-in type declarations

4.3.0 • Public • Published

@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>

Readme

Keywords

none

Package Sidebar

Install

npm i @visa/charts-angular

Weekly Downloads

30

Version

4.3.0

License

SEE LICENCE IN LICENSE

Unpacked Size

412 kB

Total Files

17

Last publish

Collaborators

  • david.kutas.npm
  • chris-demartini