ChartJS - Show values in the center of each bar - javascript

See image below, I'm trying to set the value of each bar in the center of my stacked bar; so far I only got on the top and sometimes the position is off (see the 4% yellow in the third bar)
This is the code:
context.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
var textY = model.y + 50;
if ((scale_max - model.y) / scale_max >= 0.5)
textY = model.y + 20;
fadeIn(ctx, dataset.data[i], model.x, textY, model.y > topThreshold, step);
}
});
var fadeIn = function(ctx, obj, x, y, black, step) {
var ctx = modifyCtx(ctx);
var alpha = 0;
ctx.fillStyle = black ? 'rgba(' + outsideFontColor + ',' + step + ')' : 'rgba(' + insideFontColor + ',' + step + ')';
ctx.fillText(obj.toString() + "%", x, y);
};

This can be done with the Plugin Core API. The API offers different hooks that may be used for executing custom code (that's probably what you already do). In your case, you can use the afterDraw hook as follows to draw text at the desired positions.
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = "12px Arial";
let xAxis = chart.scales['x-axis-0'];
let yAxis = chart.scales['y-axis-0'];
let datasets = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden);
xAxis.ticks.forEach((value, xIndex) => {
let x = xAxis.getPixelForTick(xIndex);
datasets.forEach((dataset, iDataset) => {
if (dataset.data[xIndex] > 3) {
let yValue = datasets.slice(0, iDataset)
.map(ds => ds.data[xIndex])
.reduce((a, b) => a + b, 0) +
dataset.data[xIndex] / 2;
let y = yAxis.getPixelForValue(yValue);
ctx.fillStyle = dataset.textColor;
ctx.fillText(dataset.data[xIndex] + '%', x, y);
}
});
});
ctx.restore();
}
Please take a look at below runnable code and see how it works.
const chart = new Chart('myChart', {
type: 'bar',
plugins: [{
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = "12px Arial";
let xAxis = chart.scales['x-axis-0'];
let yAxis = chart.scales['y-axis-0'];
let datasets = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden);
xAxis.ticks.forEach((value, xIndex) => {
let x = xAxis.getPixelForTick(xIndex);
datasets.forEach((dataset, iDataset) => {
if (dataset.data[xIndex] > 3) {
let yValue = datasets.slice(0, iDataset)
.map(ds => ds.data[xIndex])
.reduce((a, b) => a + b, 0) +
dataset.data[xIndex] / 2;
let y = yAxis.getPixelForValue(yValue);
ctx.fillStyle = dataset.textColor;
ctx.fillText(dataset.data[xIndex] + '%', x, y);
}
});
});
ctx.restore();
}
}],
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [{
label: 'Dataset 1',
data: [2.5, 48, 9, 17, 23],
backgroundColor: 'red',
textColor: 'white'
}, {
label: 'Dataset 2',
data: [2.5, 4, 4, 11, 11],
backgroundColor: 'orange',
textColor: 'black'
}, {
label: 'Dataset 3',
data: [95, 48, 87, 72, 66],
backgroundColor: 'green',
textColor: 'white'
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="160"></canvas>

Related

How to draw the stroke behind bars in Chart.js?

I've wrote a custom Bar Chart in Chart.JS which on dataset hover highlight the bars by drawing a stroke on it the issue is that stroke is drawn over bars while i would make it something like 'background color' instead.
Like the bars are visible because the stroke color opacity is set to 0.05 while if i set it to 1 obviously those will not be visible anymore.
The code
class CustomBar extends Chart.BarController {
draw() {
super.draw(arguments);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
const points = this.chart.tooltip._active[0];
const ctx = this.chart.ctx;
const x = points.element.x;
const topY = points.element.y + 150;
const width = points.element.width;
const bottomY = 0;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY * 100);
ctx.lineTo(x + width * 1.3, bottomY);
ctx.lineWidth = width * 4.3;
ctx.strokeStyle = 'rgba(0, 0, 0, 0.05)';
ctx.stroke();
ctx.restore();
}
}
}
CustomBar.id = 'shadowBar';
CustomBar.defaults = Chart.BarController.defaults;
Chart.register(CustomBar);
You will need a custom plugin for this, in there you can specify that you want it to draw before the datasets are being drawn. You can do that like so:
Chart.register({
id: 'barShadow',
beforeDatasetsDraw: (chart, args, opts) => {
const {
ctx,
tooltip,
chartArea: {
bottom
}
} = chart;
if (!tooltip || !tooltip._active[0]) {
return
}
const point = tooltip._active[0];
const element = point.element;
const x = element.x;
const topY = -(element.height + 150);
const width = element.width;
const bottomY = 0;
const xOffset = opts.xOffset || 0;
const shadowColor = opts.color || 'rgba(0, 0, 0, 1)';
ctx.save();
ctx.beginPath();
ctx.fillStyle = shadowColor;
ctx.fillRect(x - (element.width / 2) + xOffset, bottom, width * 1.3 * 4.3, topY);
ctx.restore();
}
});
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'pink'
}
]
},
options: {
plugins: {
barShadow: {
xOffset: -10,
color: 'red'
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

Draw a horizontal and vertical line on mouse hover in chart js

I am stuck with a problem on chart js while creating line chart. I want to create a chart with the specified data and also need to have horizontal and vertical line while I hover on intersection point. I am able to create vertical line on hover but can not find any solution where I can draw both the line. Here is my code to draw vertical line on hover.
window.lineOnHover = function(){
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.legend.bottom,
bottomY = this.chart.chartArea.bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 1;
ctx.setLineDash([3,3]);
ctx.strokeStyle = '#FF4949';
ctx.stroke();
ctx.restore();
}
}
});
}
//create chart
var backhaul_wan_mos_chart = new Chart(backhaul_wan_mos_chart, {
type: 'LineWithLine',
data: {
labels: ['Aug 1', 'Aug 2', 'Aug 3', 'Aug 4', 'Aug 5', 'Aug 6', 'Aug 7', 'Aug 8'],
datasets: [{
label: 'Series 1',
data: [15, 16, 17, 18, 16, 18, 17, 14, 19, 16, 15, 15, 17],
pointRadius: 0,
fill: false,
borderDash: [3, 3],
borderColor: '#0F1731',
// backgroundColor: '#FF9CE9',
// pointBackgroundColor: ['#FB7BDF'],
borderWidth: 1
}],
// lineAtIndex: 2,
},
options: {
tooltips: {
intersect: false
},
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true
},
ticks: {
fontColor: '#878B98',
fontStyle: "600",
fontSize: 10,
fontFamily: "Poppins"
}
}],
yAxes: [{
display: true,
stacked: true,
ticks: {
min: 0,
max: 50,
stepSize: 10,
fontColor: '#878B98',
fontStyle: "500",
fontSize: 10,
fontFamily: "Poppins"
}
}]
},
responsive: true,
}
});
my output of the code is as follow in WAN MoS Score graph --
So I want to have an horizontal line with the same vertical line together when I hover on the intersection (plotted) point..
Please help my guys..Thanks in advance.
You can just add a second draw block for the y coordinate that you get from the tooltip, first you move to the left of the chartArea that you can get the same way you got bottom and top and then you move to the right on the same Y
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
y = activePoint.tooltipPosition().y,
topY = this.chart.legend.bottom,
bottomY = this.chart.chartArea.bottom,
left = this.chart.chartArea.left,
right = this.chart.chartArea.right;
// Set line opts
ctx.save();
ctx.lineWidth = 1;
ctx.setLineDash([3, 3]);
ctx.strokeStyle = '#FF4949';
// draw vertical line
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.stroke();
// Draw horizontal line
ctx.beginPath();
ctx.moveTo(left, y);
ctx.lineTo(right, y);
ctx.stroke();
ctx.restore();
}
}
});
var options = {
type: 'LineWithLine',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
Edit:
You should use a custom plugin for this since you dont draw everytime you move the cursor and you can enforce this by using a custom plugin:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
corsair: {
dash: [2, 2],
color: 'red',
width: 3
}
}
},
plugins: [{
id: 'corsair',
afterInit: (chart) => {
chart.corsair = {
x: 0,
y: 0
}
},
afterEvent: (chart, evt) => {
const {
chartArea: {
top,
bottom,
left,
right
}
} = chart;
const {
x,
y
} = evt;
if (x < left || x > right || y < top || y > bottom) {
chart.corsair = {
x,
y,
draw: false
}
chart.draw();
return;
}
chart.corsair = {
x,
y,
draw: true
}
chart.draw();
},
afterDatasetsDraw: (chart, _, opts) => {
const {
ctx,
chartArea: {
top,
bottom,
left,
right
}
} = chart;
const {
x,
y,
draw
} = chart.corsair;
if (!draw) {
return;
}
ctx.lineWidth = opts.width || 0;
ctx.setLineDash(opts.dash || []);
ctx.strokeStyle = opts.color || 'black'
ctx.save();
ctx.beginPath();
ctx.moveTo(x, bottom);
ctx.lineTo(x, top);
ctx.moveTo(left, y);
ctx.lineTo(right, y);
ctx.stroke();
ctx.restore();
}
}]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
Edit:
Updated answer for v3
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
corsair: {
dash: [2, 2],
color: 'red',
width: 3
}
}
},
plugins: [{
id: 'corsair',
afterInit: (chart) => {
chart.corsair = {
x: 0,
y: 0
}
},
afterEvent: (chart, evt) => {
const {
chartArea: {
top,
bottom,
left,
right
}
} = chart;
const {
event: {
x,
y
}
} = evt;
if (x < left || x > right || y < top || y > bottom) {
chart.corsair = {
x,
y,
draw: false
}
chart.draw();
return;
}
chart.corsair = {
x,
y,
draw: true
}
chart.draw();
},
afterDatasetsDraw: (chart, _, opts) => {
const {
ctx,
chartArea: {
top,
bottom,
left,
right
}
} = chart;
const {
x,
y,
draw
} = chart.corsair;
if (!draw) {
return;
}
ctx.lineWidth = opts.width || 0;
ctx.setLineDash(opts.dash || []);
ctx.strokeStyle = opts.color || 'black'
ctx.save();
ctx.beginPath();
ctx.moveTo(x, bottom);
ctx.lineTo(x, top);
ctx.moveTo(left, y);
ctx.lineTo(right, y);
ctx.stroke();
ctx.restore();
}
}]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>
This is 2022, the current version of ChartJS is 4.0.1. So, I recommend to use this new implementation.
First, let's define a plugin. ChartJS's plugins has an id parameter, in this case less say corsair.
Then we define default variables for our plugin, like width, color and line dash. Additionally, our plugin will have three parameters: x, y, and draw. x and y are the values of the mousemove event and draw represents the inChartArea parameter, this parameter defines if the event occurred inside of the chart area or not.
Finally, we capture the afterDraw hook to draw a vertical and horizontal lines based on the x and y values if the event was triggered inside of the chart area.
ChartJS has various hooks to capture different parts of the chart render cycle.
const plugin = {
id: 'corsair',
defaults: {
width: 1,
color: '#FF4949',
dash: [3, 3],
},
afterInit: (chart, args, opts) => {
chart.corsair = {
x: 0,
y: 0,
}
},
afterEvent: (chart, args) => {
const {inChartArea} = args
const {type,x,y} = args.event
chart.corsair = {x, y, draw: inChartArea}
chart.draw()
},
beforeDatasetsDraw: (chart, args, opts) => {
const {ctx} = chart
const {top, bottom, left, right} = chart.chartArea
const {x, y, draw} = chart.corsair
if (!draw) return
ctx.save()
ctx.beginPath()
ctx.lineWidth = opts.width
ctx.strokeStyle = opts.color
ctx.setLineDash(opts.dash)
ctx.moveTo(x, bottom)
ctx.lineTo(x, top)
ctx.moveTo(left, y)
ctx.lineTo(right, y)
ctx.stroke()
ctx.restore()
}
}
const data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
}
const options = {
maintainAspectRatio: false,
hover: {
mode: 'index',
intersect: false,
},
plugins: {
corsair: {
color: 'black',
}
}
}
const config = {
type: 'line',
data,
options,
plugins: [plugin],
}
const $chart = document.getElementById('chart')
const chart = new Chart($chart, config)
<div class="wrapper" style="width: 98vw; height: 180px">
<canvas id="chart"></canvas>
</div>
<script src="https://unpkg.com/chart.js#4.0.1/dist/chart.umd.js"></script>
I have done exactly this (but vertical line only) in a previous version of one of my projects. Unfortunately this feature has been removed but the older source code file can still be accessed via my github.
The key is this section of the code:
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.legend.bottom,
bottomY = this.chart.chartArea.bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 0.5;
ctx.strokeStyle = '#A6A6A6';
ctx.stroke();
ctx.restore();
}
}
});
Another caveat is that the above code works with Chart.js 2.8 and I am aware that the current version of Chart.js is 3.1. I haven't read the official manual on the update but my personal experience is that this update is not 100% backward-compatible--so not sure if it still works if you need Chart.js 3. (But sure you may try 2.8 first and if it works you can then somehow tweak the code to make it work on 3.1)

