Vue3-Charts

Data visualization in Vue3 made easy

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

Documentation

To learn more about Vue3-Charts read the documentation here

Here is a basic example:

<div>
  <Chart :data="data" :margin="margin" :direction="direction">
    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Bar :dataKeys="['name', 'pl']" :barStyle="{ fill: '#90e0ef' }" />
      <Bar :dataKeys="['name', 'avg']" :barStyle="{ fill: '#0096c7' }" />
      <Line :dataKeys="['name', 'avg']" type="step" />
    </template>
  </Chart>
</div>

<script>
import { defineComponent } from 'vue'
import { plByMonth } from '@/data'
import { Chart, Grid, Bar, Line } from 'vue3-charts'

export default defineComponent({
  name: 'Main',
  components: { Chart, Grid, Bar, Line },
  setup() {
    const data = ref(plByMonth)

    const direction = ref('horizontal')
    const margin = ref({
      left: 0,
      top: 20,
      right: 20,
      bottom: 0
    })

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

View on Github

Components List

This project is still in early development. New charts will be added regularly.

• [x] Line Chart
• [x] Area Chart
• [x] Stacked Area Chart
• [x] Column Chart
• [x] Stacked Column Chart
• [x] Bar Chart
• [x] Stacked Bar Chart
• [ ] Scatter Plot
• [x] Treemap

License

Copyright (c) 2021 Vue3-Charts Contributors Licensed under the MIT license.