score:1
Hopefully this helps others:
The error was a result of the axis min value not being defaulted to zero. Once that was applied to the axes all functions as expected.
score:0
Ok, I'm using Angular V13 with chart.js v 3.7 and chartjs-plugin-datalabels v 2. I struggled a lot trying to get things working. The problem was not errors, but the labels were just not appearing. Turned out that I had to add .default to the plugin reference:
public chartPlugins = [pluginDataLabels.default];
Now you can bind this chartPlugins variable to the canvas:
<canvas baseChart
[data]="lineChartData"
[options]="lineChartOptions"
[type]="lineChartType"
[plugins]="chartPlugins"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
And then it works!
score:5
I know this isn't exactly the same problem that the OP had, but I had a bit of trouble with the Angular CLI compiling the code properly.
angular.json:
{
"projects": {
"myProject": {
"architect": {
"build": {
"options": {
"scripts": [
"node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js"`
create index.d.ts
file with contents:
declare module 'chartjs-plugin-datalabels'
import as follows:
import ChartDataLabels from 'chartjs-plugin-datalabels';
score:8
install chartjs-plugin-datalabel by
npm install chartjs-plugin-datalabels --save
Then import the same in component by
import ChartDataLabels from 'chartjs-plugin-datalabels';
and add
labels:[]
..
datasets[]
..
plugin:[ChartDataLabels]
This worked for me . Hope it will work.
Source: stackoverflow.com
Related Query
- angular 5 chart.js datalabels plugin
- chartjs datalabels change font and color of text displaying inside pie chart
- Problem for display a chart with Chart.js and Angular
- How to properly use the chartjs datalabels plugin
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- Angular 2 chart - change point radius
- Datalabels plugin chartjs showing '[object]' instead of value
- Angular Chart JS prevent x label causing overflow
- Series Details Not Showing in Angular Chart with Charts.js
- Ng2-charts / chart.js - how to refresh/update chart - angular 4
- Extending Existing Chart Types angular chart js using chart js 2.0
- Chart.js Chart in Angular does not load until resizing browser window
- How to update data Chart in async way in Angular Chart.js?
- Angular 8 & ChartJs change color in pie chart
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- Show labels on each sector to polar chart using angular js chart
- How to set single color on each bar in angular chart js
- Can't apply options of datalabels chartjs plugin in Vue
- Angular chart how to show the legend data value by default along with legend name
- How to show percentage (%) using chartjs-plugin-labels ( Pie chart ) in angular 2/8
- How to add title inside doughnut chart in Angular Chart?
- Chart Js + Angular
- ERROR TypeError: "this.canvas is undefined" | Problem with creating a chart with angular and chart.js
- Change Angular js charts.js chart type dynamically
- chartjs plugin datalabels does not show value on charts
- Implementing a choropleth chart using chartjs-chart-geo plugin with react-chartjs-2
- How to create a variable for chart js datalabel plugin formatter
- chart annotations not showing in Angular 2
- Remove additional white space on left and right side of Angular Chart
- Angular Charts.js: Can't refresh chart with data
More Query from same tag
- Set max value of chart.js bar chart
- Angular2 + Chart.js and ng2-charts. Data binding not working as expected
- ChartJs - Adding padding after Y- Axis
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- Chart JS: Set Spacing Between Ticks on Y-Axis
- Horizontal Stacked Bar with Gaps
- Chart.js unwanted canvas resizing
- implement chartjs zoom with buttons
- Do I need a new dataset each time that I filter by a new date range in Charts.js?
- Chart.JS how to change order of y-axis
- Chart.js Mouse Over Show Old Chart Data
- Chart.js: different dataset size
- How to customize border style on Chart.js
- How can i loop some specific key in each index json data and put it in dataset: data ? (chart.js)
- Angular chartjs directive
- How do remove the bottom scale on a Chart.js bar chart
- How to display data by current month and display no data message if data not exists
- (Angular Ionic) How can I stream my custom data with chartjs-plugin-streaming?
- ChartJS - Display a single line data in tooltip
- How do I correctly include Moment.js and Chart.js with RequireJS when I want to create charts with time scales?
- HTML in Chart.js labels
- How to add a ChartPoint to a DataSet in Chart.js with TypeScript?
- Using Chart.js in functional React component, not allowing me to toggle data: "properties undefined"
- Remove the vertical line in the chart js line chart
- Chart.js Show Label near Line in combined Chart
- How to make a chart with an associative array with chart.js?
- How to position chart details next to a chart responsive for multiple devices?
- How to draw border all the way around bar element
- Chart js not showing negative y axis
- Labels attribute of chartsjs not taking context variable of type string