Funnel graph drawing library for Vue.js.
- SVG charts
- Values, Labels, Percentages display
- Two-dimensional graph support
- Legend display
- Detailed percentage breakdown on hover
- Animated
- Solid color and gradient fill
- Horizontal and vertical charts
This is the Vue.js version of FunnelGraph.js, learn more about the library and see documentation here.
npm i vue-funnel-graph-jsAfter installing, import the VueFunnelGraph component:
import { VueFunnelGraph } from 'vue-funnel-graph-js';You can now use the custom element:
<vue-funnel-graph :width="width" :height="height" :labels="labels" :values="values" :colors="colors" :subLabels="subLabels" :direction="direction" :gradient-direction="gradientDirection" :animated="true" :display-percentage="true" ></vue-funnel-graph>The values are passed to props:
export default { name: 'app', components: { VueFunnelGraph }, data() { return { labels: ['Impressions', 'Add To Cart', 'Buy'], subLabels: ['Direct', 'Social Media', 'Ads'], values: [ [3000, 2500, 6500], [3000, 1700, 1000], [600, 200, 130] ], colors: [ ['#FFB178', '#FF78B1', '#FF3C8E'], ['#A0BBFF', '#EC77FF'], ['#A0F9FF', '#7795FF'] ], direction: 'horizontal', gradientDirection: 'horizontal', height: 300, width: 800 }; } } | Option | Description | Type | Required | Options | Default | Example |
|---|---|---|---|---|---|---|
width | Width of the funnel graph | number | Yes | 0 | 800 | |
height | Height of the funnel graph | number | Yes | 0 | 300 | |
labels | Title of each data part | array | Yes | ['Impressions', 'Add To Cart', 'Buy'] | ||
values | Numbers that the funnel chart visualizes | array | Yes | [12000, 4700, 930] | ||
colors | Colors of the graph. If a string or array with one element passed it fills the graph with a solid color, if the array contains more than one element it fill the graph with a gradient. For two-dimensional charts and array of arrays shall be passed to fill each segment with a separate gradient. The array can contain arrays and strings mixed. If a there are more segments than colors provided, up to 10 extra segments will be filled with pre-defined solid colors | array⎮string | Yes | [12000, 4700, 930] | ||
subLabels (:subLabels) | Title of each data segment | array | Yes for two-dimensional graphs | ['Direct', 'Social Media', 'Ads'] | ||
direction | Whether the chart visualization is displayed vertically or horizontally | string | No | 'vertical', 'horizontal' | 'horizontal' | |
gradientDirection (:gradient-direction) | Whether the gradient applied to the segments of the graph is displayed from top to bottom or from left to right | string | No | 'vertical', 'horizontal' | 'horizontal' | |
animated | Whether any change in graph shape will be displayed with a smooth transition | boolean | No | true, false | true | false |
displayPercentage (:display-percentage) | Whether to display the automatically calculated percentage values below the labels | boolean | No | true, false | true |