Add Data Visualization to Our Vue App with the JSCharting-Vue Library

Photo by Campaign Creators on Unsplash

We can use the JSCharting-Vue library to add data visualization to our Vue app.

In this article, we’ll look at how to use the library to add some charts to our app.

Installation

We can install the library by running:

npm i -D jscharting-vue

Usage

Once we installed the library, we can use it by writing:

<template>
  <div id="app">
    <JSCharting :options="options" class="columnChart"></JSCharting>
  </div>
</template>
<script>
import JSCharting from "jscharting-vue";
export default {
  data() {
    return {
      name: "columnChart",
      options: {
        type: "horizontal column",
        series: [
          {
            points: [{ x: "A", y: 50 }, { x: "B", y: 30 }, { x: "C", y: 50 }]
          }
        ]
      }
    };
  },
  components: {
    JSCharting
  }
};
</script>

We import the component and register it.

Then we add the data that we want to display in the options object.

The series array has an object with the points array.