score:42
you have to modify the code like:
in chart.doughnut.defaults
labelfontfamily : "arial",
labelfontstyle : "normal",
labelfontsize : 24,
labelfontcolor : "#666"
and then in function drawpiesegments
ctx.filltext(data[0].value + "%", width/2 - 20, width/2, 200);
see this pull: https://github.com/nnnick/chart.js/pull/35
here is a fiddle http://jsfiddle.net/mayankcpdixit/6xv78/ implementing the same.
score:0
first of all, kudos on choosing chart.js! i'm using it on one of my current projects and i absolutely love it - it does the job perfectly.
although labels/tooltips are not part of the library yet, you may want to take a look at these three pull requests:
and, as cracker0dks mentioned, chart.js uses canvas
for rendering so you may as well just implement your own tooltips by interacting with it directly.
hope this helps.
score:0
i know the answer is old, but maybe someone will come in handy.
the simplest way is to use of onanimationprogress
event.
like this.
var mydoughnutchart = new chart(ctx).doughnut(data, {
onanimationprogress: function() {
const dataset = this.data.datasets[0];
const model = dataset._meta[object.keys(dataset._meta)[0]]?.data[0]?._model;
if (!model) { return; }
// model.x and model.y is the center of the chart
this.ctx.filltext('00%', model.x, model.y);
}
});
score:1
@cmyker, great solution for chart.js v2
one little enhancement: it makes sense to check for the appropriate canvas id, see the modified snippet below. otherwise the text (i.e. 75%) is also rendered in middle of other chart types within the page.
chart.pluginservice.register({
beforedraw: function(chart) {
if (chart.canvas.id === 'doghnutchart') {
let width = chart.chart.width,
height = chart.chart.outerradius * 2,
ctx = chart.chart.ctx;
rewardimg.width = 40;
rewardimg.height = 40;
let imagex = math.round((width - rewardimg.width) / 2),
imagey = (height - rewardimg.height ) / 2;
ctx.drawimage(rewardimg, imagex, imagey, 40, 40);
ctx.save();
}
}
});
since a legend (see: http://www.chartjs.org/docs/latest/configuration/legend.html) magnifies the chart height, the value for height should be obtained by the radius.
score:1
alesana's solution works very nicely for me in general, but like others, i wanted to be able to specify where line breaks occur. i made some simple modifications to wrap lines at '\n' characters, as long as the text is already being wrapped. a more complete solution would force wrapping if there are any '\n' characters in the text, but i don't have time at the moment to make that work with font sizing. the change also centers a little better horizontally when wrapping (avoids trailing spaces). the code's below (i can't post comments yet).
it would be cool if someone put this plug-in on github...
chart.pluginservice.register({
beforedraw: function(chart) {
if (chart.config.options.elements.center) {
// get ctx from string
var ctx = chart.chart.ctx;
// get options from the center object in options
var centerconfig = chart.config.options.elements.center;
var fontstyle = centerconfig.fontstyle || 'arial';
var txt = centerconfig.text;
var color = centerconfig.color || '#000';
var maxfontsize = centerconfig.maxfontsize || 75;
var sidepadding = centerconfig.sidepadding || 20;
var sidepaddingcalculated = (sidepadding / 100) * (chart.innerradius * 2)
// start with a base font of 30px
ctx.font = "30px " + fontstyle;
// get the width of the string and also the width of the element minus 10 to give it 5px side padding
var stringwidth = ctx.measuretext(txt).width;
var elementwidth = (chart.innerradius * 2) - sidepaddingcalculated;
// find out how much the font can grow in width.
var widthratio = elementwidth / stringwidth;
var newfontsize = math.floor(30 * widthratio);
var elementheight = (chart.innerradius * 2);
// pick a new font size so it will not be larger than the height of label.
var fontsizetouse = math.min(newfontsize, elementheight, maxfontsize);
var minfontsize = centerconfig.minfontsize;
var lineheight = centerconfig.lineheight || 25;
var wraptext = false;
if (minfontsize === undefined) {
minfontsize = 20;
}
if (minfontsize && fontsizetouse < minfontsize) {
fontsizetouse = minfontsize;
wraptext = true;
}
// set font settings to draw it correctly.
ctx.textalign = 'center';
ctx.textbaseline = 'middle';
var centerx = ((chart.chartarea.left + chart.chartarea.right) / 2);
var centery = ((chart.chartarea.top + chart.chartarea.bottom) / 2);
ctx.font = fontsizetouse + "px " + fontstyle;
ctx.fillstyle = color;
if (!wraptext) {
ctx.filltext(txt, centerx, centery);
return;
}
var lines = [];
var chunks = txt.split('\n');
for (var m = 0; m < chunks.length; m++) {
var words = chunks[m].split(' ');
var line;
// break words up into multiple lines if necessary
for (var n = 0; n < words.length; n++) {
var testline = (n == 0) ? words[n] : line + ' ' + words[n];
var metrics = ctx.measuretext(testline);
var testwidth = metrics.width;
if (testwidth > elementwidth && n > 0) {
lines.push(line);
line = words[n];
} else {
line = testline;
}
}
lines.push(line);
}
// move the center up depending on line height and number of lines
centery -= ((lines.length-1) / 2) * lineheight;
// all but last line
for (var n = 0; n < lines.length; n++) {
ctx.filltext(lines[n], centerx, centery);
centery += lineheight;
}
}
}
});
score:4
@rap-2-h and @ztuons ch's answer doesn't allow for the showtooltips
option to be active, but what you can do is create and layer a second canvas
object behind the one rendering the chart.
the important part is the styling required in the divs and for the canvas object itself so that they render on top of each other.
var data = [
{value : 100, color : 'rgba(226,151,093,1)', highlight : 'rgba(226,151,093,0.75)', label : "sector 1"},
{value : 100, color : 'rgba(214,113,088,1)', highlight : 'rgba(214,113,088,0.75)', label : "sector 2"},
{value : 100, color : 'rgba(202,097,096,1)', highlight : 'rgba(202,097,096,0.75)', label : "sector 3"}
]
var options = { showtooltips : true };
var total = 0;
for (i = 0; i < data.length; i++) {
total = total + data[i].value;
}
var chartctx = $("#canvas").get(0).getcontext("2d");
var chart = new chart(chartctx).doughnut(data, options);
var textctx = $("#text").get(0).getcontext("2d");
textctx.textalign = "center";
textctx.textbaseline = "middle";
textctx.font = "30px sans-serif";
textctx.filltext(total, 150, 150);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.min.js"></script>
<html>
<body>
<div style="position: relative; width:300px; height:300px;">
<canvas id="text"
style="z-index: 1;
position: absolute;
left: 0px;
top: 0px;"
height="300"
width="300"></canvas>
<canvas id="canvas"
style="z-index: 2;
position: absolute;
left: 0px;
top: 0px;"
height="300"
width="300"></canvas>
</div>
</body>
</html>
here's the jsfiddle: https://jsfiddle.net/68vxqyak/1/
score:7
you can also paste mayankcpdixit's code in onanimationcomplete
option :
// ...
var mydoughnutchart = new chart(ctx).doughnut(data, {
onanimationcomplete: function() {
ctx.filltext(data[0].value + "%", 100 - 20, 100, 200);
}
});
text will be shown after animation
score:7
i create a demo with 7 jqueryui slider and chartjs (with dynamic text inside)
chart.types.doughnut.extend({
name: "doughnuttextinside",
showtooltip: function() {
this.chart.ctx.save();
chart.types.doughnut.prototype.showtooltip.apply(this, arguments);
this.chart.ctx.restore();
},
draw: function() {
chart.types.doughnut.prototype.draw.apply(this, arguments);
var width = this.chart.width,
height = this.chart.height;
var fontsize = (height / 140).tofixed(2);
this.chart.ctx.font = fontsize + "em verdana";
this.chart.ctx.textbaseline = "middle";
var red = $( "#red" ).slider( "value" ),
green = $( "#green" ).slider( "value" ),
blue = $( "#blue" ).slider( "value" ),
yellow = $( "#yellow" ).slider( "value" ),
sienna = $( "#sienna" ).slider( "value" ),
gold = $( "#gold" ).slider( "value" ),
violet = $( "#violet" ).slider( "value" );
var text = (red+green+blue+yellow+sienna+gold+violet) + " minutes";
var textx = math.round((width - this.chart.ctx.measuretext(text).width) / 2);
var texty = height / 2;
this.chart.ctx.fillstyle = '#000000';
this.chart.ctx.filltext(text, textx, texty);
}
});
var ctx = $("#mychart").get(0).getcontext("2d");
var mydoughnutchart = new chart(ctx).doughnuttextinside(data, {
responsive: false
});
score:8
this is based on cmyker's update for chart.js 2. (posted as another answer as i can't comment yet)
i had an issue with the text alignment on chrome when the legend is displayed as the chart height does not include this so it's not aligned correctly in the middle. fixed this by accounting for this in the calculation of fontsize and texty.
i calculated percentage inside the method rather than a set value as i have multiple of these on the page. assumptions are that your chart only has 2 values (otherwise what is the percentage of? and that the first is the one you want to show the percentage for. i have a bunch of other charts too so i do a check for type = doughnut. i'm only using doughnuts to show percentages so it works for me.
text color seems a bit hit and miss depending on what order things run in etc so i ran into an issue when resizing that the text would change color (between black and the primary color in one case, and secondary color and white in another) so i "save" whatever the existing fill style was, draw the text (in the color of the primary data) then restore the old fill style. (preserving the old fill style doesn't seem needed but you never know.)
https://jsfiddle.net/g733tj8h/
chart.pluginservice.register({
beforedraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx,
type = chart.config.type;
if (type == 'doughnut')
{
var percent = math.round((chart.config.data.datasets[0].data[0] * 100) /
(chart.config.data.datasets[0].data[0] +
chart.config.data.datasets[0].data[1]));
var oldfill = ctx.fillstyle;
var fontsize = ((height - chart.chartarea.top) / 100).tofixed(2);
ctx.restore();
ctx.font = fontsize + "em sans-serif";
ctx.textbaseline = "middle"
var text = percent + "%",
textx = math.round((width - ctx.measuretext(text).width) / 2),
texty = (height + chart.chartarea.top) / 2;
ctx.fillstyle = chart.config.data.datasets[0].backgroundcolor[0];
ctx.filltext(text, textx, texty);
ctx.fillstyle = oldfill;
ctx.save();
}
}
});
var data = {
labels: ["red","blue"],
datasets: [
{
data: [300, 50],
backgroundcolor: ["#ff6384","#36a2eb"],
}]
};
chart.pluginservice.register({
beforedraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx,
type = chart.config.type;
if (type == 'doughnut')
{
var percent = math.round((chart.config.data.datasets[0].data[0] * 100) /
(chart.config.data.datasets[0].data[0] +
chart.config.data.datasets[0].data[1]));
var oldfill = ctx.fillstyle;
var fontsize = ((height - chart.chartarea.top) / 100).tofixed(2);
ctx.restore();
ctx.font = fontsize + "em sans-serif";
ctx.textbaseline = "middle"
var text = percent + "%",
textx = math.round((width - ctx.measuretext(text).width) / 2),
texty = (height + chart.chartarea.top) / 2;
ctx.fillstyle = chart.config.data.datasets[0].backgroundcolor[0];
ctx.filltext(text, textx, texty);
ctx.fillstyle = oldfill;
ctx.save();
}
}
});
var mychart = new chart(document.getelementbyid('mychart'), {
type: 'doughnut',
data: data,
options: {
responsive: true,
legend: {
display: true
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.1.6/chart.bundle.js"></script>
<canvas id="mychart"></canvas>
score:11
base on @rap-2-h answer,here the code for using text on doughnut chart on chart.js for using in dashboard like. it has dynamic font-size for responsive option.
html:
<div>text
<canvas id="chart-area" width="300" height="300" style="border:1px solid"/><div>
script:
var doughnutdata = [
{
value: 100,
color:"#f7464a",
highlight: "#ff5a5e",
label: "red"
},
{
value: 50,
color: "#cccccc",
highlight: "#5ad3d1",
label: "green"
}
];
$(document).ready(function(){
var ctx = $('#chart-area').get(0).getcontext("2d");
var mydoughnut = new chart(ctx).doughnut(doughnutdata,{
animation:true,
responsive: true,
showtooltips: false,
percentageinnercutout : 70,
segmentshowstroke : false,
onanimationcomplete: function() {
var canvaswidthvar = $('#chart-area').width();
var canvasheight = $('#chart-area').height();
//this constant base on canvasheight / 2.8em
var constant = 114;
var fontsize = (canvasheight/constant).tofixed(2);
ctx.font=fontsize +"em verdana";
ctx.textbaseline="middle";
var total = 0;
$.each(doughnutdata,function() {
total += parseint(this.value,10);
});
var tpercentage = ((doughnutdata[0].value/total)*100).tofixed(2)+"%";
var textwidth = ctx.measuretext(tpercentage).width;
var txtposx = math.round((canvaswidthvar - textwidth)/2);
ctx.filltext(tpercentage, txtposx, canvasheight/2);
}
});
});
here the sample code.try to resize the window. http://jsbin.com/wapono/13/edit
score:18
you can use css with relative/absolute positioning if you want it responsive. plus it can handle easily the multi-line.
https://jsfiddle.net/mgyp0jkk/
<div class="relative">
<canvas id="mychart"></canvas>
<div class="absolute-center text-center">
<p>some text</p>
<p>some text</p>
</div>
</div>
score:31
this is also working at my end...
<div style="width: 100px; height: 100px; float: left; position: relative;">
<div
style="width: 100%; height: 40px; position: absolute; top: 50%; left: 0; margin-top: -20px; line-height:19px; text-align: center; z-index: 999999999999999">
99%<br />
total
</div>
<canvas id="chart-area" width="100" height="100" />
</div>
score:39
i'd avoid modifying the chart.js code to accomplish this, since it's pretty easy with regular css and html. here's my solution:
html:
<canvas id="productchart1" width="170"></canvas>
<div class="donut-inner">
<h5>47 / 60 st</h5>
<span>(30 / 25 st)</span>
</div>
css:
.donut-inner {
margin-top: -100px;
margin-bottom: 100px;
}
.donut-inner h5 {
margin-bottom: 5px;
margin-top: 0;
}
.donut-inner span {
font-size: 12px;
}
the output looks like this:
score:60
here is cleaned up and combined example of above solutions - responsive (try to resize the window), supports animation self-aligning, supports tooltips
https://jsfiddle.net/cmyker/u6rr5moq/
chart.types.doughnut.extend({
name: "doughnuttextinside",
showtooltip: function() {
this.chart.ctx.save();
chart.types.doughnut.prototype.showtooltip.apply(this, arguments);
this.chart.ctx.restore();
},
draw: function() {
chart.types.doughnut.prototype.draw.apply(this, arguments);
var width = this.chart.width,
height = this.chart.height;
var fontsize = (height / 114).tofixed(2);
this.chart.ctx.font = fontsize + "em verdana";
this.chart.ctx.textbaseline = "middle";
var text = "82%",
textx = math.round((width - this.chart.ctx.measuretext(text).width) / 2),
texty = height / 2;
this.chart.ctx.filltext(text, textx, texty);
}
});
var data = [{
value: 30,
color: "#f7464a"
}, {
value: 50,
color: "#e2eae9"
}, {
value: 100,
color: "#d4ccc5"
}, {
value: 40,
color: "#949fb1"
}, {
value: 120,
color: "#4d5360"
}];
var doughnuttextinsidechart = new chart($('#mychart')[0].getcontext('2d')).doughnuttextinside(data, {
responsive: true
});
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.min.js"></script>
<body>
<canvas id="mychart"></canvas>
</body>
</html>
update 17.06.16:
same functionality but for chart.js version 2:
https://jsfiddle.net/cmyker/ooxdl2vj/
var data = {
labels: [
"red",
"blue",
"yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundcolor: [
"#ff6384",
"#36a2eb",
"#ffce56"
],
hoverbackgroundcolor: [
"#ff6384",
"#36a2eb",
"#ffce56"
]
}]
};
chart.pluginservice.register({
beforedraw: function(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 = "75%",
textx = math.round((width - ctx.measuretext(text).width) / 2),
texty = height / 2;
ctx.filltext(text, textx, texty);
ctx.save();
}
});
var chart = new chart(document.getelementbyid('mychart'), {
type: 'doughnut',
data: data,
options: {
responsive: true,
legend: {
display: false
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/chart.js/2.1.6/chart.bundle.js"></script>
<canvas id="mychart"></canvas>
score:224
none of the other answers resize the text based off the amount of text and the size of the doughnut. here is a small script you can use to dynamically place any amount of text in the middle, and it will automatically resize it.
example: http://jsfiddle.net/kdvuxbtj/
it will take any amount of text in the doughnut sized perfect for the doughnut. to avoid touching the edges you can set a side-padding as a percentage of the diameter of the inside of the circle. if you don't set it, it will default to 20. you also the color, the font, and the text. the plugin takes care of the rest.
the plugin code will start with a base font size of 30px. from there it will check the width of the text and compare it against the radius of the circle and resize it based off the circle/text width ratio.
it has a default minimum font size of 20px. if the text would exceed the bounds at the minimum font size, it will wrap the text. the default line height when wrapping the text is 25px, but you can change it. if you set the default minimum font size to false, the text will become infinitely small and will not wrap.
it also has a default max font size of 75px in case there is not enough text and the lettering would be too big.
this is the plugin code
chart.pluginservice.register({
beforedraw: function(chart) {
if (chart.config.options.elements.center) {
// get ctx from string
var ctx = chart.chart.ctx;
// get options from the center object in options
var centerconfig = chart.config.options.elements.center;
var fontstyle = centerconfig.fontstyle || 'arial';
var txt = centerconfig.text;
var color = centerconfig.color || '#000';
var maxfontsize = centerconfig.maxfontsize || 75;
var sidepadding = centerconfig.sidepadding || 20;
var sidepaddingcalculated = (sidepadding / 100) * (chart.innerradius * 2)
// start with a base font of 30px
ctx.font = "30px " + fontstyle;
// get the width of the string and also the width of the element minus 10 to give it 5px side padding
var stringwidth = ctx.measuretext(txt).width;
var elementwidth = (chart.innerradius * 2) - sidepaddingcalculated;
// find out how much the font can grow in width.
var widthratio = elementwidth / stringwidth;
var newfontsize = math.floor(30 * widthratio);
var elementheight = (chart.innerradius * 2);
// pick a new font size so it will not be larger than the height of label.
var fontsizetouse = math.min(newfontsize, elementheight, maxfontsize);
var minfontsize = centerconfig.minfontsize;
var lineheight = centerconfig.lineheight || 25;
var wraptext = false;
if (minfontsize === undefined) {
minfontsize = 20;
}
if (minfontsize && fontsizetouse < minfontsize) {
fontsizetouse = minfontsize;
wraptext = true;
}
// set font settings to draw it correctly.
ctx.textalign = 'center';
ctx.textbaseline = 'middle';
var centerx = ((chart.chartarea.left + chart.chartarea.right) / 2);
var centery = ((chart.chartarea.top + chart.chartarea.bottom) / 2);
ctx.font = fontsizetouse + "px " + fontstyle;
ctx.fillstyle = color;
if (!wraptext) {
ctx.filltext(txt, centerx, centery);
return;
}
var words = txt.split(' ');
var line = '';
var lines = [];
// break words up into multiple lines if necessary
for (var n = 0; n < words.length; n++) {
var testline = line + words[n] + ' ';
var metrics = ctx.measuretext(testline);
var testwidth = metrics.width;
if (testwidth > elementwidth && n > 0) {
lines.push(line);
line = words[n] + ' ';
} else {
line = testline;
}
}
// move the center up depending on line height and number of lines
centery -= (lines.length / 2) * lineheight;
for (var n = 0; n < lines.length; n++) {
ctx.filltext(lines[n], centerx, centery);
centery += lineheight;
}
//draw text in center
ctx.filltext(line, centerx, centery);
}
}
});
and you use the following options in your chart object
options: {
elements: {
center: {
text: 'red is 2/3 the total numbers',
color: '#ff6384', // default is #000000
fontstyle: 'arial', // default is arial
sidepadding: 20, // default is 20 (as a percentage)
minfontsize: 20, // default is 20 (in px), set to false and text will not wrap.
lineheight: 25 // default is 25 (in px), used for when text wraps
}
}
}
credit to @jenna sloan for help with the math used in this solution.
Source: stackoverflow.com
Related Query
- How to add text inside the doughnut chart using 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?
- How to add text in centre of the doughnut chart using Chart.js?
- How to add image inside the doughnut chart using chart.js?
- How can I add some text in the middle of a half doughnut chart 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 display the labels in doughnut chart using ng2 charts?
- How to add title inside doughnut chart in Angular Chart?
- Text inside Doughnut chart using Chart.js and Angular2, Ionic2
- How to rotate the Label text in doughnut chart slice vertically in chart.js canvas, Angular 12?
- How to display the values inside the pie chart of PrimeNG (chart) using JavaScript or Angular
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
- How to add text inside scatter plot using Chart.js?
- While placing chart.js Doughnut Chart inside Primeng Carousel, the text inside the canvas seems blurred/distorted a little bit
- Chart.js - How to Add Text in the label of the Chart with JavaScript?
- How to vary the thickness of doughnut chart, using ChartJs.?
- How to add an on click event to my Line chart using Chart.js
- Chart js. How to align text by the center of the tooltip?
- How to create single value Doughnut or Pie chart using Chart.js?
- Chart.js - How to Add Text in the Middle of the Chart?
- Bold text inside doughnut chart (chart.js)
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- Add Text to Doughnut Chart - ChartJS
- How to add background color for doughnut mid using chart,js
- Using chart js version 3, how to add custom data to external tooltip?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- how to add percentage value to legend field in pie chart using chart.js
- How to use set the color for each bar in a bar chart using chartjs?
More Query from same tag
- how to display labels at top of charts(chart.js)
- How do I use this new extension for chart.js?
- Linear gradient width using percentage (%) instead of pixels (px)
- ChartJS onclick fill area (Radar Chart)
- ChartJS V3 Radar chart Label Font Size
- How do I remove left-hand numeric values in Bar Chartjs?
- Change Chartjs financial chart yaxis from left to right
- Chart.js multiTooltip Labels in Pie
- Add border to Chart.js tooltips
- How can I change background color of a specific area in my chart's grid using Chart.js and Annotation?
- Chart.js stepSize not working with min
- Charts Area JS v2: How to set units?
- Chart.js using the value of certain data in external json file
- Position tooltip in center of bar
- How to create datasets dynamically for chart.js Line chart?
- Chart.js 2.x: labels displaying over eachother
- Update ChartJS line chart from DynamoDB query
- Make Line Chart Dynamic From JSON File Using Chartjs
- ChartJS tooltip label for pie cart being cut
- Chart Js flickering or switching as i move mouse on canvas
- Chart.js not appearing in tabs
- React COREUI CChart problem not rendering
- Chart.js Version 3: how to set the different color for tick lines and gridlines
- How to use two Y axes in Chart.js v2?
- Multiple charts rendering on top of each other
- Adding custom title in tooltips of chart.js
- ChartJS: Position labels at end of doughnut segment
- Error: "category" is not a registered scale
- Remove Decimal like " [Decimal('1220'), Decimal('160')] "from Django Queryset results
- Show multiple data in a single data in chart.js