In my chart, the tooltip displays the values of the barchart. I need the values to display 2 floating points. If there is a value such as 10.11 it displays that value. However, if it's 10.00 it displays 10. I've looked through the documentation and don't see a way to tell chartjs to stop stripping the zeros.
You can do this with a tooltip label callback.
The following runnable code snippet (derived from https://www.chartjs.org/docs/latest/charts/bar.html) rounds the value in the tooltip to two decimal places and always displays two decimal digits.
new Chart(document.getElementById("myChart"), {
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "My Dataset",
"data": [65.11, 59.1, 80, 81.8, 56.577, 55.8477, 40],
"fill": false,
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
"borderWidth": 1
}]
},
"options": {
"tooltips": {
callbacks: {
label: (tooltipItem, data) => {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
return label + ' ' + (Math.round(tooltipItem.yLabel * 100) / 100).toFixed(2);
}
}
},
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
Related
Pretty much the title, I have a bar chart that is working well but I would like to add an animation that changes color of a specific bar then changes back to the original color but cant figure out how to do it. I need this to occur only on a specific bar that I pick randomly on set intervals, not on all bars. In other words click listeners are not the solution. Is there a way to achieve this?
You can use setInterval() that repeatedly invokes code where you alternately change the color of a random bar or reset the colors. Also at the end of each cycle, you need to invoke chart.update().
let changeBarColor = true;
setInterval(() => {
if (changeBarColor) {
let i = randomInt(0, bgColors.length - 1);
dataset.backgroundColor[i] = borderColors[i];
} else {
dataset.backgroundColor = bgColors.slice(0);
}
chart.update();
changeBarColor = !changeBarColor;
}, 1000);
Please take a look at below code sample and see how it works in action.
const chart = new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
function randomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const dataset = chart.config.data.datasets[0];
const bgColors = dataset.backgroundColor.slice(0);
const borderColors = dataset.borderColor.slice(0);
let changeBarColor = true;
setInterval(() => {
if (changeBarColor) {
let i = randomInt(0, bgColors.length - 1);
dataset.backgroundColor[i] = borderColors[i];
} else {
dataset.backgroundColor = bgColors.slice(0);
}
chart.update();
changeBarColor = !changeBarColor;
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>
By default Chart.js will display the tool tip at the top of the bar for the bar type of charts.
I am trying to change the default position of the tooltip from the top to the center of the bar.
Which is some thing similar to as shown in the below image.
Appreciate help on this, Thank you.
You need to define a new tooltip position mode as follows:
Chart.Tooltip.positioners.middle = elements => {
let model = elements[0]._model;
return {
x: model.x,
y: (model.base + model.y) / 2
};
};
Further you have to define tooltips within the chart options as follows:
tooltips: {
position: 'middle', // must match the positioner function name defined above
yAlign: null, // to get rid of the pointer
xAlign: 'center'
}
Please take a look at below runnable code snippet and see how it works:
Chart.Tooltip.positioners.middle = elements => {
let model = elements[0]._model;
return {
x: model.x,
y: (model.base + model.y) / 2
};
};
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
},
options: {
tooltips: {
position: 'middle',
yAlign: null,
xAlign: 'center'
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="90"></canvas>
Display the resulting chart in full page mode if the tooltips don't show up in embedded mode.
See attached screenshot with an example with what I'm trying to do.
Basically I want to be able to add custom text on certain yAxis and xAxis lines.
You can use the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw custom text on the canvas.
For positioning your text on x and y, you may use hard coded number of pixels or compute them using the Scale Interface (i.e. function getPixelForValue).
new Chart(document.getElementById('myChart'), {
type: 'bar',
plugins: {
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
ctx.font = "18px Arial";
ctx.fillStyle = "red";
var x = (xAxis.getPixelForValue('May') + xAxis.getPixelForValue('June')) / 2;
ctx.fillText('My custom text here', x, yAxis.getPixelForValue(65));
ctx.fillText('Another custom text here', 30, 15);
ctx.restore();
}
},
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)'],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="110"></canvas>
I've got an html chart using chart.js. I want the user to be able to click on a specific bar in a bar chart that takes them to a url or to another page on the same website. Based on the documentation, I don't see the option, but can I use the 'click' even to trigger javascript that then takes you to a specific url or another page, or is there some other way to do this?
It can be done through an onClick event handler, which indeed is poorly documented.
const labels = ["January", "February", "March", "April", "May", "June", "July"];
const data = [65, 59, 80, 81, 56, 55, 40];
const chart = new Chart(document.getElementById('myChart').getContext('2d'), {
type: "bar",
data: {
labels: labels,
datasets: [{
label: "My First Dataset",
data: data,
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
},
options: {
onClick: event => {
const idx = chart.getElementAtEvent(event)[0]._index;
const url = "https://www.acme.com/details?month=" + labels[idx] + "&value=" + data[idx];
window.open(url, "_blank");
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>
Note that opening a new window through above code snipped is blocked
because the request is made in a sandboxed frame whose 'allow-popups'
permission is not set.
I need to get a chart like this:
I find this example but it uses old version of ChartJs. I try it using v2.0 but I don't get it.
Can someone post a example?
With v2.1.x, you can achieve this using the stacked option
...
options: {
scales:{
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
...
Stack Snippet
var config = {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'line',
label: 'Dataset 2',
data: [-65, -10, -80, -81, -56, -85, 40],
borderColor: 'black',
fill: false
}, {
type: 'bar',
label: 'Dataset 1',
backgroundColor: "red",
data: [65, 0, 80, 81, 56, 85, 40],
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: "blue",
data: [-65, 0, -80, -81, -56, -85, -40]
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
After fiddling forever, I finally got it to work, here's a sample. Somebody please update the docs!
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes 1',
data: [10, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255,99,132,1)'
],
borderWidth: 2
},
{
label: '# of Votes 2',
data: [15, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2
}
]
},
options: {
scales: {
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}],
xAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Just make sure that you provide an array of object(s), not just one object for xAxis and yAxis.
"options": {
"scales": {
"xAxes": [
{
"stacked": true
}
],
"yAxes": [
{
"stacked": true
}
]
}
}