score:16
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>
score:0
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>
score:1
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
score:1
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);
Source: stackoverflow.com
Related Query
- Inserting percentage charts.js doughnut
- ChartJS Doughnut Charts Gradient Fill
- Chart.js - Multiple Doughnut Charts on same Canvas
- Multipe doughnut charts on one page with text in center using Chart.js
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- charts js, doughnut chart not rendering tooptips correctly
- Chart js pie or doughnut charts 3 inside instead of 1
- How to show Nested charts Radar chart within Doughnut Chart?
- My charts doesn't work after inserting X-axis
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Add percentage to label badge - doughnut chart.js
- how to change thickness of two doughnut charts in chartjs
- ChartJs - Doughnut Chart - how to remove labels if percentage is less than a limit
- Drawing pie segment percentage in middle of doughnut with chartjs issue
- How to implement concentric doughnut charts in polymer 1.0 using Chart.js?
- getting additional value fields from data source for dx.chartjs doughnut chart
- Force two Chart.js doughnut charts with legends to same size in Bootstrap columns
- How to get 2 doughnut charts in one chart (chartjs)
- How to run Chart.js samples using source code
- Chart.js - In Graph Data for Pie & Doughnut Charts
- how to not repeat code while creating multiple charts in chart js
- Chart.js multiple doughnut charts above pie chart
- How to add text inside the doughnut chart using Chart.js?
- ChartJS Line Charts - remove color underneath lines
- Click events on Pie Charts in Chart.js
- Chart.js 2.0 doughnut tooltip percentages
- How to vary the thickness of doughnut chart, using ChartJs.?
- Chart Js Change Label orientation on x-Axis for Line Charts
- ChartJS: datalabels: show percentage value in Pie piece
- Chart.js Bar graph with percentage values
More Query from same tag
- Charts.js candlestick (Financial Charts) displays half the bar in the beginning and the end
- How do you add custom text to tooltips in charts.js
- Tick label overlaps axis label
- Force display of ticks on xAxes using chartkick gem and chart.js
- AngularJS hide and show a char
- Append second dataset to existing chartjs chart
- Create a weekly line chart (52 labels)
- Polar Area in Chart JS Rotates When Adding Labels
- Single Stacked bar with three sections in Angular
- ChartJS onclick fill area (Radar Chart)
- How do I make a pie chart showing number of people in an age group with JSON and ChartJS?
- How to apply data dynamically on initialisation for chart.js in angular?
- ChatJS 2.8.0 min/max axis issue and labels on the top
- React + Chart.js 2.0: How to put a label inside of a doughnut chart?
- ChartJS passing data dynamically, then passing data into variables
- How to display grouped data in ChartJs
- react-chartjs-2 bar touches the top
- how to set color of label in chartjs?
- Chart.js -- using update() with time scale datasets
- How to change line color based on data - chartist or chart.js
- Chart.js Mouse Over Show Old Chart Data
- Chartjs - onAnimationComplete fires before the animation actually completes
- Chart.js glitches and reverts to previous dataset on hover
- Uncaught (in promise) TypeError: Cannot read property 'length' of undefined in chartjs with Vuejs
- How to handle epic long text at y-axis for angular-chart.js?
- Chart Js - Limit points on graph without limiting data
- Creating a grouped and stacked chart in Chart.js
- chart.js in mvc graph are not show
- ChartJS creating var takes each character and outputs undefined
- Increase space between legend and chart