How to rerender a chart?

[sayhicoelho]

Hi! I need to rerender a chart when some data gets updated to make it reactive.

How to do that?

Thanks!

[SkyRideRq]

hi, just solved it :)

The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.

[SkyRideRq]

example:

<template>
  <v-container fluid tag="section">
    <v-row>
      <v-col>
        <graph-line
          :width="600"
          :height="400"
          :shape="'normal'"
          :axis-min="0"
          :axis-max="50"
          :axis-full-mode="true"
          :labels="['1Q', '2Q', '3Q', '4Q']"
          :names="names"
          :values="values"
          :theme="theme"
          :key="theme"
        >
          <note :text="'Line Chart'"></note>
          <tooltip :names="names" :position="'right'"></tooltip>
          <legends :names="names"></legends>
          <guideline :tooltip-y="true"></guideline>
        </graph-line>
      </v-col>
      <v-col>

      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      names: ["MS", "Apple", "Google"],
      values: [
        [10, 5, 5, 5],
        [40, 10, 10, 10],
        [30, 30, 30, 30],
      ],
      theme: "classic",
    };
  },
  watch: {
    "$vuetify.theme.dark"(newValue) {
      newValue ? (this.theme = "dark") : (this.theme = "classic");
    },
  },
  created() {
    this.$vuetify.theme.dark ? (this.theme = "dark") : (this.theme = "classic");
  },
};
</script>

[sayhicoelho]

Whool! Thanks for reply @SkyRideRq ! I'll try it out!