chartjs mixed type display want to set value on top of each bar
by lemon kazi
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas" style="display: none;"></canvas>
<div id="createPNGButton" style="display: none;">
<button>Save as Image</button>
</div>
<input type="hidden" name="input_camera_passport" id="input_camera_passport" />
<!-- <a href="#" id="downloader" onclick="download()" download="image.png">Download!</a> -->
<img id="url" />
<script>
$imageContent = file_get_contents($img_base64_encoded);
$path = tempnam(sys_get_temp_dir(), 'prefix');
file_put_contents ($path, $imageContent);
$htmlContent = '<img src="' . $path . '">';
// Convert canvas to image
document.getElementById('createPNGButton').addEventListener("click", function(e) {
var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL("image/png", 1.0);
$('#input_camera_passport').val(dataURL);
document.getElementById("downloader").href = dataURL;
//downloadImage(dataURL, 'my-canvas.png');
});
// Save | Download image
//function downloadImage(data, filename = 'untitled.png') {
//var a = document.createElement('a');
//document.getElementById("downloader").href = dataURL;
//document.getElementById("downloader").download = filename;
//document.body.appendChild(a);
//a.click();
//}
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'
...