Easily Bind A Chart To The Data Stored In Vue.js Components

v-chart plugin is designed to allow Vue.js developers to integrate fully customizable and interactive charts into their applications. The plugin was built from the JavaScript library D3.js to process documents based on data. By linking data from your components, you can create complex charts and graphs that respond to changes in your application. Vue.js lifecycle events will trigger schemas to update and maintain the bidirectional link between your schemas and your data. By adding a status manager (such as Vuex), you can also persist in status across an entire app.

The V Chart Plugin was built using the Vue.js plugin architecture. This will allow the schema to be a first-class native to your Vue.js application. Combining multiple charts allows you to create complex dashboards and enables deeper insights into your data. All aspects of charts can be configured to allow full customization of your charts along with the ability to design SVG elements using the classes and identifiers generated for each individual artboard element.

By adding additional charts to the import folder and importing them into v-chart-plugin.js, you can include any custom charts for use with Vue.js. With the JavaScript API, you can bind to methods defined in the API and create a reusable component that can persist across your application.

jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

How to make use of it:

Install and download:

$ npm install v-chart-plugin --save

1. These instructions assume that you are using the Vue CLI to create your form. Include the plugin in main.js:

import Chart from 'v-chart-plugin'


2. Within your component, you will need to include an object with title, delimiter, width, height, and data points to pass to the component. The data can be passed as an array or array of objects:

export default {
  name: 'example',
  data () {
    return {
      chartData: {
        chartType: 'barChart',
        selector: 'chart',
        title: 'Important Data',
        width: 300,
        height: 200,
        data: [120, 140, 70, 90, 110, 65, 210]      

3. If it is passed as an array of elements, you will need to specify which attribute should be used as the measure/dimension:

export default {
  name: 'example',
  data () {
    return {
      chartData: {
        chartType: "vBarChart",
        selector: "chart",
        title: "Important Data",
        width: 400,
        height: 200,
        metric: 'count', // for two or more metrics pass as an array ['count', 'pyCount']
        data: [
          {'count': 120,
           'fruit': 'apples'}, 
          {'count': 250,
           'fruit': 'oranges'}


customizable vue.js charts, v-chart Plugin/Github

See Demo And Download

Official Website(ignoreintuition): Click Here

This superior jQuery/javascript plugin is developed by ignoreintuition. For extra advanced usage, please go to the official website.

Related Posts


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…


[Game] An Open-Source Music Player for Angular

game-music-player is an open-source music player that uses the latest popular web technologies: Angular, Ionic, Firebase, etc. It would be great if this project could grow into…


(base64) Pure JavaScript Image Cropping Functionality To Your Web | js-cropper

js-cropper is a quick and easy way to add image cropping functionality to your web application without dependencies. Features Promise API Supports Touch Events Multiple callbacks No…