Charts in Vue3

Hello 👋 !

Today I want to talk about charts, more specifically charts in Vue 3.

Recently I had to add some charts to my latest project so I had to find a good library that will allow me to do this easily & fast.

I already used D3 multiple times and considered an industry-standard, but I wanted something more simple for the start that could still offer me some customization if I want to do that in the future.

After some research this were my top 3 candidates:

• D3
• ApexCharts
• Chart.js

The issue I had with ApexCharts & Chart.js was that you need to use a library that is a wrapper for the core library plus the configuration for the charts was cumbersome and I had problems trying to do any kind of customization.

I was expecting to find a library like Recharts where you compose components to write your chart and the rendering part is handled by the framework, in my case by Vue, but I couldn’t find it.

This made me choose D3. The problem here was that I had to write a lot of code to get simple charts so I decided to write a new chart library for Vue 3.

Hello, Vue3-Charts

The library is called Vue3-Charts and it is build with 3 core concepts in mind:

• 💡 Intuitive
• 🔌 Extensible
• 📦 Extremely easy to use

The core idea is: If you want a simple chart, the library should be very intuitive and easy to use but if you need more complicated layers and customization the library should provide that too.

To do that the library is build with this in mind and everything is a layer or a widget.

The library comes with some built-in layers (Line, Bar, Area, etc…) but you can easily write your own layers using the power of Vue3 composition API. Check this example in the documentation.

Here is a simple responsive LineChart:

<template>
  <Responsive class="w-full">
    <template #main="{ width }">
      <Chart :size="{ width, height: 420 }" :data="data">
        <template #layers>
          <Line :dataKeys="['name', 'pl']" />
        </template>
      </Chart>
    </template>
  </Responsive>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { Responsive, Chart, Line } from 'vue3-charts'
  import { plByMonth } from '@/data'

  export default defineComponent({
  name: 'LineChart',
  components: { Responsive, Chart, Line },
  setup() {
    const data = ref(plByMonth)
    const direction = ref('horizontal')
    const margin = ref({
      left: 10,
      top: 20,
      right: 20,
      bottom: 10
    })

    return { data, direction, margin }
  }
  })
</script>

As you can see you just write Vue components to build your charts simple and easy to read.

The library is still in progress but you can check the documentation here:
https://vue3charts.org/

And the GitHub repository here:
https://github.com/ghalex/vue3-charts

If you have any suggestions please let me know.

Thank you so much for reading!

If there is anything I can do to help, please reach out on my Twitter @ghalex and check out my blog for more articles.

Have a nice day!