score:2
you can get the center position of each horizontal bar (inside meta.data loop) as follows :
var barwidth = bar._model.x - bar._model.base;
var centerx = bar._model.base + barwidth / 2;
and after getting the position, draw the count text accordingly...
chart.helpers.each(this.data.datasets.foreach(function(dataset, i) {
var meta = chartinstance.controller.getdatasetmeta(i);
chart.helpers.each(meta.data.foreach(function(bar, index) {
var data = dataset.data[index];
var barwidth = bar._model.x - bar._model.base;
var centerx = bar._model.base + barwidth / 2;
if (i == 0) {
ctx.filltext(data, centerx, bar._model.y + 4);
} else {
ctx.filltext(data, centerx, bar._model.y + 4);
}
}), this);
}), this);
see - live demo
Source: stackoverflow.com
Related Query
- how to align count text center in horizontal bar in the Chart.js?
- Chart js. How to align text by the center of the tooltip?
- How to align Chart.JS line chart labels to the center
- In Stacked horizontal bar chart how to remove the vertical line in 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 )
- How to add text inside the doughnut chart using Chart.js?
- How to set labels align left in Horizontal Bar using chart.js?
- How to add text in centre of the doughnut chart using Chart.js?
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to draw Horizontal line on Bar Chart Chartjs
- Stacked horizontal bar chart along total count with chart.js
- Chart js: how can I align the legend and the title
- PrimeNg bar chart how to show a label for the y-axis
- How to make bar chart animation where all bars grow at the same speed?
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How to change Chart.js horizontal bar chart Width?
- PrimeNg bar chart how do I hide the bar labels?
- ChartJS: how to make a bar chart with a horizontal guideline:
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How to use set the color for each bar in a bar chart using chartjs?
- How to add text inside the doughnut chart using Chart.js version 3.2.1
- How to rotate the Label text in doughnut chart slice vertically in chart.js canvas, Angular 12?
- How do I create a stacked horizontal bar chart with Chart.js in React?
- how to pass the value of input to my bar chart
- How to show the chartjs bar chart data values labels as text?
- chartjs 2.7 how to add labels in center of horizontal bar graph
- How to add labels on top of the chart bar with Chart.js 2
- How to add text inside the doughnut chart using Chart.js AngularJS 2.0?
- How to remove the extra Y axis from a bar chart in chart.js
More Query from same tag
- Prevent label of another data from being toggled whenever a label from one data is toggled
- How to dynamically link json data to chart.js
- Chart JS not reloading in Partial View
- Values on Y-axis disappear (hide under labels)
- Artefacts when showing compact vertical bar chart in chart.js
- Adding additional properties to a Chart JS dataset
- Chart.js time object labels not updating correctly
- ng2-charts / chart.js - How to set doughnut/pie chart color on specific labels programatically?
- Bootstrap Card Render Problem in Google Chrome
- Chart.JS multiple plugins do not operate
- Charts on Admin-on-rest
- How to use two datasets in chart.js doughnut chart?
- Chartjs: Bar width
- Chart.js - if there is not value show 0
- Chart JS Show HTML in Tooltip
- chart.js automatic x axis distributed in time milliseconds
- ChartJS: Show all labels of a mixed chart in the tooltip
- Add percentage to label badge - doughnut chart.js
- Chartjs + moment() not displaying on django
- Chart.js - loading multiple charts with draggable datapoints into a single HTML Page
- How to remove the unnecessary overlaying gridlines using Chart.js?
- Change Chartjs Legend Icon Style
- Hide gridlines in chartjs without the drawTicks
- How do I destroy/update Chart Data in this chart.js code example?
- Why is my chart not working? What am I missing
- Async showing data in pieChart from chart.js with typescript
- Reading converted rss to json file with chart.js not working
- Creating a stacked budget Vs Actual chart
- Chartjs custom dynamic legend overflowing
- Chart.js not appearing in tabs