title: [VUE-CHARTJS]Cannot find example how to use gradient while using vuex and reactiveProps mixin (API Data)
body: <h3>Problem</h3>
  
  <p>Codepen: <a href="https://codesandbox.io/s/vyy0z2my33" rel="nofollow noreferrer">https://codesandbox.io/s/vyy0z2my33</a></p>
  
  <ol>
  <li><p>First, you can keep track this problem on: <a href="https://github.com/apertureless/vue-chartjs/issues/473" rel="nofollow noreferrer">https://github.com/apertureless/vue-chartjs/issues/473</a></p></li>
  <li><p>Also I have a project using datepicker which rerenders the chart based on given date thus if you look on the codepen, at the BarChart.vue, you can see I add watcher to rerender the chart</p></li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/69skb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/69skb.png" alt="My Project"></a></p>
  
  <p>But turned out got error when every time I select a date</p>
  
  <p><a href="https://i.stack.imgur.com/C8RI4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C8RI4.png" alt="Console Log Erro"></a></p>
  
  <h3>Background</h3>
  
  <p>In a nutshell, I can't find the example how to put the gradient to the chart. </p>
  
  <h3>Code</h3>
  
  <p>BarChart.vue</p>
  
  <pre><code>&lt;script&gt;
  import { Bar, mixins } from "vue-chartjs";
  import { mapGetters } from "vuex";
  
  export default {
    extends: Bar,
    mixins: [mixins.reactiveProp],
    props: ["chartData", "chartLabels", "options"],
  
    mounted() {
      // chartData is created in the mixin
      // let gradientFill = this.$refs.canvas.getContext('2d').createLinearGradient(2000, 0, 0, 0);
  
      // gradientFill.addColorStop(0, "#18FFFF");
      // gradientFill.addColorStop(1, "#FF1744");
      this.renderChart(
        {
          labels: this.chartLabels,
          datasets: [
            {
              data: this.chartData,
              backgroundColor: "red",
              hoverBackgroundColor: "red"
            }
          ]
        },
        this.options
      );
    },
    computed: {
      ...mapGetters(["getBarHourTooltip"])
    },
    watch: {
      chartData() {
        this.$data._chart.update();
      },
      chartLabel() {
        this.$data._chart.update();
      }
    }
  };
  &lt;/script&gt;
  
  </code></pre>
  
  <h3>Actual Result</h3>
  
  <ol>
  <li>Can't implement the gradient color</li>
  <li>Data's well shown on initial, but got error when a date selected (as shown on image above)</li>
  </ol>