[Vuejs]-Cannot change font color and box width in chart

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" />