We Keep Coding

ChartJS rotate label value vertical

I'm using ChartJS to create a bar graph at this JSfiddle.
It is currently showing the value in horizontal as the result shows in the image below.
I'm trying to rotate this value by 90 degree so it displays as
Is there a way to do this via ChartJS options? I tried to play around with HTML5 's ctx.transform() and ctx.rotate() below but no luck so far.
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y + 30);
ctx.save();
ctx.rotate(45 * Math.PI / 180);
});

You can use the translate and rotate properties to rotate the text:
var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [9045645, 4045645, 6045645, 8045645, 5045645, 6045645]
}]
};
var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
showTooltips: false,
onAnimationComplete: function() {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
const lineHeigt = ctx.measureText('M').width;
this.datasets.forEach(function(dataset) {
dataset.bars.forEach(function(bar) {
ctx.save();
ctx.translate(bar.x + (lineHeigt / 3 * 2), bar.y + 30)
ctx.rotate(-Math.PI / 2);
ctx.fillText(bar.value, 0, 0);
ctx.restore();
});
})
}
});
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<canvas id="myChart2" height="300" width="500"></canvas>

Add a step in Y axis to increase chart height Chart JS

I have this Chart JS Bar chart
Here the custom option used to render labels on top, but if the bar is exact size of max Y-axis value the label gets hidden or goes out of chart.
Is there any way to get the label outside of chart or increase Y-axis value?
Code:
var barChart = new Chart(document.getElementById("third_party_chart"), {
type: 'bar',
data: response,
options: {
responsive: true,
legend: {
display: false,
},
"animation": {
"duration": 1,
"onComplete": function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
}
}
});

Add text inside the Doughnut chart of the React-Chartjs-2 box to react

I created a Donut chart, which works correctly but now I need to show the number 45 in the center of this, for example.
Where should I indicate the text to be displayed and the coordinates? In the options of the chart?
I'm using react component
class DoughnutChart extends React.Component {
render() {
const data = {
datasets: [{
data: [],
backgroundColor: [
'#999',
'#eee'
]
}],
text: '45'
};
return (
<Doughnut data={data} />
);
}
};
export default DoughnutChart;
EDIT
I found this plugin, but I cann't find how it applies to the react component
//Plugin for center text
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 160).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "top";
var text = "Foo-bar",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
Thanks for your help.

I tried this and it worked
import { Doughnut } from "react-chartjs-2";
function DoughnutChart() {
const data = {...}
const options = {...}
const plugins = [{
beforeDraw: function(chart) {
var width = chart.width,
height = chart.height,
ctx = chart.ctx;
ctx.restore();
var fontSize = (height / 160).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "top";
var text = "Foo-bar",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}]
return (
<Doughnut
type="doughnut"
data={data}
options{options}
plugins={plugins}
/>
);
}
export default DoughnutChart;

I don't believe React Chart JS has this option available. However, there are custom plugins out there that allow you to insert custom data labels inside of your doughnut charts. Please refer to this documentation on how to accomplish that.
ChartJS Plugin Datalabels

From what I've seen from react-chartjs-2 it only has these properties:
data: (PropTypes.object | PropTypes.func).isRequired,
width: PropTypes.number,
height: PropTypes.number,
id: PropTypes.string,
legend: PropTypes.object,
options: PropTypes.object,
redraw: PropTypes.bool,
getDatasetAtEvent: PropTypes.func,
getElementAtEvent: PropTypes.func,
getElementsAtEvent: PropTypes.func
onElementsClick: PropTypes.func, // alias for getElementsAtEvent (backward compatibility)
Non of them seem to be text you can pass in to show your number in the middle. You can maybe use the legend prop and manipulate the object created for the legend to move it with css or have another div inside your render that displays the number and then style that to be inside the chart.
Another way you may be able to do it is by wrapping the Doughnut component in a div with another child inside that div that contains the text, like so:
return(
<div className='wrapper'>
<div className='chart-number'>{this.state.text}</div>
<Doughnut data={data} />
</div>)
in your css then you will have to figure out how to position the chart-number div in the middle of the wrapper div, which will contain the chart.
If you are just starting to use this library, maybe look for a different one that suits your needs so you don't have to code around it!
Hope this helps :)
EDIT 1:
From what I see, you probably need to connect the Chart.pluginService.register code to your graph object somehow which is the <Doughnut /> component, then it will do the calculation before the redraw.

