link1918 link1919 link1920 link1921 link1922 link1923 link1924 link1925 link1926 link1927 link1928 link1929 link1930 link1931 link1932 link1933 link1934 link1935 link1936 link1937 link1938 link1939 link1940 link1941 link1942 link1943 link1944 link1945 link1946 link1947 link1948 link1949 link1950 link1951 link1952 link1953 link1954 link1955 link1956 link1957 link1958 link1959 link1960 link1961 link1962 link1963 link1964 link1965 link1966 link1967 link1968 link1969 link1970 link1971 link1972 link1973 link1974 link1975 link1976 link1977 link1978 link1979 link1980 link1981 link1982 link1983 link1984 link1985 link1986 link1987 link1988 link1989 link1990 link1991 link1992 link1993 link1994 link1995 link1996 link1997 link1998 link1999 link2000 link2001 link2002 link2003 link2004 link2005 link2006 link2007 link2008 link2009 link2010 link2011 link2012 link2013 link2014 link2015 link2016 link2017 link2018 link2019 link2020 link2021 link2022 link2023 link2024 link2025 link2026 link2027 link2028 link2029 link2030 link2031 link2032 link2033 link2034 link2035 link2036 link2037 link2038 link2039 link2040 link2041 link2042 link2043 link2044 link2045 link2046 link2047 link2048 link2049 link2050 link2051 link2052 link2053 link2054

[Vue.js] Can't apply options of datalabels chartjs plugin in Vue

I’m trying to Chart.js in vue.js through vue-chartjs. Also, [chartjs-plugin-datalabels][1] is used.

Currently, I can toggle a chart by clicking the “Show a chart” button.

I can see values for each label in the chart. But, I couldn’t customize the data labels.

Resources I read to solve the problem are the following:


How to properly use the chartjs datalabels plugin
ChartJS: datalabels: show percentage value in Pie piece
Show values on top of bars in chart.js

[The plugin’s Github Page]

[JS Fiddle]

Even after reading various information, I couldn’t make mine work.

I would greatly appreciate any advice of solving this problem. Thanks! :)

Some of my code is the following:

import PieChart from “./pieChart.js”;
import ChartJSPluginDatalabels from “chartjs-plugin-datalabels”;

export default {
name: “App”,
components: {
data() {
return {
isHidden: false,
chartData: {
labels: [“Green”, “Red”, “Blue”],
datasets: [
backgroundColor: [“#41B883”, “#E46651”, “#00D8FF”],
data: [1, 10, 5]
plugins: {
datalabels: {
color: ‘white’,
textAlign: ‘center’,
font: {
weight: “bold”,
size: 16

Please check out the entire code here :

Solution :

You need to bind options to pie-chart

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

Checkout demo here