no access to chart data in legendCallback

Expected Behavior

Passing in the chart as the argument gives you the nested config object, which in turn has the data object used to create the chart, with datasets and labels nested inside, from which the custom legend can be generated. This is how I did it in another (non-vue) chart.js project.

Actual Behavior

chart.config.data.datasets and .labels are empty. My chart otherwise seems to work just fine, it renders correctly and is properly affected by my options object.

wrapper.vue

<template>
  <div>
      <BarChart
      :options="chartOptions"
      :chart-data="chartData">
      </BarChart>
  </div>
</template>

<script>
import BarChart from './BarChart.vue';

export default {
  data() {
    return {
      chartData: null,
      chartOptions: {
        legendCallback(barChart) {
          console.log(barChart);  <-- barChart.config.data does not have the chart data/labels as expected
        },
        legend: {
          display: false,
        },
      },
    };
  },
  components: {
    BarChart,
  },

BarChart.vue

<script>
import { Bar, mixins } from 'vue-chartjs';

const { reactiveProp } = mixins;

export default {
  extends: Bar,
  mixins: [reactiveProp],
  props: ['options'],
  mounted() {
    this.renderChart(this.chartData, this.options);
    this.$data._chart.generateLegend();
  },
  name: 'BarChart',
};
</script>

Environment

• vue.js version: 2.5.16
• vue-chart.js version: 3.3.2
• npm version: 6.2.0

[jamessouth]

As a workaround, I moved the legendCallback out of the options object and into methods in the wrapper, then in my API call method, right after setting this.chartData with the API data, I call legendCallback with said data. legendCallback then creates a ul and appends to the div holding the chart.

[jamessouth]

@gtzures oops I changed the repo name:

https://github.com/jamessouth/dashboard/tree/master/src/components

https://jamessouth.github.io/dashboard/