Vue - script-setup data to script for charts

Question

First let me clarify, i'm new to vue.

What I am trying to do is, when I get data from the defineProps. I want that the data from the defineProps goes to my script. Only I cant get the data over there. It is only available in the <template> {{ graph }} </template>. Notice that i can access the data with {{ graph }} in there. I just cant find a way to use it in export default { }

So my script is looking like this

<script setup>
const props = defineProps(['graph']);
</script>

<template>
 {{ graph }} // Works
</template>

<script>
console.log(props); // Doesnt work or
console.log(graph); // Doesnt work
export default {
}
</script>

So, how do I get the data from props(graph) into export default { }?

Why do I want do this?

I saw https://vue-chartjs.org/examples/ and I followed it.

export default {
  name: 'BarChart',
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March' ],
        datasets: [ { data: [3, 20, 12] } ]
      },
      chartOptions: {
        responsive: true
      }
    }
  }
}

Notice the data: [3, 20, 12]. I want to edit the values with the data I get. For example data: [props.day1, props.day2, props.day3]

Don't mix script and script setup, unless you know why you need it. It's either one or another. There's no props because it's regular JS, there's no such variable, unless you define it. If you're new, stick to the official guides, they are specific about how a component is structured — Estus Flask
– Estus Flask, Commented Jan 18, 2023 at 18:56

Nikola Pavicevic · Accepted Answer · 2023-01-18 20:50:44Z

4

Like commented, use just script setup, try like following:

<template>
  <Bar :data="chartData" :options="chartOptions" />
</template>
<script setup>
  import { Bar } from 'vue-chartjs'
  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
  import { ref } from 'vue'
  ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

  const chartData = ref({
    labels: [ 'January', 'February', 'March'],
    datasets: [
      {
        label: 'Data One',
        backgroundColor: '#f87979',
        data: [40, 20, 12]
      }
    ]
  })
  const chartOptions = ref({
    responsive: true,
    maintainAspectRatio: false
  })
</script>

demo HERE

edited Jan 18, 2023 at 20:50

answered Jan 18, 2023 at 20:43

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ef few Over a year ago

Awesome man! this did it. And I am understanding now more on how VUE works :). I only needed to edit "maintainAspectRatio: false" to "maintainAspectRatio: true". The height was only increasing lol.

Collectives™ on Stack Overflow

Vue - script-setup data to script for charts

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related