Colours / Options

[alexanderbsd]

Hi,
Thanks a lot for your work. I was trying to change colours of axes using options, but it doesn't seem to be working. Could you please post a piece of code that works? Just in case, I attached the code I was playing with.

<template>
  <div style="height: 300px; width: 300px; border: 1px solid #000111">
      <Vue3ChartsJS
        :id="lineChart.id"
        :type="lineChart.type"
        ref="chartRef"
        :data="lineChart.data"
        :options="lineChart.options"
      />
  </div>
  
</template>

<script>

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

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

        const chartRef = ref(null)

        const new_number = ref(null);
        const lineChart = {
            id: 'line-001',
            type: 'line',
            data: {
                labels: ["Vue", "A", "B", "C"],
                datasets: [
                    {
                        backgroundColor: 'rgb(255, 255, 255)',
                        borderColor: 'rgb(255, 255, 255)',
                        // backgroundColor: [
                        //     '#345321',
                        //     '#34ba31',
                        //     '#ffbcaa',
                        //     '#fdaaaa',
                        // ],
                        data: [40, 20, 80, 10],
                    },
                ],
                
            },
            options: {
                maintainAspectRatio: false,
                responsive:true,
                color: 'rgb(255, 255, 255)',
                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= () => {
            console.log("here")
            lineChart.data.labels.push("N");
            lineChart.data.datasets[0].data.push(parseInt(new_number.value));
            console.log(lineChart.data)
            chartRef.value.update(500);
        }

        return {
            lineChart, new_number, update_Chart, chartRef, primary_color
        }
    }

}
</script>

<style>

canvas {
   background-color: var(--q-primary)
}

</style>

[J-T-McC]

Hi Alexander.

I have updated your example with some random colour updates on a button click.

Edit*: also just a note that this looks like its for package version 0.3.0 and ChartJS 2.9.4. This will not work for version 1.0 and ChartJS 3 since they have changed the structure of their options. If you decide to move to version 1, there is a similar example in the src/App.vue for this library. You can clone the repo, install the packages and run yarn dev to try them out.

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

[alexanderbsd]

Great, thank you!