score:0
Accepted answer
i found a solution
you need to register the chartdatalabel
import { bar, chart } from "react-chartjs-2";
import chartdatalabels from "chartjs-plugin-datalabels";
chart.register(chartdatalabels); // register plugin
const data = {
labels: labels,
datasets: [
{
label: 'label',
data: data,
backgroundcolor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
bordercolor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderwidth: 1,
datalabels: {
color: '#ffce56',
anchor: 'end',
align : 'start',
color: function(context) {
return context.dataset.backgroundcolor;
},
font: function(context) {
var w = context.chart.width;
return {
size: w < 512 ? 12 : 14,
weight: 'bold',
};
}
}
},
],
};
return (
<bar data={data}/>
)
this post help me to find the solution
score:1
the same phenomenon happened to me.
i think this discussion will be helpful. https://github.com/chartjs/chartjs-plugin-datalabels/discussions/213#:~:text=chart.js%203%20compatibility
the problem is probably a dependency between chart.js version 3 and chartjs-plugin-datalabels master branch version.
i used this command to solve the problem
npm install -s chartjs-plugin-datalabels@next
this is how my dependency works.
"chart.js": "^3.3.2",
"chartjs-plugin-datalabels": "^2.0.0-rc.1",
"react-chartjs-2": "^3.0.3",
i hope this is helpful.
Source: stackoverflow.com
Related Query
- I'm getting the error "TypeError: Cannot read property 'extend' of undefined" when trying to import chartjs-plugin-datalabels
- TypeError: Cannot read property 'defaults' of undefined when using the react wrapper of chartjs
- Chart JS Error : Uncaught TypeError: Cannot read property 'top' of undefined
- react-chartjs error Cannot read property 'Chart' of undefined
- ERROR TypeError: Cannot read property 'testMethod' of undefined
- Getting Error regarding :Cannot read property 'length' of undefined
- Angular and CharJS - ERROR TypeError: Cannot read property '15' of undefined
- ERROR TypeError: Cannot read property 'nativeElement' of undefined in Ionic 5 and chart.js
- Chart Js Cannot read property 'length' of undefined
- Uncaught TypeError: Cannot read property 'offsetWidth' of undefined - chart.js
- Chartjs cannot read property datasets of undefined
- Cannot read property 'labels' of undefined
- Chart.js Cannot read property 'fontSize' of undefined
- TypeError: Cannot read property 'legend' of undefined | Angular + ng2-charts
- ChartJS: Uncaught TypeError: Cannot read property 'call' of undefined
- Uncaught TypeError: Cannot read property 'draw' of undefined
- error : "Uncaught TypeError: Cannot read property 'length' of null" Chart.js
- Ionic/Chart.js - Cannot read property 'nativeElement' of undefined
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- Updating Chart.js with JSON, cannot read property 'length' of undefined
- chartjs & asp.net: Cannot read property 'labels' of undefined
- Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined
- Error in created hook (Promise/async): "TypeError: Cannot read property 'position' of undefined"
- Uncaught TypeError: Cannot read property 'draw' of undefined : Angular chart js
- Cannot read property 'reactiveProp' of undefined in vue-chartjs
- react-chartjs integration error. Cannot read property 'xLabels' of undefined
- Chartjs + Vue.js - Cannot read property '_meta' of undefined
- chartjs; cannot read property '0' of undefined
- Chartjs Plugin Deferred throws "Uncaught TypeError: Cannot read property 'plugins' of undefined" error
- Chart.js Cannot read property 'apply' of undefined
More Query from same tag
- Trying to create a custom tooltip in a doughnut chart using chartsjs, but it is not working
- Export chart.js canvas to prawn-pdf in rails
- Chart.js doughnut chart isn't showing tooltip when you hover over the left/right of the doughnut
- Problems displaying yLabels in charts.js
- How do I import Chart.js Helper Functions in Django?
- Chartjs scatter chart's x axis is heavily padded
- Scrollable x axis with chart.js 2.1.4
- Hiding unused axis in ng2-charts
- Use multiple datasets with Javascript Chart
- How to prevent first/last bars from being cut off in a chart with time scale
- How to set y axis to the max dataset value in Chartjs?
- How To Format Scale Numbers in Chart.js v2
- Chart.js separation lines
- chart js draw line chart by points instead of by lines
- Chart.js - change which data the legend uses for the coloured box
- How to pass a nested function to an HTML button and Dropdown menu
- Customizing ChartJS.org
- How to assign different background colors to chart.js pie chart data set?
- laravel chartjs dates skipped
- Chart.js limit the display size of the chart
- issue with legend boxes in ChartJS
- ChartJS - x axis labels orientation
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- Draw multiple chart in one page with Chart.js
- Show labels on each sector to polar chart using angular js chart
- How to ignores labels in chart.js
- Possible to hide Chart.js grid lines that extend beyond chart?
- Chart.js doughnut chart comes bigger and bigger
- ChartJS Only Show Large Font Size for a Specific Tick
- chart js when hover shows old values