score:6
Accepted answer
Do you have a
var ctx = document.getElementById("myChart");
defined in your code.
UPDATE
Add this code to your options object:
animation: {
onComplete: function () {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
console.log(chartInstance);
var height = chartInstance.controller.boxes[0].bottom;
ctx.textAlign = "center";
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) {
ctx.fillText(dataset.data[index], bar._model.x, height - ((height - bar._model.y) / 2));
}),this)
}),this);
}
}
https://jsfiddle.net/h4p8f5xL/
UPDATE 2
Surround your canvas with a container with your desired width and height
<div style="width: 100%; height: 500px">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
and add the following into your options object
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,
score:6
If you would like to render centered text for each element, there is an easier way:
Chart.helpers.each(meta.data.forEach(function (bar, index) {
var centerPoint = bar.getCenterPoint();
ctx.fillText(dataset.data[index], centerPoint.x, centerPoint.y));
}),this)
It seems that 'getCenterPoint' isn't available in version 2.1.3 (that you use in your example). I tried it with 2.5.0 and it works
Source: stackoverflow.com
Related Query
- 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?
- text inside the bar - chart.js
- How to add text inside the doughnut chart using Chart.js version 3.2.1
- How to add text inside the doughnut chart using Chart.js AngularJS 2.0?
- Chart.js stacked bar chart text on top of the stacked bars
- While placing chart.js Doughnut Chart inside Primeng Carousel, the text inside the canvas seems blurred/distorted a little bit
- chartjs datalabels change font and color of text displaying inside pie chart
- How to add text in centre of the doughnut chart using Chart.js?
- Chart js. How to align text by the center of the tooltip?
- ChartJs bar chart - keep bars left instead of equally spread across the width
- Border radius for the bar chart in ChartJS
- 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
- Grouping the object by key for Chartjs bar chart
- PrimeNg bar chart how to show a label for the y-axis
- Bold text inside doughnut chart (chart.js)
- Chart JS display Data Value on the top of the Bar
- Adding custom text to Bar Chart label values using Chart.js
- Fix the height of Y-Axis of Bar chart in chart.js?
- How to make bar chart animation where all bars grow at the same speed?
- Add a custom label to the top or bottom of a stacked bar chart
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- Lift the bar up from the bottom in bar type chart
- Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- PrimeNg bar chart how do I hide the bar labels?
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- How to use set the color for each bar in a bar chart using chartjs?
- Text inside Doughnut chart using Chart.js and Angular2, Ionic2
More Query from same tag
- How to insert php in data chart.js
- Angular canvas is undefined
- Adding vertical and horizontal scroll to Chart js Bar graph
- Chart.js colors in bar chart not showing
- Chart.Mvc colliding with System.Web.Helpers.Chart
- how to make a chart linked to the C# database?
- Chart.js compress vertical axis on barchart
- How to add an event when clicking a bubble in bubble chart?
- Dynamic multiple charts in chart.js with dynamic data inside them
- How to add commas when showTooltips is false in ChartJS
- How to pass sql query data onto the datasets field of chartjs using nodejs (ejs)
- React JS Chart JS 2 is not hiding the grid lines in the background
- Chart.js how to set start and end values to plot
- Inserting an array in Chart.JS
- Query result into array in Laravel 6
- chartjs-plugin-annotations not displayed in primeNG chart
- Chartjs / Javascript - My function not returning array properly, but console logs okay
- Can't get event from chartjs-annotation-plugin on mouseenter
- Chart.js - get x-axis label (or index) in onHover event
- Manipulating data point in chart.js external tooltip
- Complete border on ChartJS bars
- HTML Canvas Fill Area Under Line
- Chartjs 2: Multi level/hierarchical category axis in chartjs
- Is it possible to change chartjs line value in one column ? No transition
- Chart.js Passing an array starting with 1 instead of 0 problem
- Why is my data on chartjs not starting from the data that it should
- Streaming Real-time data with react and chartjs-plugin-streaming paused
- How I can change the font-family of labels in the bar chart?
- Chart.js not height responsive
- Chartjs not working with d3 from csv source