How to not show the 0 value on tooltip, look the current function to show tooltip:
animation: {
onComplete: function () {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
ctx.textAlign = "center";
ctx.font = "20px Arial";
ctx.fillStyle = "white";
Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
Chart.helpers.each(meta.data.forEach(function (bar, index) {
ctx.save();
ctx.translate(bar._model.x - 10, bar._model.y - 19);
ctx.rotate(-0.5 * Math.PI);
ctx.fillText(dataset.data[index], 0, 0);
ctx.restore();
}),this)
}),this);
}
}
support
gabrieldesouza
All 9 comments
@gabrieldesouza I think you can do:
animation: {
onComplete: function () {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
ctx.textAlign = "center";
ctx.font = "20px Arial";
ctx.fillStyle = "white";
Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
Chart.helpers.each(meta.data.forEach(function (bar, index) {
if (chartInstance.data.datasets[i].data[index] !== 0) {
ctx.save();
ctx.translate(bar._model.x - 10, bar._model.y - 19);
ctx.rotate(-0.5 * Math.PI);
ctx.fillText(dataset.data[index], 0, 0);
ctx.restore();
}
}),this)
}),this);
}
}
etimberg
on 20 Jul 2016
👍1
@etimberg Thanks so much :), but this hide all of the data bar graph
gabrieldesouza
on 20 Jul 2016
You mean no text shows up?
etimberg
on 21 Jul 2016
@etimberg yup hide all my top bar values no just the zero
gabrieldesouza
on 21 Jul 2016
not sure why that would be. did it crash or something?
Edit: try this instead
animation: {
onComplete: function () {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
ctx.textAlign = "center";
ctx.font = "20px Arial";
ctx.fillStyle = "white";
Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
Chart.helpers.each(meta.data.forEach(function (bar, index) {
if (dataset.data[index] !== 0) {
ctx.save();
ctx.translate(bar._model.x - 10, bar._model.y - 19);
ctx.rotate(-0.5 * Math.PI);
ctx.fillText(dataset.data[index], 0, 0);
ctx.restore();
}
}),this)
}),this);
}
}
@etimberg
Look with the code:
animation: {
onComplete: function () {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
ctx.textAlign = "center";
ctx.font = "20px Arial";
ctx.fillStyle = "white";
Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
Chart.helpers.each(meta.data.forEach(function (bar, index) {
ctx.save();
ctx.translate(bar._model.x - 10, bar._model.y - 19);
ctx.rotate(-0.5 * Math.PI);
ctx.fillText(dataset.data[index], 0, 0);
ctx.restore();
}),this)
}),this);
}
}
I have this: https://s31.postimg.org/smt6jfy0r/image.jpg
Now with you code
animation: {
onComplete: function () {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
ctx.textAlign = "center";
ctx.font = "20px Arial";
ctx.fillStyle = "white";
Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
Chart.helpers.each(meta.data.forEach(function (bar, index) {
if (chartInstance.data.datasets[i].data[index] !== 0) {
ctx.save();
ctx.translate(bar._model.x - 10, bar._model.y - 19);
ctx.rotate(-0.5 * Math.PI);
ctx.fillText(dataset.data[index], 0, 0);
ctx.restore();
}
}),this)
}),this);
}
}
This It happened: https://s31.postimg.org/g9vynm37f/image.jpg
This is all my code:
<html>
<head>
<title>Bar Chart</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/Chart.js"></script>
<script src="js/Chart.Annotation.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
body {
background-color: #000;
}
</style>
</head>
<body>
<center> <div id="container" style="width: 100%;">
<canvas id="canvas"></canvas>
<br />
</div> </center>
<script>
Chart.defaults.global.defaultFontColor = '#fff';
Chart.defaults.global.defaultFontSize = 25;
Chart.defaults.global.title.fontSize = 55;
Chart.plugins.register({
beforeDatasetsDraw: function(chartInstance) {
var ctx = chartInstance.chart.ctx;
var chartArea = chartInstance.chartArea;
ctx.save();
ctx.beginPath();
ctx.rect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
ctx.clip();
},
afterDatasetsDraw: function(chartInstance) {
chartInstance.chart.ctx.restore();
}
});
var barChartData = {
labels: ["05CO", "20CT", "22DV", "23CF", "24DB", "25RC", "27PR", "30PI", "40RC", "50CST", "70EC", "80RV"],
datasets: [{
type: 'bar',
label : 'FAB01',
backgroundColor: "rgba(39,62,216,1)",
borderColor: "rgba(39,62,216,1)",
data: [266.0, 163.0, 153.0, 157.0, 113.0, 115.0, 135.0, 80.0, 148.0, 186.0, 153.0, 8.0]
},
{
type: 'bar',
label : 'FAB03',
backgroundColor: "rgba(255,206,0,1)",
borderColor: "rgba(255,206,0,1)",
data: [0, 12.0, 12.0, 12.0, 8.0, 7.0, 7.0, 11.0, 0, 0, 0, 0]
},
{
type: 'bar',
label : 'FAB04',
backgroundColor: "rgba(8,227,0,1)",
borderColor: "rgba(8,227,0,1)",
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
{
type: 'bar',
label : 'FAB05',
backgroundColor: "rgba(255,244,0,1)",
borderColor: "rgba(255,244,0,1)",
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 61.0]
},
{
type: 'bar',
label : 'FAB06',
backgroundColor: "rgba(253,0,255,1)",
borderColor: "rgba(253,0,255,1)",
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
{
type: 'bar',
label : 'FAB07',
backgroundColor: "rgba(116,47,0,1)",
borderColor: "rgba(116,47,0,1)",
data: [0, 5.0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
{
type: 'bar',
label : 'FAB09',
backgroundColor: "rgba(255,255,255,1)",
borderColor: "rgba(255,255,255,1)",
data: [15.0, 525.0, 34.0, 34.0, 34.0, 34.0, 34.0, 34.0, 34.0, 34.0, 559.0, 0]
},
{
type: 'bar',
label : 'FAB11',
backgroundColor: "rgba(153,5,171,1)",
borderColor: "rgba(153,5,171,1)",
data: [0, 0, 26.0, 26.0, 26.0, 26.0, 26.0, 26.0, 26.0, 26.0, 36.0, 100.0]
}
]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
barValueSpacing: 0,
showAllTooltips: true,
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(0, 255, 0)',
borderSkipped: 'bottom'
}
},
scales: {
xAxes: [{
barPercentage: 0.8,
gridLines: {
show: true,
color: "#FF0000"
}
}],
yAxes: [{
gridLines: {
show: true,
color: "#fff",
beginAtZero:false
}
}],
yAxes: [{
display: true,
ticks: {
max: 350,
stepSize: 50
}
}]
},
responsive: true,
legend: {
position: 'top',
},
animation: {
onComplete: function () {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
ctx.textAlign = "center";
ctx.font = "20px Arial";
ctx.fillStyle = "white";
Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
Chart.helpers.each(meta.data.forEach(function (bar, index) {
if (chartInstance.data.datasets[i].data[index] !== 0) {
ctx.save();
ctx.translate(bar._model.x - 10, bar._model.y - 19);
ctx.rotate(-0.5 * Math.PI);
ctx.fillText(dataset.data[index], 0, 0);
ctx.restore();
}
}),this)
}),this);
}
},
title: {
display: true,
text: 'Producao Online'
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '200',
borderColor: 'blue',
borderWidth: 2
},
{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '100',
borderColor: 'brown',
borderWidth: 2
},
{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '50',
borderColor: 'pink',
borderWidth: 2
},
{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '40',
borderColor: 'green',
borderWidth: 2
},
{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '30',
borderColor: 'white',
borderWidth: 2
}, {
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '20',
borderColor: 'yellow',
borderWidth: 2
}]
}
}
});
};
</script>
</body>
</html>
@gabrieldesouza I had a typo in my original solution. I created a test fiddle for you with everything working: https://jsfiddle.net/fhe97L37/
etimberg
on 21 Jul 2016
👍1
Thanks working fine now.
gabrieldesouza
on 21 Jul 2016
👍1
Although the problem is resolved. I have the same scenario and what I did is I replaced '0' with blank ''. And the point is no more on the graph. Thus no more tooltip.
ErPuneetGoel
on 27 Dec 2017
Was this page helpful?
0 / 5 - 0 ratings
Related issues
HeinPauwelyn
·
3Comments
akashrajkn
·
3Comments
nickgoodliff
·
3Comments
longboy
·
3Comments
SylarRuby
·
3Comments