ghalex/zebbra-charts

Vue3-Charts

---

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

Vue3-Charts basic example:

<div>
  <Chart :data="data" :axis="axis" :margin="margin" :direction="direction">
    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Bar :dataKeys="['name', 'pl']" fill="#48CAE4" />
      <Bar :dataKeys="['name', 'avg']" fill="#00b4d8" />
      <Line :dataKeys="['name', 'avg']" stroke="#e76f51" type="step" />
    </template>
  </Chart>
</div>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Main',
  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 components will be added regularly.

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

License

Copyright (c) 2018 Zebbra contributors

Licensed under the MIT license.