score:3
Accepted answer
this is because you are using v2 syntax in v3, v3 has some major breaking changes over v2. please read the migration guide for all of them.
for your callback to work you need to define it in options.plugins.tooltip.callbacks.label
edit:
like the error says you are getting you can't reassign a constant variable since its a constant. if you change it to a let
it works fine:
const options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
bordercolor: 'pink'
}]
},
options: {
plugins: {
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;
}
}
}
},
}
}
const ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.6.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How to modify chartjs tooltip so i can add customized strings in tooltips
- How to add an on click event to my Line chart using Chart.js
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- How to add gradient background to Line Chart [vue-chart.js]
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How can I make line on chart thinner?
- How to add area with break on line chart with fill color
- I have 10 points inn x-axis, ranging [-25,-20,,-15,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?
- How to sort XY line chart tooltip items based on value and add thousands separators?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How can I add shadow color below the line in chart.js charts?
- How to add new dataset in line chart of chart.js by iterating over dictionary in JavaScript?
- how to add Thousand separator in pie chart tooltips of charts.js
- How can I add user inputted values to my chart.js line graph?
- How can I add background color of length bars in chart (chartJS)?
- How to add data dynamically to primevue Line chart from vuejs3?
- How can I remove the white border from Chart.js pie chart when all legends are hidden?
- How can I draw a line to the highest datapoint in chart js?
- How to edit my custom tooltips in my line chart using chart.js?
- How can i add min and max range horizontal line in angular-chart.js
- How to Add X axis Padding in chart js Line Graph
- How to ensure that a Chart.js line chart uses all space available on the y-axis?
- How can I add new data points to an existing chart with chart.js?
- How can I add functionality to Chartjs Doughnut chart custom legend
- how to add multi X axis custom line in chart js
- How to add vertical line in bar chart using chartJs and ng2-charts?
More Query from same tag
- Chartjs Data via json request not populating
- Cannot find centroid of path
- How can I get chart.js to automatically add colours for dynamic labels?
- React export component that is not diplayed to PNG
- ChartJS changing graphs based upon Drop Down selection
- Draw horizontal line on chart in chart.js on v2
- Chart.js remove gridline
- Angular 7, chart.js even when chart replaced, remaining chart in background which appears sometimes when mouseover
- How to add a toggle inside a title of the barchart js
- Angular canvas is undefined
- change stroke line color in chart according to datasets in react native
- Using two JSON objects to make Chart.JS Bar Chart Dynamic in Typescript / Angular
- How do I implement the 'autoskip' feature in chartjs?
- Chart JS not working with Dynamic Data
- How can I change only a specific option in a chart with chart.js?
- Chart.js -> line chart -> multiple points with the same X
- Problems with max and min value of Chart.js [line chart]
- Modify the information box of the scatter chart in Chart.JS
- Chart.js Mixed Bar and Line chart with different scales
- chartjs xaxis ticks with round values from shifted input data
- display various chart value and tool tip
- TypeError: CanvasRenderService is not a constructor
- ChartJS Zoom Granularity
- Django Time Series with Chart JS
- chart.js tooltip keeps remembering old data after update
- Page break in Angular with Chartjs and tables
- onClick event to Hide dataset Chart.js V2
- Add dynamic data in a demo chart.js file of a django template
- Chart.js separation lines
- Css style not working well when resizing chart height in angular application