Charts in Vue3
Tags: vue, vue3, d3
Published: 2021-05-21 13:36:34

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](https://d3js.org/) 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](https://recharts.org/en-US/) 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](http://vue3charts.org/) 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](https://v3.vuejs.org/api/composition-api.html). Check [this example](https://vue3charts.org/docs/custom-layer) in the [documentation](https://vue3charts.org/docs/getting-started).

Here is a simple responsive **LineChart**:

```vue
<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/](https://vue3charts.org/)

And the GitHub repository here:
[https://github.com/ghalex/vue3-charts](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](https://ghalex.com) for more articles.

Have a nice day!