Colours / Options about vue3-chartjs HOT 2 CLOSED

<template>
  <div style="height: 300px; width: 300px; border: 1px solid #000111">
    <Vue3ChartJS
        :id="lineChart.id"
        ref="chartRef"
        :type="lineChart.type"
        :data="lineChart.data"
        :options="lineChart.options"
    />
  </div>
  <button @click="update_Chart">Click Me</button>
</template>

<script>

import Vue3ChartJS from '@j-t-mcc/vue3-chartjs';
import { ref } from 'vue';

export default {
  components: {
    Vue3ChartJS,
  },
  setup() {

    const chartRef = ref(null)

    const new_number = ref(null);

    const dataSet = [
      {
        data: [40, 20, 80, 10],
      },
    ]

    const lineChart = {
      id: 'line-001',
      type: 'line',
      data: {
        labels: ["Vue", "A", "B", "C"],
        datasets: dataSet,
      },
      options: {
        maintainAspectRatio: false,
        responsive:true,
        scales: {
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: "Frequency (Hz)",
              fontFamily: "Montserrat",
              fontColor: "black",
            },
            ticks: {
              fontColor: "green",
              fontSize: 18,
              stepSize: 1,
              beginAtZero: true,
              min: -10,
              max: 120,
            }
          }],
          xAxes: [{
            ticks: {
              fontColor: "purple",
              fontSize: 14,
              stepSize: 1,
              beginAtZero: true
            }
          }]
        }

      }
    }

    const update_Chart= () => {
      lineChart.data.labels.push("N");
      lineChart.data.datasets[0].data.push(Math.random() * 100);
      lineChart.data.datasets[0].backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
      lineChart.data.datasets[0].borderColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
      lineChart.options.scales.yAxes[0].ticks.fontColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
      lineChart.options.scales.yAxes[0].scaleLabel.fontColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
      lineChart.options.scales.xAxes[0].ticks.fontColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
      lineChart.options.color = '#' + Math.floor(Math.random() * 16777215).toString(16);
      chartRef.value.update(500);
    }

    return {
      lineChart, new_number, update_Chart, chartRef
    }
  }

}
</script>