Here is a simple solution:
Step 01: add this options in your options
options: {
centerText: {
display: true,
text: `90%`
}
.....
.....
Step 02: Create a new method drawInnerText
drawInnerText = (chart) => {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = chart.config.options.centerText.text,
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
Step 03: Invoke drawInnerText
componentWillMount() {
Chart.Chart.pluginService.register({
beforeDraw: function (chart) {
if (chart.config.options.centerText.display !== null &&
typeof chart.config.options.centerText.display !== 'undefined' &&
chart.config.options.centerText.display) {
this.drawInnerText(chart);
}
},
});
}

function DoughnutChart({ data = {} }) {
return (
<Doughnut
data={format(dataObj)}
plugins={[
{
beforeDraw(chart) {
const { width } = chart;
const { height } = chart;
const { ctx } = chart;
ctx.restore();
const fontSize = (height / 160).toFixed(2);
ctx.font = `${fontSize}em sans-serif`;
ctx.textBaseline = 'top';
const { text } = "23";
const textX = Math.round((width - ctx.measureText(text).width) / 2);
const textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
},
},
]}
/>);
}

I tried Jays Answer before but nowadays it doesnt work anymore.
You need to specify an id inside the plugins array.
const plugins = [{
id : 'here comes your id for the specific plugin',
beforeDraw: function(chart) {
var width = chart.width,
height = chart.height,
ctx = chart.ctx;
ctx.restore();
var fontSize = (height / 160).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "top";
var text = "Foo-bar",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}]

I have tried Jay answer and at first it did not work so I had to make some updates to it and now it is working.
const plugins = {[
{
id:"Id here",
beforeDraw:function(chart:any) {
let ctx = chart.ctx;
let xAxis = chart.scales.x;
let yAxis = chart.scales.y;
let maxValue = Math.max(...chart.data.datasets[0].data);
let minValue = Math.min(...chart.data.datasets[0].data);
ctx.save();
ctx.textAlign = 'center';
ctx.font = '14px Roboto';
ctx.fillStyle = 'blue';
ctx.textAlign = 'left';
ctx.fillText('Text1 = ', xAxis.left , yAxis.top + 15);
ctx.fillText('Text2 = ', xAxis.left , yAxis.top + 40);
ctx.fillText(maxValue + '°C', xAxis.left + 200, yAxis.top + 15);
ctx.fillText(minValue + '°C', xAxis.left + 200, yAxis.top + 40);
ctx.restore();
},
},
]}

Chart.js - Positioning Donut Label

I have a web page that is using Chart.js. In this page, I am rendering three donut charts. In the middle of each chart, I want to show the percentage of the donut that is filled. Currently, I have the following code, which can be seen in this Fiddle.
function setupChart(chartId, progress) {
var canvas = document.getElementById(chartId);
var context = canvas.getContext('2d');
var remaining = 100 - progress;
var data = {
labels: [ 'Progress', '', ],
datasets: [{
data: [progress, remaining],
backgroundColor: [
'#8FF400',
'#FFFFFF'
],
borderColor: [
'#8FF400',
'#408A00'
],
hoverBackgroundColor: [
'#8FF400',
'#FFFFFF'
]
}]
};
var options = {
responsive: true,
maintainAspectRatio: false,
scaleShowVerticalLines: false,
cutoutPercentage: 80,
legend: {
display: false
},
animation: {
onComplete: function () {
var xCenter = (canvas.width / 2) - 20;
var yCenter = canvas.height / 2 - 40;
context.textAlign = 'center';
context.textBaseline = 'middle';
var progressLabel = data.datasets[0].data[0] + '%';
context.font = '20px Helvetica';
context.fillStyle = 'black';
context.fillText(progressLabel, xCenter, yCenter);
}
}
};
Chart.defaults.global.tooltips.enabled = false;
var chart = new Chart(context, {
type: 'doughnut',
data: data,
options: options
});
}
The chart "runs". But the problem is with the rendering of the label. The label is not vertically and horizontally centered within the middle of the donut. The position of the label changes based on the screen resolution too. You can see the label change position by resizing the frame that the charts are rendered in within the Fiddle.
My question is, how do I consistently position the percentage in the middle of the donut? My page is a responsive page so, having consistent positioning is important Yet, I'm not sure what else to do. I feel like the textAlign and textBaseline properties aren't working, or I'm misunderstanding their usage.
Thanks!

According to this answer, you could do it with a plugin in a further version. I don't know if you noticed, but if you increase the width and reduce it over and over again on your fiddle, the height of your canvas gets bigger and bigger (the chart goes further and further down).
On the version you are using, you could extend the doughnut controller like this:
http://jsfiddle.net/ivanchaer/cutkqkuz/1/
Chart.defaults.DoughnutTextInside = Chart.helpers.clone(Chart.defaults.doughnut);
Chart.controllers.DoughnutTextInside = Chart.controllers.doughnut.extend({
draw: function(ease) {
var ctx = this.chart.chart.ctx;
var data = this.getDataset();
var easingDecimal = ease || 1;
Chart.helpers.each(this.getDataset().metaData, function(arc, index) {
arc.transition(easingDecimal).draw();
var vm = arc._view;
var radius = (vm.outerRadius + vm.innerRadius) / 2;
var thickness = (vm.outerRadius - vm.innerRadius) / 2;
var angle = Math.PI - vm.endAngle - Math.PI / 2;
ctx.save();
ctx.fillStyle = vm.backgroundColor;
ctx.font = "20px Verdana";
ctx.textAlign = 'center';
ctx.textBaseline = "middle";
var text = data.data[0] + '%';
ctx.fillStyle = '#000';
ctx.fillText(text, $(ctx.canvas).width()/2, $(ctx.canvas).height()/2);
});
ctx.fillStyle = '#fff';
ctx.fill();
ctx.restore();
}
});
function setupChart(chartId, progress) {
var canvas = document.getElementById(chartId);
var context = canvas.getContext('2d');
var remaining = 100 - progress;
var deliveredData = {
labels: [
"Value"
],
datasets: [{
data: [progress, remaining],
backgroundColor: [
'#8FF400',
'#FFFFFF'
],
borderColor: [
'#8FF400',
'#408A00'
],
hoverBackgroundColor: [
'#8FF400',
'#FFFFFF'
]
}]
};
var deliveredOpt = {
cutoutPercentage: 88,
animation: false,
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var chart = new Chart(canvas, {
type: 'DoughnutTextInside',
data: deliveredData,
options: deliveredOpt
});
}
setupChart('standChart', 33);
setupChart('moveChart', 66);
setupChart('exerciseChart', 99);

See this http://jsfiddle.net/uha5tseb/2/
It can be handled with getting width/height of each chart by this reference
onComplete: function (event) {
console.log(this.chart.height);
var xCenter = this.chart.width/2;
var yCenter = this.chart.height/2;
context.textAlign = 'center';
context.textBaseline = 'middle';
var progressLabel = data.datasets[0].data[0] + '%';
context.font = '20px Helvetica';
context.fillStyle = 'black';
context.fillText(progressLabel, xCenter, yCenter);
}
Hope this solves your problem!

You set your variables incorrectly when you get xCenter and yCenter. Currently they don't get the middle of the canvas.
You have:
var xCenter = (canvas.width / 2) - 20;
var yCenter = canvas.height / 2 - 40;
It should be:
var xCenter = (canvas.width / 2);
var yCenter = (canvas.height / 2);

Im not familiar with chart.js, but as far as I understood from the documentation, they provide generateLegend method for your purposes. It returns a data from legendCallback that you can display on the page outside of canvas.
Container of the legend text can be aligned relatively to the canvas's wrapper.
HTML:
<div class="chart" data-legend="">
<canvas id="standChart"></canvas>
</div>
JS:
var container = canvas.parentElement;
...
container.setAttribute('data-legend', chart.generateLegend());
Fiddle

One way to resolve this is by adding an absolutely positioned element on top of the canvas.
You can add a div element after each canvas element and then set its style to:
.precentage {
font-family: tahoma;
font-size: 28px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
Here is a complete JSFiddle.

Inserting percentage charts.js doughnut

i'm, using charts.js librarie and would like to know how could I add some mark to the hole of a doughnut chart (sth like a percentage)-
My js
jQuery(document).ready(function(){
var data = [
{
value: 5,
color:"#A1638C",
highlight: "#BF7AAF",
label: "Días Completados 1/21"
},
{
value: 95,
color: "#07659A",
highlight: "#4190BA",
label: "Días pendientes 20/21"
},
]
var ctx = jQuery("#myChart").get(0).getContext("2d");
var myDoughnutChart = new Chart(ctx).Doughnut(data);
});
My canvas:
<canvas id="myChart" width="264px"></canvas>

The donut chart is centered in the canvas, so you can calculate the center of the donut like this:
// get the canvas element and its context
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
// calculate the center of the canvas (cx,cy)
var cx=canvas.width/2;
var cy=canvas.height/2;
Then you can tell canvas to draw text vertically & horizontally centered around cx,cy like this:
// horizontally align text around the specified point (cx)
ctx.textAlign='center';
// vertically align text around the specified point (cy)
ctx.textBaseline='middle';
// draw the text
ctx.font='14px verdana';
ctx.fillStyle='black';
ctx.fillText("Text Here",cx,cy);
But you must wait for any animations to complete before drawing your centered text.
To do that you must tell ChartJS that you want a callback function triggered when it completes its animation. You can set the callback by setting the onAnimationComplete property of the chart options:
var myDoughnutChart = new Chart(ctx).Doughnut(data, {
responsive : true,
// when ChartJS has completed all animations then call the addText function
onAnimationComplete: addText
});
Here's a demo putting it all together:
var doughnutData = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}, {
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
}, {
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
window.onload = function() {
var canvas = document.getElementById("chart-area");
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true,
onAnimationComplete: addText
});
};
var myDoughnutChart = new Chart(ctx).Doughnut(data);
var myDoughnutChart = new Chart(ctx).Doughnut(doughnutData, {
responsive: true,
onAnimationComplete: addText
});
function addText() {
var canvas = document.getElementById("chart-area");
var ctx = document.getElementById("chart-area").getContext("2d");
var cx = canvas.width / 2;
var cy = canvas.height / 2;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '14px verdana';
ctx.fillStyle = 'black';
ctx.fillText("Text Here", cx, cy);
}
body {
padding: 10px;
margin: 0;
}
#canvas-holder {
width: 30%;
}
canvas {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<div id="canvas-holder">
<canvas id="chart-area" width="500" height="500" />
</div>

Draw method creates the canvas for chart. On hover draw method is called to re-create the chart and show the tool-tip. Text disappears because there is no code to show text inside draw method as we are adding text manually outside of API.
You can achieve this by extending the chart. Follow Docs here.
Following is the example of adding total records at the centre of the
doughnut chart.
Chart.defaults.derivedDoughnut = Chart.defaults.doughnut;
var customDoughnut = Chart.controllers.doughnut.extend({
draw: function(ease) {
Chart.controllers.doughnut.prototype.draw.apply(this, [ease]);
var width = this.chart.chart.width,
height = this.chart.chart.height;
var total = this.getMeta().total;
var fontSize = (height / 114).toFixed(2);
var ctx = this.chart.chart.ctx;
ctx.font = fontSize + "em Verdana";
ctx.textBaseline = "middle";
var text = total,
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
}
});
Chart.controllers.derivedDoughnut = customDoughnut;
Example: jsfiddle

I think the accepted answer does not work, at least for me. Here is my solution:
let canvas = document.getElementById('chart-area');
let ctx = canvas.getContext('2d');
let perc = 25;
const config = {
type: 'doughnut',
data: {
datasets: [{
data: [
perc,
100-perc
],
backgroundColor: [
window.chartColors.green,
window.chartColors.gray
]
}]
},
options: {
responsive: true,
animation: {
animateScale: true,
animateRotate: true,
onComplete : function() {
var cx = canvas.width / 2;
var cy = canvas.height / 2;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '16px verdana';
ctx.fillStyle = 'black';
ctx.fillText(perc+"%", cx, cy);
}
},
}
};
new Chart(ctx, config);

A pure css solution
.overview-total {
position: relative;
.overview-num{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
Html
<div class="overview-total">
<span class="overview-num">140</span>
<canvas baseChart class="chart-size" width="300" height="180"
[plugins]="doughnutChartPluginsSo"
[colors]="doughnutChartColorsSo"
[data]="doughnutChartDataSo"
[labels]="doughnutChartLabelsSo"
[chartType]="doughnutChartTypeSo"
[options]="doughnutChartOptionsSo"></canvas>
</div>