In my Vue.js JavaScript application, I am working on setting up a chart where I want the labels and chart information to be visible at all times without requiring mouse hover.
Check out this image of the chart.
This is the code snippet for my chart:
<template>
<Pie :data="ameacas.chartData" :options="ameacas.chartOptions" style="width: 300px; height: 300px;" />
</template>
<script lang="ts">
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Pie } from 'vue-chartjs'
ChartJS.register(ArcElement, Tooltip, Legend)
export default {
name: 'TdPie',
components: {
Pie
},
props: {
threats: {
type: Array,
required: true
}
},
computed: {
ameacas: function () {
return {
chartData: {
labels: ['High', 'Medium', 'Low'],
datasets: [
{
backgroundColor: ['#CC092F', '#DD3820', '#FCBA03'],
data: [this.getHighThreat, this.getMediumThreat, this.getLowThreat]
}
]
},
chartOptions: {
responsive: true,
maintainAspectRatio: false
}
}
},
getHighThreat: function () {
return this.threats
.filter(threat => threat.severity && threat.severity.toLowerCase() == 'high')
.length;
},
getMediumThreat: function () {
return this.threats
.filter(threat => threat.severity && threat.severity.toLowerCase() == 'medium')
.length;
},
getLowThreat: function () {
return this.threats
.filter(threat => threat.severity && threat.severity.toLowerCase() == 'low')
.length;
}
}
}
</script>
I have already explored solutions like the one shared in this source and other resources within the community.