chartjs bar chart x axis code example
Example 1: chartts js 2 y axes label
var canvas = document.getElementById('chart');
new Chart(canvas, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: 'A',
yAxisID: 'A',
data: [100, 96, 84, 76, 69]
}, {
label: 'B',
yAxisID: 'B',
data: [1, 1, 1, 1, 0]
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0
}
}]
}
}
});
Example 2: chartjs horizontal bar data in front
options: {
responsive: true,
maintainAspectRatio: false,
hover: {
animationDuration: 0
},
animation: {
duration: 1,
onComplete: function() {
let chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i)
{
let meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
let data = dataset.data[index];
ctx.fillText(data, bar._model.x + 15 , bar._model.y + 5);
});
});
}
}
},