Vue3-Charts is an easy-to-use and highly customizable SVG-based charting library. It currently supports three types of charts: line, bar, and area. More genres are coming soon.
best svg charting library, svg chart generator, svg charts, chart library, free svg charts, chart svg download, chart js svg, svg radial chart
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
How to make use of it:
Install and download:
# Yarn $ yarn add vue3-charts # NPM $ npm i vue3-charts
1. Import the necessary components.
import { defineComponent, ref } from 'vue'
import { Chart, Grid, Line } from 'vue3-charts'2. Import your data for presentation in a graph.
export const plByMonth = [
{ name: 'Jan', pl: 1000, avg: 500, inc: 300 },
{ name: 'Feb', pl: 2000, avg: 900, inc: 400 },
{ name: 'Apr', pl: 400, avg: 400, inc: 500 },
{ name: 'Mar', pl: 3100, avg: 1300, inc: 700 },
{ name: 'May', pl: 200, avg: 100, inc: 200 },
{ name: 'Jun', pl: 600, avg: 400, inc: 300 },
{ name: 'Jul', pl: 500, avg: 90, inc: 100 }
]import { plByMonth } from '@/data'3. Create a bar chart.
<template>
<Chart
:size="{ width: 500, height: 420 }"
:data="data"
:margin="margin"
:direction="direction"
:axis="axis">
<template #layers>
<Grid strokeDasharray="2,2" />
<Bar :dataKeys="['name', 'pl']" :barStyle="{ fill: '#90e0ef' }" />
<Bar :dataKeys="['name', 'avg']" :barStyle="{ fill: '#0096c7' }" />
<Bar :dataKeys="['name', 'inc']" :barStyle="{ fill: '#48cae4' }" />
<Marker :value="1000" label="Avg." color="#e76f51" strokeWidth="2" strokeDasharray="6 6" />
</template>
<template #widgets>
<Tooltip
borderColor="#48CAE4"
:config="{
pl: { color: '#90e0ef' },
avg: { color: '#0096c7' },
inc: { color: '#48cae4' }
}"
/>
</template>
</Chart>
</template>export default defineComponent({
name: 'LineChart',
components: { Chart, Grid, Line },
setup() {
const data = ref(plByMonth)
const direction = ref('horizontal')
const margin = ref({
left: 0,
top: 20,
right: 20,
bottom: 0
})
const axis = ref({
primary: {
type: 'band'
},
secondary: {
domain: ['dataMin', 'dataMax + 100'],
type: 'linear',
ticks: 8
}
})
return { data, direction, margin, axis }
}
})4. Create a line chart.
<template>
<Chart
:size="{ width: 500, height: 420 }"
:data="data"
:margin="margin"
:direction="direction"
:axis="axis">
<template #layers>
<Grid strokeDasharray="2,2" />
<Line :dataKeys="['name', 'pl']" />
<Line :dataKeys="['name', 'avg']" :lineStyle="{ stroke: 'red' }" type="step" />
</template>
<template #widgets>
<Tooltip
borderColor="#48CAE4"
:config="{
name: { hide: true },
pl: { color: '#0077b6' },
avg: { label: 'averange', color: 'red' },
inc: { hide: true }
}"
/>
</template>
</Chart>
</template>export default defineComponent({
name: 'LineChart',
components: { Chart, Grid, Line },
setup() {
const data = ref(plByMonth)
const direction = ref('horizontal')
const margin = ref({
left: 0,
top: 20,
right: 20,
bottom: 0
})
const axis = ref({
primary: {
type: 'band',
format: (val: string) => {
if (val === 'Feb') {
return '😜'
}
return val
}
},
secondary: {
domain: ['dataMin', 'dataMax + 100'],
type: 'linear',
ticks: 8
}
})
return { data, direction, margin, axis }
}
})5. Create an area chart.
<template>
<Chart
:size="{ width: 500, height: 420 }"
:data="data"
:margin="margin"
:direction="direction"
:axis="axis">
<template #layers>
<Grid strokeDasharray="2,2" />
<Area :dataKeys="['name', 'pl']" type="monotone" :areaStyle="{ fill: 'url(#grad)' }" />
<Line
:dataKeys="['name', 'pl']"
type="monotone"
:lineStyle="{
stroke: '#9f7aea'
}"
/>
<Marker v-if="marker" :value="1000" label="Mean." color="green" strokeWidth="2" strokeDasharray="6 6" />
<defs>
<linearGradient id="grad" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#be90ff" stop-opacity="1" />
<stop offset="100%" stop-color="white" stop-opacity="0.4" />
</linearGradient>
</defs>
</template>
<template #widgets>
<Tooltip
borderColor="#48CAE4"
:config="{
pl: { color: '#9f7aea' },
avg: { hide: true },
inc: { hide: true }
}"
/>
</template>
</Chart>
</template>export default defineComponent({
name: 'LineChart',
components: { Chart, Grid, Line },
setup() {
const data = ref(plByMonth)
const direction = ref('horizontal')
const margin = ref({
left: 0,
top: 20,
right: 20,
bottom: 0
})
const axis = ref({
primary: {
type: 'band'
},
secondary: {
domain: ['dataMin', 'dataMax + 100'],
type: 'linear',
ticks: 8
}
})
return { data, direction, margin, axis }
}
})6. Stacked graph is also supported.
<template>
<Chart
:size="{ width: 500, height: 420 }"
:data="data"
:margin="margin"
:direction="direction"
:axis="axis">
<template #layers>
<Grid strokeDasharray="2,2" />
<Area :dataKeys="['name', 'pl']" type="monotone" :areaStyle="{ fill: 'url(#grad)' }" />
<Line
:dataKeys="['name', 'pl']"
type="monotone"
:lineStyle="{
stroke: '#9f7aea'
}"
/>
<Marker v-if="marker" :value="1000" label="Mean." color="green" strokeWidth="2" strokeDasharray="6 6" />
<defs>
<linearGradient id="grad" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#be90ff" stop-opacity="1" />
<stop offset="100%" stop-color="white" stop-opacity="0.4" />
</linearGradient>
</defs>
</template>
<template #widgets>
<Tooltip
borderColor="#48CAE4"
:config="{
pl: { color: '#9f7aea' },
avg: { hide: true },
inc: { hide: true }
}"
/>
</template>
</Chart>
</template>export default defineComponent({
name: 'LineChart',
components: { Chart, Grid, Line },
setup() {
const data = ref(plByMonth)
const direction = ref('horizontal')
const margin = ref({
left: 0,
top: 20,
right: 20,
bottom: 0
})
const axis = ref({
primary: {
type: 'band'
},
secondary: {
domain: ['dataMin', 'dataMax + 100'],
type: 'linear',
ticks: 8
}
})
return { data, direction, margin, axis }
}
})SVG-based Charting Library For Vue 3, Vue3-Charts Plugin/Github
See Demo And Download
Official Website(ghalex): Click Here
This superior jQuery/javascript plugin is developed by ghalex. For extra Advanced usage, please go to the official website.
