Невозможно применить параметры плагина datalabels chartjs в Vue

Question

Я пытаюсь Chart.js в Vue до vue-chartjs. Также используется [chartjs-plugin-datalabels][1].

В настоящее время я могу переключать график, нажимая кнопку «Показать график».

Я вижу значения для каждой метки на графике. Но я не смог настроить метки данных.

Ресурсы, которые я прочитал для решения проблемы, следующие:

[StackOverflow]

• Как правильно использовать плагин chartjs datalabels
• ChartJS: метки данных: показать процентное значение в куске
• Показывать значения в верхней части столбцов на графике.

[Страница Github плагина]

• https://github.com/chartjs/chartjs-plugin-datalabels/issues/10
• https://github.com/apertureless/vue-chartjs/issues/410

[JS Fiddle]

• https://jsfiddle.net/simonbrunel/mo5y35yg/
• https://jsfiddle.net/simonbrunel/0jhffwfd/

Даже прочитав различную информацию, я не смог заставить себя работать.

Буду очень признателен за любые советы по решению этой проблемы. Спасибо! :)

Вот мой код:

<script>
import PieChart from "./pieChart.js";
import ChartJSPluginDatalabels from "chartjs-plugin-datalabels";

export default {
  name: "App",
  components: {
    PieChart
  },
  data() {
    return {
      isHidden: false,
      chartData: {
        labels: ["Green", "Red", "Blue"],
        datasets: [
          {
            backgroundColor: ["#41B883", "#E46651", "#00D8FF"],
            data: [1, 10, 5]
          }
        ]
      },
      options:{
        plugins: {
          datalabels: {
            color: 'white',
            textAlign: 'center',
            font: {
              weight: "bold",
              size: 16
            }
          }
        }
      }
    }
  }
};
</script>

Пожалуйста, проверьте весь код здесь: https://codesandbox.io/embed/xy4x07q0o.

Answer 1

Вам необходимо привязать опции к pie-chart

  <pie-chart v-if="isHidden" :data="chartData" :options="options"></pie-chart>

Демонстрация оформления заказа здесь https://codesandbox.io/s/5kvll0xqyl