score:10
this can be achieved using the following tooltips label callback function :
tooltips: {
mode: 'label',
callbacks: {
label: function(t, d) {
var dstlabel = d.datasets[t.datasetindex].label;
var ylabel = t.ylabel;
return dstlabel + ': ' + ylabel + ' €';
}
}
}
fyi: this has nothing to do with scales
. it would work perfectly fine along with scales
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ['jan', 'feb', 'mar', 'apr', 'may'],
datasets: [{
label: 'dst1',
backgroundcolor: '#3e95cd',
data: [3, 2, 4, 5, 1]
}, {
label: 'dst2',
backgroundcolor: '#8e5ea2',
data: [2, 4, 1, 2, 5]
}]
},
options: {
scales: {
yaxes: [{
ticks: {
beginatzero: true,
stepsize: 1
}
}]
},
title: {
display: true,
text: 'title'
},
tooltips: {
mode: 'label',
callbacks: {
label: function(t, d) {
var dstlabel = d.datasets[t.datasetindex].label;
var ylabel = t.ylabel;
return dstlabel + ': ' + ylabel + ' €';
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.1/chart.js"></script>
<canvas id="ctx"></canvas>
score:2
a bit late to the party, but i have recently discovered javascript's built-in formatter for currencies, that saves you having to play about with strings and could be helpful here, and is reusable elsewhere in your code!:
const gbp = new intl.numberformat('en-gb', {
style: 'currency',
currency: 'gbp',
minimumfractiondigits: 2
});
being english i have of course done it in gbp, but i found that changing the en-gb
to de-de
and the 'gbp'
to 'eur'
worked absolutely fine. even formatting the decimal points and thousand separators correctly.
edit: including how to actually give the formatter a number to format would be useful wouldn't it!
gbp.format(10000); // returns £10,000.00
Source: stackoverflow.com
Related Query
- ChartJS add tooltip to a grouped bar chart
- ChartJS add custom tooltip to a stacked bar chart
- chartjs add dots to bars in grouped bar chart
- ChartJS version 3 how to add percentage to pie chart tooltip
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- Grouped Bar Chart ChartJS
- Set fixed label size for grouped bar chart in angular Chartjs
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- Using ChartJS to create a multiple grouped bar chart - see picture below
- Bar chart is not grouped properly in chartjs
- Chartjs Bar Chart add background color to value labels
- Add a click event to the bar chart of chartjs
- How to add vertical line in bar chart using chartJs and ng2-charts?
- Chartjs Bar Chart showing old data when hovering
- Chartjs v2.0: stacked bar chart
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How to modify chartjs tooltip so i can add customized strings in tooltips
- Changing fontFamily on ChartJS bar chart
- chartjs : how to set custom scale in bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chartjs Bar Chart Legend
- show label in tooltip but not in x axis for chartjs line chart
- Add DataSet Bar Chart - Chart.JS
- Click event on stacked bar chart - ChartJs
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- Chart.js - Add gradient to bar chart
- ChartJS bar chart with legend which corresponds to each bar
- ChartJs bar chart - keep bars left instead of equally spread across the width
- Border radius for the bar chart in ChartJS
More Query from same tag
- Is it possible to set the background color of a sector in a radar chart in Chart.js?
- "The radius provided (-0.5) is negative" when used with Modal
- 2 Line Chart with different labels | Chart.js
- Chartjs: Overwrite plot y-axis integer labels to some string value
- Puppeteer with Chart.js
- How to convert UNIX timestamp to date using chart.js?
- chart.js bar chart datalabel vanishes on hovering over chart
- C# How to print html Convas element in PDF document
- OffsetWidth / offsetHeight is zero when template loaded by ngRoute
- Chart.js - Unable to refresh the page
- Importing chart.js to aurelia causes page errors after bunldling
- i want display chart based on selected charts using chartJS
- Uncaught ReferenceError: Chart is not defined in Laravel mix
- Chart.js Dynamically Updating Chart with X Axis Time
- charts.js not loading in Django
- Bars of my chartjs chart has no background color
- ng2-chart tooltip position change option?
- Can't draw pie chart using chartjs - TypeError: Cannot create property '_meta' on number '16'
- Drawing to canvas on click clears text when mouse leaves the chart
- Create PDF with mpdf and chart.js
- How to show stacked and unstacked bar graphs together in Chart.js
- Who knows why I can't plot my chart properly?
- ChartJS bar chart fixed width for dynamic data sets
- chart.js: alternating background-color for ticks
- How to Modify ToolTips in Yii2 using dosamigos\chartjs\ChartJs?
- Make Chart.js ToolTip different then data
- how to show bar value on the top of each bar in chartjs
- Customise size of data points , height and width in Chart.js?
- Chart.js data background color is overwriting point background color
- Automatically show 0 sales for the date which is not in database