I'm using:
Vue 3
Primevue 3
Chart.js "chart.js": "^3.4.1"
Code: Select all
<template>
<div class="card">
<Chart type="line" :data="basicChartData" :options="basicChartOptions" />
</div>
</template>
<script>
import Chart from 'primevue/chart'
import { ref } from 'vue'
export default {
components: {
Chart,
},
setup() {
const basicChartData = ref({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: '#42A5F5'
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: '#FFA726'
}
]
})
const basicChartOptions = ref({
responsive: true,
hoverMode: 'index',
stacked: false,
scales: {
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}]
}
})
return {
basicChartData,
basicChartOptions,
}
},
}
</script>