@visa/charts-vue
v2.0.1
Published
A vue wrapper built with Stencil's bindings for the visa-charts-lib stencil.js based component library.
Downloads
16
Readme
@visa/charts-vue
This package bundles visa chart components web components and exports them as vue components. We leverage stencil's vue bindings in the creation of @visa/charts-vue.
Installation Steps
- Using npm
$ npm i @visa/charts-vue
- Using yarn
$ yarn add @visa/charts-vue
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 vue components
Step 1: Install yarn add @visa/charts-vue
Step 2: Use component as any other Vue component
// in App.vue
import { BarChart, VisaChartsDataTable } from '@visa/charts-vue';
<BarChart
mainTitle="BarChart"
subTitle="Vertical (default) bar chart example"
:data="data"
ordinalAccessor="month"
valueAccessor="value"
:height="400"
:width="600"
/>;
// OR, use as a plugin
// in main.js
import { ComponentLibrary } from '@visa/charts-vue';
createApp(App).use(ComponentLibrary).mount('#app');
// in App.vue
<bar-chart
mainTitle="BarChart"
subTitle="Vertical (default) bar chart example"
:data="data"
ordinalAccessor="month"
valueAccessor="value"
:height="400"
:width="600"
/>;