How to create a react-chartjs plugin

I have created a plugin for a pie chat. The idea of the plugin is to center the data in the middle of the Doughnut.
const [data1, setData1] = useState()
const [plugins, setPlugins] = useState([])
const dashboardInfo = useSelector((state) => state.dashboardInfo.data);
useEffect(() => {
const xxxNE = dashboardInfo.division ? Object.values(dashboardInfo.division[0]) : [''];
const sikPercentage = xxxNE[1] ? xxxNE[1][0].percentage : ''
const trPercentage = xxxNE[1] ? xxxNE[1][1].percentage : ''
setData1({
labels: [ // legend labels
"SIK: " + sikPercentage + '%',
"TR: " + trPercentage + '%'
],
datasets: [{
label: '# of Votes',
data: [2, 3],
backgroundColor: [
'#fb6340',
'rgba(54, 162, 235, 0.5)',
],
borderColor: ['#fff', '#fff'],
borderWidth: 2,
cutout: '90%',
}]
})
setPlugins([{
beforeDraw: function (chart) {
var width = chart.width,
height = chart.height,
ctx = chart.ctx;
ctx.restore();
var fontSize = (height / 180).toFixed(2);
ctx.font = fontSize + "em Montserrat";
ctx.textBaseline = "top";
ctx.textAlign = 'center';
ctx.fillText(40 + ' / ' + sikPercentage + '%', width / 2, height / 2);
ctx.save();
}
}])
}, [dashboardInfoData, setData1, setPlugins])
return (
<Doughnut
data={data1}
plugins={plugins}
options={{
legend: false,
legendCallback: function (circleData) {
var ul = document.createElement('ul');
var borderColor = circleData.datasets[0].borderColor;
var dataValue = circleData.datasets[0].data;
circleData.data.labels.forEach(function (label, index) {
ul.innerHTML += `
<li>
<span style="background-color: ${borderColor[index]}
";></span> ${label} ${dataValue[index]}
</li>
`;
});
return ul.outerHTML;
},
}
}
/>
The issue is that the plugin is not showing the data. Any idea what I am missing ?
Thank you

Chartjs - Insert additional data into chart tooltip

I'm trying to insert additional data into the doughnut chart.
The controller pass to the view an array like this:
[
0 => array:3 [
"profit" => 20
"sex" => array:3 [
0 => 0
1 => 8
2 => 0
]
"count" => 8
]
1 => array:3 [
"profit" => 101.5
"sex" => array:3 [
0 => 4
1 => 4
2 => 0
]
"count" => 8
]
...
]
Using chartjs and the fied profit of all array elements I create this doughnut chart:
But I would customize the content of the tooltip so that the datas of the "sex" fieds are visible. I try with the following code but the varible data contains only the values contained in the chart.
config.options.tooltips.callbacks = {
title: (tooltipItem, data) => {
return data['labels'][tooltipItem[0]['index']];
},
label: (tooltipItem, data) => {
return data['datasets'][0]['data'][tooltipItem['index']];
},
afterLabel: (tooltipItem, data) => {
var dataset = data['datasets'][0];
var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset._meta[4].total) * 100)
return `${percent} %`;
},
backgroundColor: '#FFF',
titleFontSize: 16,
titleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
}
I pass the data in the config object in this way: config.data.datasets[0].data = data.map(el => el.profit);
How do I add more data to the tooltip to get something like this?
This is my code:
function createDonatsChart(ctx, title, data, labels, middleText, type) {
Chart.pluginService.register({
beforeDraw: function(chart) {
if (chart.config.options.elements.center) {
// Get ctx from string
const ctx = chart.chart.ctx;
// Get options from the center object in options
const centerConfig = chart.config.options.elements.center;
const fontStyle = centerConfig.fontStyle || 'Asap';
const txt = centerConfig.text;
const color = centerConfig.color || '#000';
const maxFontSize = centerConfig.maxFontSize || 75;
const sidePadding = centerConfig.sidePadding || 20;
const 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
const stringWidth = ctx.measureText(txt).width;
const elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
// Find out how much the font can grow in width.
const widthRatio = elementWidth / stringWidth;
const newFontSize = Math.floor(30 * widthRatio);
const elementHeight = (chart.innerRadius * 2);
// Pick a new font size so it will not be larger than the height of label.
const fontSizeToUse = Math.min(newFontSize, elementHeight, maxFontSize);
const minFontSize = centerConfig.minFontSize;
const lineHeight = centerConfig.lineHeight || 25;
const 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';
const centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
const centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
ctx.font = `${fontSizeToUse}px ${fontStyle}`;
ctx.fillStyle = color;
if (!wrapText) {
ctx.fillText(txt, centerX, centerY);
return;
}
const words = txt.split(' ');
let line = '';
let lines = [];
// Break words up into multiple lines if necessary
for (let n = 0; n < words.length; n++) {
const testLine = line + words[n] + ' ';
const metrics = ctx.measureText(testLine);
const 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 (let n = 0; n < lines.length; n++) {
ctx.fillText(lines[n], centerX, centerY);
centerY += lineHeight;
}
//Draw text in center
ctx.fillText(line, centerX, centerY);
}
}
});
let config = {
type: 'doughnut',
data: {
datasets: [{
borderColor: '#121212',
borderWidth: 8,
backgroundColor: [
'#49C6E5',
'#EFC7C2',
'#00BD9D',
'#EF476F',
'#FFD166',
]
}],
labels: labels
},
options: {
responsive: true,
tooltips: {
},
legend: {
position: 'top',
onClick: null
},
title: {
display: true,
color: '#6c757d',
text: title,
fontFamily: "'Asap', san-serif",
fontSize: 20,
},
animation: {
animateScale: true,
animateRotate: true,
},
elements: {
center: {
text: middleText,
color: '#6c757d',
fontFamily: "'Asap', san-serif",
sidePadding: 20,
minFontSize: 12,
lineHeight: 25,
}
},
}
};
if ( type == 0 ) {
config.options.events = [];
config.data.datasets[0].data = data;
}
else {
// config.data.datasets[0].data = data.map(el => el.profit);
// config.options.tooltips.enabled = true;
// config.options.tooltips.callbacks = {
// title: (tooltipItem, data) => {
// return data['labels'][tooltipItem[0]['index']];
// },
// label: (tooltipItem, data) => {
// return data['datasets'][0]['data'][tooltipItem['index']];
// },
// afterLabel: (tooltipItem, data) => {
// var dataset = data['datasets'][0];
// var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset._meta[4].total) * 100)
// return `${percent} %`;
// },
// backgroundColor: '#FFF',
// titleFontSize: 16,
// titleFontColor: '#0066ff',
// bodyFontColor: '#000',
// bodyFontSize: 14,
// displayColors: false
// }
config.data.datasets[0].data = data.map(el => el.profit);
}
Chart.defaults.global.defaultFontFamily = 'Asap';
Chart.defaults.doughnut.cutoutPercentage = 80;
new Chart(ctx, config);
}
const data = [
{
count: 8,
profit: 20,
sex: [0, 8, 0]
},
{
count: 8,
profit: 101.5,
sex: [4, 4, 0]
},
{
count: 1,
profit: 12.5,
sex: [1, 0, 0]
},
{
count: 2,
profit: 4,
sex: [2, 0, 0]
},
{
count: 5,
profit: 56.5,
sex: [5, 0, 0]
}
];
createDonatsChart(
document.getElementById('profitPerTarget').getContext('2d'),
'Target (di chi compra)',
data,
['14-17', '18-24', '25-30', '31-40', 'Over 40'],
`Totale ${(data.map(el => el.profit).reduce((a, b) => a + b, 0))} \u20AC`,
1
);
html, body {
background-color: #121212;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="profitPerTarget" height="500" style="padding: 10px"></canvas>
You can use closure in createDonatsChart functions. Set const as const originalData = [...data] and then you can access to data in afterLabel callback (as example):
tooltips: {
callbacks: {
afterLabel: function(tooltipItem, data) {
const sexArray = originalData[tooltipItem['index']].sex
const precent = sexArray.reduce((a, b) => a + b, 0) // your calculation here
return '(' + precent + '%)';
}
}
}
See example in playground: https://jsfiddle.net/denisstukalov/upw6asjm/63/#&togetherjs=3CN0LJDjbl

Chart.JS Error: this.scale is undefined

I'm trying since to days and really new to Chart.js. Everything seems to be clear but now i would like to put a label on top of every single bar.
Trying this i get an error: this.scale is undefined. I got the animation.onComplete Snippet out of the net but it seems i make a mistake. The Chart works fine .. i just don't get the labels on top of the bars. Maybe someone can please help me with this ?!
I also have a line chart with the same problem.
var ctx = document.getElementById("chartA").getContext("2d");
Chart.defaults.global.animation.duration = 2400;
Chart.defaults.global.animation.easing = "easeInOutQuad";
Chart.defaults.global.elements.point.radius = 4;
Chart.defaults.global.elements.point.hoverRadius = 5;
Chart.defaults.global.elements.point.hitRadius = 1;
var chart = new Chart(ctx, {
type: "bar",
data: {
labels: ["A","B","C"],
datasets: [{
label: "Test",
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "#CF2748",
borderWidth: 1,
data: [10,20,30]
}]
},
options: {
tooltips: { mode: 'nearest', intersect: false },
layout: { padding: { left: 20, right: 0, top: 0, bottom: 0 } },
legend: { display: true, position: 'top' },
scales: {
yAxes: [{
ticks: { maxTicksLimit: 9, stepSize: 300, callback: function(value, index, values) { return value+" €"; } }
}]
},
animation: {
onComplete: function () {
var ctx = this.chart.ctx; // this part doesn't work
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor;
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
});
}
}
}
});
Thank you so much
Oliver
Thanks #Jeff I was testing around and get closer.
chart.data.datasets.forEach(function (dataset) {
dataset.data.forEach(function (value) {
ctx.fillText(value, x, y);
});
});
Now i have in "value" the right value. But i need to refer X and Y. Where do i get them? If i change X and Y with static value it works but all values were logically printed on the same space.
There are several issues with your code.
You could rather use the following chart plugin to accomplish the same :
Chart.plugins.register({
afterDatasetsDraw: function(chart) {
var ctx = chart.ctx;
chart.data.datasets.forEach(function(dataset, datasetIndex) {
var datasetMeta = chart.getDatasetMeta(datasetIndex);
datasetMeta.data.forEach(function(meta) {
var posX = meta._model.x;
var posY = meta._model.y;
var value = chart.data.datasets[meta._datasetIndex].data[meta._index];
// draw values
ctx.save();
ctx.textBaseline = 'bottom';
ctx.textAlign = 'center';
ctx.font = '16px Arial';
ctx.fillStyle = 'black';
ctx.fillText(value, posX, posY);
ctx.restore();
});
});
}
});
add this plugin at the beginning of your script.
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
Chart.plugins.register({
afterDatasetsDraw: function(chart) {
var ctx = chart.ctx;
chart.data.datasets.forEach(function(dataset, datasetIndex) {
var datasetMeta = chart.getDatasetMeta(datasetIndex);
datasetMeta.data.forEach(function(meta) {
var posX = meta._model.x;
var posY = meta._model.y;
var value = chart.data.datasets[meta._datasetIndex].data[meta._index];
// draw values
ctx.save();
ctx.textBaseline = 'bottom';
ctx.textAlign = 'center';
ctx.font = '16px Arial';
ctx.fillStyle = 'black';
ctx.fillText(value, posX, posY);
ctx.restore();
});
});
}
});
var ctx = document.getElementById("chartA").getContext("2d");
Chart.defaults.global.animation.duration = 2400;
Chart.defaults.global.animation.easing = "easeInOutQuad";
Chart.defaults.global.elements.point.radius = 4;
Chart.defaults.global.elements.point.hoverRadius = 5;
Chart.defaults.global.elements.point.hitRadius = 1;
var chart = new Chart(ctx, {
type: "bar",
data: {
labels: ["A", "B", "C"],
datasets: [{
label: "Test",
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "#CF2748",
borderWidth: 1,
data: [10, 20, 30]
}]
},
options: {
tooltips: {
mode: 'nearest',
intersect: false
},
layout: {
padding: {
left: 20,
right: 0,
top: 0,
bottom: 0
}
},
legend: {
display: true,
position: 'top'
},
scales: {
yAxes: [{
ticks: {
maxTicksLimit: 9,
stepSize: 300,
callback: function(value, index, values) {
return value + " €";
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chartA"></canvas>

Categories