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?
Looks like you're not supplying the chartOptions prop when including the ChanceChart component. Should be something like this:
<ChanceChart :chartData="chartData" :chartOptions="chartOptions" />
Adding on @fscavo answer, you are not passing any options to the renderChart method. You expect a prop but you dont pass it. Instead you define your options in your data field which is incorrect. So you will need an extra computed property. For the duplicate code for things like lineWidht, point radius you can configure that also in the options in the element section. You can read more about that here in the documentation
computed: {
chartOpts() {
return {
elements: {
point: {
radius: 0
},
,
line: {
borderWidth: 2
}
},
plugins: {
legend: {
labels: {
boxWidth: 0,
font: {
color: "#fff",
},
},
},
},
}
},
chartData() {
return {
labels: this.enemysCards.map((x, index) => index + 1),
datasets: [{
label: "Enemy's Chance",
borderColor: "#1161ed",
color: "#fff",
data: this.enemysCards,
defaultFontColor: "#fff",
},
{
label: "My Chance",
borderColor: "#f87979",
data: this.myCardsFilled,
},
{
label: "Enemy's Avarage",
borderColor: "rgb(238, 255, 0)",
data: this.avgArray,
},
{
label: "Enemy's Median",
borderColor: "rgb(255, 0, 191)",
data: this.medianArray,
},
{
label: "Standard Deviation",
borderColor: "#fff",
data: this.upDev,
},
{
label: "Standard Deviation",
borderColor: "#fff",
data: this.downDev,
},
],
};
},
<ChanceChart :chartData="chartData" :chartOptions="chartOptions" />