I would like to change the font color and the box width in my chart but it doesn’t work.
I tried it a lot of way but cant solve it.
Also it must be better solution to edit borderColor, pointRadius, etc. then set it in every label.
Sorry for my stupid question, i am beginner.
Here is my chart component:
<script>
import { defineComponent } from 'vue'
import { Line } from 'vue3-chart-v2'
export default defineComponent({
name: 'ChanceChart',
extends: Line,
props: {
chartData: {
type: Object,
required: true
},
chartOptions: {
type: Object,
required: false,
},
},
mounted () {
this.renderChart(this.chartData, this.chartOptions)
}
})
</script>
And here is my app:
<template>
<div id="chart">
<ChanceChart :chartData="chartData" />
</div>
</template>
<script>
import ChanceChart from "../components/ChanceChart.vue";
export default {
components: {
ChanceChart
},
computed: {
chartData() {
return {
labels: this.enemysCards.map((x, index) => index + 1),
datasets: [
{
label: "Enemy's Chance",
borderColor: "#1161ed",
borderWidth: 2,
pointRadius: 0,
color: "#fff",
data: this.enemysCards,
defaultFontColor: "#fff",
},
{
label: "My Chance",
borderColor: "#f87979",
borderWidth: 2,
pointRadius: 0,
data: this.myCardsFilled,
},
{
label: "Enemy's Avarage",
borderColor: "rgb(238, 255, 0)",
borderWidth: 2,
pointRadius: 0,
data: this.avgArray,
},
{
label: "Enemy's Median",
borderColor: "rgb(255, 0, 191)",
borderWidth: 2,
pointRadius: 0,
data: this.medianArray,
},
{
label: "Standard Deviation",
borderColor: "#fff",
borderWidth: 2,
pointRadius: 0,
data: this.upDev,
},
{
label: "Standard Deviation",
borderColor: "#fff",
borderWidth: 2,
pointRadius: 0,
data: this.downDev,
},
],
options: {
plugins: {
legend: {
labels: {
boxWidth: 0,
font: {
color: "#fff",
},
},
},
},
},
};
},
},
Can anyone help me?