score:7
You can use the plugin chartjs-datalabels and set the formatter property to set your custom labels.
Created a fiddle for your reference -> http://jsfiddle.net/upmth2cq/1/
Hope it helps!
new Chart(document.getElementById("barChartHeadcount"), {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Billed',
backgroundColor: 'rgb(0, 197, 106)',
data: [56, 63, 67]
}, {
label: 'Unbilled',
backgroundColor: 'rgb(255, 114, 107)',
data: [1, 2, 3]
}]
},
options: {
title: {
display: true,
text: 'Community Headcount'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: false
}],
yAxes: [{
stacked: false
}]
},
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: function(value){
return value + ' (100%) ';
}
}
}
}
});
Source: stackoverflow.com
Related Query
- Adding custom text to Bar Chart label values using Chart.js
- How to custom index label on each bar chart using chartjs?
- Adding a label to a doughnut chart in Chart.js shows all values in each chart
- X-axis multiple colored label for bar chart using chart.js
- Add a custom label to the top or bottom of a stacked bar chart
- Custom label from using separate array in Chart JS
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- angular-chart.js custom color based on chart label values
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- How to set Solid label in bar chart using Chart JS
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Display ellipsis for null or empty values in the bar chart using Chart.js
- How to add label square to Bar Chart using Chart.js
- How to add text inside the doughnut chart using Chart.js?
- Chart Js change text label orientation on Ox axis
- chartjs : how to set custom scale in bar chart
- Overlapping Bar Chart using Chart.js
- How to add text in centre of the doughnut chart using Chart.js?
- How to create stacked bar chart using react-chartjs-2?
- Chart.js bar chart : Grid color and hide label
- using array values in chart.js data and label field
- How to display inline values in a stacked bar chart with Chart.js?
- Chartjs - show elements in all datasets on hover using bar chart
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Remove the label and show only value in tooltips of a bar chart
- set y-axis scale manually in a bar chart using angular-chart.js
- PrimeNg bar chart how to show a label for the y-axis
- Multiple stacked bar chart using ChartJs
- chart.js bar chart x-axis label disappeared
More Query from same tag
- Is there any method to map or represent API data to Chart in ReactJS?
- charts.js chart size it's diferente than container setted size
- How to disable converting decimal number to exponential?
- How to rotate a linear graphic in chart.js?
- Error with Chartjs radar pointLabels color Scriptable
- Chartjs v2.8 showAllTooltips does not exist
- How to fix chart not starting at zero
- how to display multiple sum with chart js and laravel?
- Ajax call to trigger a controller function
- Angular 8 and ng2 charts - Updating labels and data
- Set different color for each bars using ChartJS in Angular 4
- How to add font family to Chart.js V3.7.0
- Show bar with zero value in ChartJs v2
- Loading data into chart on html page
- Run the function on load
- ChartJS non overlapping lines
- ChartJS keeps resizing canvas to the default size
- Chart JS can't access data from array within an object
- increase the label size of a line chart in chart.js
- what is fastest way to draw chartjs charts
- Chart.js reduce canvas size without changing the size of the chart
- How to change the position of the tooltip for the Bar type chart in Chart.Js
- Hiden Gridline in chart JS
- ChartJs Uncaught ReferenceError for labels value from ViewBag
- How to set max and min value for Y axis
- Chart.js onClick function for bar graph
- show name on yaxis in chart.js
- add labels dynamically in Charts.js
- Angular2 + Chart.js and ng2-charts. Data binding not working as expected
- everything i put in the options of the Line charts doesnt work