[VUE-CHARTJS]Cannot find example how to use gradient while using vuex and reactiveProps mixin (API Data)

Question

Problem

Codepen: https://codesandbox.io/s/vyy0z2my33

1. First, you can keep track this problem on: https://github.com/apertureless/vue-chartjs/issues/473

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

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

1. Can't implement the gradient color
2. Data's well shown on initial, but got error when a date selected (as shown on image above)

Answer 1

I was not able to reproduce with your codesandbox project. How are you changing the date?

The error message is referring to a map() method used on an undefined array, presumably originating in src/store/stores.js. You could try to wrap the offending map() method call in a control statement, like this:

if (payloadInitAllChart.barDataHour) { // Example, could be other map() method
  payloadInitAllChart.barDataHour.map(response =>
   state.barChartPerHour.datasetBarHour.push(response)
  );
}

Answer 2

If you are using the mixin your chart data has to be the Chart.js data object. With labels, datasets etc. in it. But then you won't be able to set the gradient colour.

But you could also simply pass in your labels and data (if you have only one dataset), as you did right now.

Add a watcher on both and then trigger this.$data._chart.update()

But then you have to remove the reactiveMixin.

https://codesandbox.io/s/0yl728w0n