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.
- Using npm
$ npm i @visa/charts-angular - Using yarn
$ yarn add @visa/charts-angular
- @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 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>