### Install VueFunnelGraph.js using NPM

Source: https://github.com/greghub/vue-funnel-graph-js/blob/master/README.md

This snippet shows how to install the vue-funnel-graph-js library using npm, the Node Package Manager. This is the standard method for adding JavaScript libraries to a Vue.js project.

```bash
npm i vue-funnel-graph-js
```

--------------------------------

### Include VueFunnelGraph.js via UNPKG

Source: https://github.com/greghub/vue-funnel-graph-js/blob/master/README.md

This HTML snippet demonstrates how to include the VueFunnelGraph.js library directly in an HTML file using the UNPKG CDN. This method is useful for quick testing or when not using a module bundler.

```html
<script src="https://unpkg.com/vue-funnel-graph-js"></script>
```

--------------------------------

### Include VueFunnelGraph.js via CDN

Source: https://github.com/greghub/vue-funnel-graph-js/blob/master/README.md

This HTML snippet shows how to include the VueFunnelGraph.js library in an HTML file using a CDN link. This approach allows direct use of the library in a browser environment without a build process.

```html
<script src="https://cdn.jsdelivr.net/npm/vue-funnel-graph-js/dist/vue-funnel.min.js"></script>
```

--------------------------------

### Vue.js Data Configuration for Funnel Graph

Source: https://github.com/greghub/vue-funnel-graph-js/blob/master/README.md

This JavaScript snippet defines the data properties for a Vue component that uses VueFunnelGraph. It includes sample data for labels, subLabels, values, and colors, along with configuration for chart direction and dimensions.

```javascript
export default {
  name: 'app',
  components: {
      VueFunnelGraph
  },
  data() {
      return {
          labels: ['Impressions', 'Add To Cart', 'Buy'],
          subLabels: ['Direct', 'Social Media', 'Ads'],
          values: [
          // with the given Labels and SubLabels here's what the values represent:
          // 
          // Direct, Social, Ads  
          //    |      |     |  
          //    v      v     v
              [3000, 2500, 6500], // Segments of "Impressions" from top to bottom
              [3000, 1700, 1000], // Segments of "Add To Cart"
              [600,  200,  130]   // Segments of "Buy"
          ],
          colors: [
              ['#FFB178', '#FF3C8E'], // color set for "Impressions" segment
              ['#A0BBFF', '#EC77FF'], // color set for "Add To Cart" segment
              ['#A0F9FF', '#7795FF']  // color set for "Buy" segment
          ],
          direction: 'horizontal',
          gradientDirection: 'horizontal',
          height: 300,
          width: 800
      };
  }
}
```

--------------------------------

### Import VueFunnelGraph Component in Vue.js

Source: https://github.com/greghub/vue-funnel-graph-js/blob/master/README.md

This JavaScript snippet illustrates how to import the VueFunnelGraph component into your Vue.js application. This import statement is necessary before you can use the component in your templates.

```javascript
import { VueFunnelGraph } from 'vue-funnel-graph-js';
```

--------------------------------

### Use VueFunnelGraph Component in Vue Template

Source: https://github.com/greghub/vue-funnel-graph-js/blob/master/README.md

This Vue template snippet shows how to integrate the VueFunnelGraph component into a Vue application. It demonstrates passing various props such as width, height, labels, values, and colors to customize the funnel graph.

```vue
<vue-funnel-graph :width="width" :height="height" :labels="labels"
              :values="values" :colors="colors" :sub-labels="subLabels" :direction="direction"
              :gradient-direction="gradientDirection"
              :animated="true" :display-percentage="true"
></vue-funnel-graph>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.