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.
One Comment
Hi, I’m currently using your library because it fits my needs perfectly. In the docs under “Charts/Area Chart” there is a section for “Stacked Area Chart” with code example. I think this code example was accidentally copied from the section above “Area Chart”. I would like to use Stacked Area Charts, but need an example. Could you give me one? Thanks already for the effort!