Vue3-Charts

Data visualization in Vue3 made easy

ChartingVueSVG
ghalex/vue3-chartsvue3charts.orgvue3-charts

README


Vue3-Charts

Data visualization in Vue3 made easy

Vue3-Charts is a SVG-based charting library that is very easy to use and highly customizable.

GitHub


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:


  1. ```xml
  2. <div>
  3.   <Chart :data="data" :margin="margin" :direction="direction">
  4.     <template #layers>
  5.       <Grid strokeDasharray="2,2" />
  6.       <Bar :dataKeys="['name', 'pl']" :barStyle="{ fill: '#90e0ef' }" />
  7.       <Bar :dataKeys="['name', 'avg']" :barStyle="{ fill: '#0096c7' }" />
  8.       <Line :dataKeys="['name', 'avg']" type="step" />
  9.     </template>
  10.   </Chart>
  11. </div>
  12. ```

  1. ```js
  2. <script>
  3. import { defineComponent } from 'vue'
  4. import { plByMonth } from '@/data'
  5. import { Chart, Grid, Bar, Line } from 'vue3-charts'

  7. export default defineComponent({
  8.   name: 'Main',
  9.   components: { Chart, Grid, Bar, Line },
  10.   setup() {
  11.     const data = ref(plByMonth)

  13.     const direction = ref('horizontal')
  14.     const margin = ref({
  15.       left: 0,
  16.       top: 20,
  17.       right: 20,
  18.       bottom: 0
  19.     })

  21.     return {data, margin, direction}
  22.   }
  23. })
  24. </script>
  25. ```

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.