-1👍
✅
I solved it.
here used animation: option to set data value at top of bar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var barChartData = {
labels: ['6/30', '7/31', '8/31'],
datasets: [{
type: 'line',
label: 'line',
borderColor: 'red',
borderWidth: 2,
fill: false,
data: [73.6, 72.0, 71.0],
yAxisID: 'y-axis-2'
},
{
type: 'bar',
label: 'Dataset 2',
backgroundColor: 'blue',
data: [1328, 1380, 1380],
borderColor: 'white',
borderWidth: 2
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: 'yellow',
data: [978, 993, 980],
},
]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Combo Bar Line Chart'
},
tooltips: {
mode: 'label',
intersect: true,
enabled: false
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}],
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines: {
display: false
},
labels: {
show: true,
},
ticks: {
beginAtZero: true,
stepSize: 500,
suggestedMax: 3000
},
},
{
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
display: false
},
labels: {
show: true,
},
ticks: {
stepSize: 10,
min: 0,
max: 100, // Your absolute max value
callback: function(value) {
return (value / 100 * 100).toFixed(0) + '%'; // convert it to percentage
},
},
scaleLabel: {
display: true,
labelString: 'Percentage',
},
}
]
},
hover: {
animationDuration: 0
},
animation: {
duration: 1,
onComplete: function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = "#666";
//ctx.fillStyle = dataset.type == "line" ? "blue" : "black";
this.data.datasets.forEach(function(dataset, i) {
ctx.fillStyle = dataset.type == "line" ? "blue" : "black";
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
if (dataset.type == "line") {
data = data + '%';
}
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
},
});
};
</script>
</body>
</html>👍:0
There is a plugin with exactly the wanted features for the values over your bars, chartjs-plugin-datalabels (Github).
For your percentages on the right yAxis there are many other answers. I recommend this one.
👍:-1
the chart expects data that needs to be shown, rather than a hide/display logic.
you can manually filter out;
let myset = barChartData.datasets
barChartData.datasets = []
for(i = 0;i< myset.length; i++){
if(myset[i].label){
barChartData.datasets.push(myset[i])
}
}