Well, data visualisation is a hot topic. In my day to day business I work a lot with WordPress and Vue.js. I can’t say how much I 💘 Vue.js and how much cleaner my workflow and code is, because of it.

Building large WordPress sites can be tricky, especially if you have a lot of interactions going on. But with Vue components, you can separate everything super clean.

From time to time, you may want to include some cool charts to enchant your articles with nice data and it’s pretty easy with vue and chart.js.

Prerequisites

I am building most projects with the bedrock stack and sage as a starting theme. However you can actually implement it in every other theme, too.

However I am not going into detail how the build system works. I am using the sage webpack config, just a bit modified. If you’re using a different build system, you may have to change some of the steps and code examples.

Advanced Custom Fields are not essential to this, but they provide a super easy to use custom fields.

Custom Fields

So we first need to create some custom fields, to feed them with data.

We create a repeater field for the datasets, which contain subfields. One field to toggle the legend and one field for the x-axis labels.

The subfields of the Dataset field are pretty straight forward. We have a label, color and the actual data.

Then we can fill our component with some sample data.