CODE
Categories
Jamstack
Series
Getting Started

Charting it Out

Authors
Tags
Nuxt.js
Markdown
Charts

Following on from adding KaTeX math support and exploring the capabilities of Markdown in my previous post, I realised a big omission from the tools I might like to employ is charts. I've worked with charts before using a number of different libraries. My favourite, simply because it appears to be the most powerful and flexible, is D3.js. Unfortunately, because it is so powerful and flexible, it is not easy to drop in and use straight away - I would need to do a lot of custom configuration. So, as a simpler measure for the time being, I've opted to install the beautiful little Chart.js library.

Installation:

yarn add vue-chartjs chart.js@2.9.4

Component:

BarChart.vue
<script>
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  props: [
    'labels',
    'datasets'
  ],
  mounted () {
    this.renderChart({
      labels: this.labels,
      datasets: this.datasets
    })
  }
}
</script>

Usage:

<bar-chart :labels='[`One`, `Two`, `Three`]' :datasets='[{ label: `Data`, backgroundColor: [`#EF4444`, `#3B82F6`, `#10B981`], data: [40, 20, 12] }]'></bar-chart>

That's a simple, drop-in and start using solution to a problem I don't need to give a lot of consideration just yet.

The library is lacking in some advanced features, but many of these can be added through plugins - I'm just not really sure how to go about that using the Vue package yet. I also think I could clean up the manner in which I pass data to the component - it could be simplified, more intuitive. Chart.js may need the data in this format, but I can simplify the props required for end users; one big thing I may add is a series of default colours that are selected automatically. But for now, this will do.

Using this library, I now have access to the following charts, and could expand a little on this list in the future:

Bar Chart

Horizontal Bar Chart

Line Chart

Pie Chart

Doughnut Chart

Polar Area Chart

Radar Chart

Scatter Chart

Bubble Chart

Update (2021-05-28): I've now packaged these charts into my own custom library, Vue Playfair.