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.
x and y has the x and y coordinates.
We set the chart type with the type property to horizontal column so it’ll be displayed with the x-axis as the vertical axis and y-axis as the horizontal axis.
The name is the class name for the chart container.
So we can use it to change the styles:
<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>
<style>
.columnChart {
height: 300px;
}
</style>
We can also set the className prop to set the container div element for the chart.
The callback prop accepts a function that’s called when the chart finishes rendering.
mutatable is a boolean prop to let us set the chart options by calling chart.options .
Updating Charts
To update our chart, we can update the this.options object:
<template>
<div id="app">
<JSCharting :options="options" class="columnChart"></JSCharting>
<button v-on:click="updateData">Update Data</button>
</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 }]
}
]
}
};
},
methods: {
updateData() {
this.options = {
series: [
{
name: "Purchases",
points: [{ x: "A", y: 100 }, { x: "B", y: 230 }, { x: "C", y: 150 }]
}
]
};
}
},
components: {
JSCharting
}
};
</script>
<style>
.columnChart {
height: 300px;
}
</style>
We set the series.points property to update the data.
The new data will be rendered automatically.
Also, we can do the update directly on the chart:
<template>
<div id="app">
<JSCharting ref="chart" :options="options" class="columnChart"></JSCharting>
<button v-on:click="updateData">Update Data</button>
</div>
</template>
<script>
import JSCharting from "jscharting-vue";
export default {
data() {
return {
name: "columnChart",
options: {
type: "horizontal column",
series: [
{
name: "Purchases",
points: [{ x: "A", y: 50 }, { x: "B", y: 30 }, { x: "C", y: 50 }]
}
]
}
};
},
methods: {
updateData() {
const chart = this.$refs.chart.instance;
if (chart) {
chart.series("Purchases").options({
points: [{ x: "A", y: 150 }, { x: "B", y: 130 }, { x: "C", y: 150 }]
});
}
}
},
components: {
JSCharting
}
};
</script>
<style>
.columnChart {
height: 300px;
}
</style>
We assign a ref to the JSCharting component.
Then we get the ref in the updateData method.
And then we get the series with the series method.
Then we call the options method to set the points for the chart.
Conclusion
We add data visualization to our Vue app with the JSCharting-Vue library.
