Skip to content

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

License

Notifications You must be signed in to change notification settings

ghalex/vue3-charts

Repository files navigation


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:

<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.

  • Line Chart
  • Area Chart
  • Stacked Area Chart
  • Column Chart
  • Stacked Column Chart
  • Bar Chart
  • Stacked Bar Chart
  • Scatter Plot
  • Treemap

License

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published