Pluggins chart.js

[lpalacecr]

chart.js has a number of plugins that I would like to use in my application. I used the following lines:
// Char.js and plugins
import { Chart } from "chart.js";
import autocolors from 'chartjs-plugin-autocolors';
import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(autocolors);
Chart.register(zoomPlugin);

his.chartBarOption = {
animation: {
duration: 0
},
plugins: {
autocolors: {
enabled: true,
},
zoom: {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "xy",
}
},
legend: {
labels: {
color: textColor
}
},
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || '';

                   if (label) {
                       label += ': ';
                   }

                   if (context.parsed.y !== null) {
                       label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                   }
                   return label;
               }
           }
       }
       },
       scales: {
           x: {
               ticks: {
                   color: textColorSecondary
               },
               grid: {
                   color: surfaceBorder
               }
           },
           and: {
               ticks: {
                   color: textColorSecondary
               },
               grid: {
                   color: surfaceBorder
               }
           }
     }
   };

Background Origin

It doesn't give any errors, but it doesn't work either. I am doing something wrong? Or is it that the Chart component does not allow the use of those pluggins.

Translated by Google Translate.

Texto Original:

chart.js tiene una serie de pluggins que me gustaría usar en mi aplicación. Utilicé las siguientes líneas:
// Char.js y plugins
import { Chart } from "chart.js";
import autocolors from 'chartjs-plugin-autocolors';
import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(autocolors);
Chart.register(zoomPlugin);

this.chartBarOption = {
animation: {
duration: 0
},
plugins: {
autocolors: {
enabled: true,
},
zoom: {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "xy",
}
},
legend: {
labels: {
color: textColor
}
},
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || '';

                  if (label) {
                      label += ': ';
                  }

                  if (context.parsed.y !== null) {
                      label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                  }
                  return label;
              }
          }
      }
      },
      scales: {
          x: {
              ticks: {
                  color: textColorSecondary
              },
              grid: {
                  color: surfaceBorder
              }
          },
          y: {
              ticks: {
                  color: textColorSecondary
              },
              grid: {
                  color: surfaceBorder
              }
          }
    }
  };

Origen de Fondo

No da ningún error, pero tampoco funciona. Estoy haciendo algo mal? o es que en el componente Chart no se permite utilizar esos pluggins.

[tugcekucukoglu]

You can contact the authors of chart.js