score:8
Accepted answer
This can be achieved using the following tool-tips label callback function ...
tooltips: {
callbacks: {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
var labelsarr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'];
var values = ["AAAA", 100, 10000, 2310, 24420, 30, 50000, 400000, 70000, 700, 823200, 923200, 1111];
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: labelsarr,
datasets: [{
label: 'Amount',
data: values,
backgroundColor: 'rgba(0, 119, 204, 0.8)',
}]
},
options: {
tooltips: {
callbacks: {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
},
scales: {
yAxes: [{
ticks: {
callback: function(value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
Source: stackoverflow.com
Related Query
- Format Chart.JS Data Element To Be Currency
- Chartjs - data format for bar chart with multi-level x-axes
- Chart.js - Line Chart format data to Lacs/Crores
- How do I destroy/update Chart Data in this chart.js code example?
- getting additional value fields from data source for dx.chartjs doughnut chart
- Chart.JS Data Element To Be settled as Euro Currency
- How to save in chart original ID of element in array that is used to build chart data labels?
- Chartjs Bar Chart showing old data when hovering
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS - Draw chart with label by month, data by day
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- line chart with {x, y} point data displays only 2 values
- Chart JS data labels getting cut
- Angularjs - Charts.js: Same chart element doesn't redraw on other view
- Chart.js bar chart is overflowing its containing element
- chart js tooltip how to control the data that show
- Chart.js Timeseries chart - formatting and missing data values
- Chart JS show multiple data points for the same label
- Add all data in the tooltip of Chart JS
- How to display data labels outside in pie chart with lines in ionic
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Show data dynamically in line chart - ChartJS
- ChartJS: Draw vertical line at data point on chart on mouseover
- Chart js data to start at zero
- Chart Js Show the old data on mouse hover
- ChartJs line chart - display permanent icon above some data points with text on hover
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- Chart js shows old data on mouse hover
- React ChartJS 2 : Get data on clicking the chart
- Mouse over on line chart data active other data-set in Chart.js
More Query from same tag
- Overlap horizontalBar graps using ChartJS
- How to make x-axis start from 0 in chart.js graphs?
- How to create an angular 7 component?
- how do I change the textsize in of doughnut in react-chartjs-2?
- How to add conditional logic on Chart.js config?
- How to implement scattered chart using chart.js which is not available by default?
- In react hooks, how can i pass the filtered values to the chart?
- Plot bar graph in reactjs
- Use Ternary Option with Chart.js and AngularJs
- set y-axis scale manually in a bar chart using angular-chart.js
- How to apply data dynamically on initialisation for chart.js in angular?
- Chart.js align line graph to the left
- Bar Chart cannot read data and label in laravel
- ChartJS: Update tooltip
- pan on chart.js also zoom on line charts
- VueJS : How to group by based on response data columns
- Chart.js - add data to line chart from clicking pie chart segment
- Display multiple data into chart.js
- Chart.js v3.2 Change Radar background shape from Polygonal-Triangle to Circular
- Charts.js line chart: Show the most recent date on x-axis when setting ticks.maxTicksLimit
- Chart.js making this chart more readable / scrollable
- How to add new dataset in line chart of chart.js by iterating over dictionary in JavaScript?
- ng2-charts: How to set fixed range for y axis
- Bar values in Chart.js 2.X - dataset.metadata undefined
- How to pass a chart.js chart data object in json from a controller in asp.net mvc
- How can i change a numpy.ndarray to point format with curly brackets - Python 3.7
- Not able to draw Doughnut Chart from json response
- Why Primefaces donutChart is not working?
- Chart js multiple pie chart on one page
- Chart Value of the bar