# [Vue.js] Cannot find example how to use gradient while using vuex and reactiveProps mixin (API Data)

Problem

First, you can keep track this problem on: https://github.com/apertureless/vue-chartjs/issues/473
Also there is 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

But turned out got error when every time I select a date

Background

In a nutshell, I can’t find the example how to put the gradient to the chart.

Code

BarChart.vue

<script>
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();
}
}
};
</script>

Actual Result