2๐
yAxes: [{
display: true,
gridLines: {
display: false,
},
ticks: {
fontColor: '#fff',<-- Text is currently white, change to black
fontStyle: 'normal',
fontSize: 13,
padding: -170,,<-- set to 0 or remove
},
categoryPercentage: 1.0,
barPercentage: 0.85,
}],/* y-axes ende*/
1๐
Add options as follows in your code
options: {
"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.fillStyle = this.chart.config.options.defaultFontColor;
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
}
});
- [Chartjs]-Chart js how to fill legend box with colour
- [Chartjs]-Can't bind to 'chartType' since it isn't a known property of 'canvas' with angular12
1๐
For horizontal bar charts, you can simply enable the 'mirror'
option:
options: {
scales: {
yAxes: [{
ticks: {
mirror: true //Show y-axis labels inside horizontal bars
}
}]
}
}
Check out the documentation: https://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration
โFlips tick labels around axis, displaying the labels inside the chart
instead of outside. Note: Only applicable to vertical scales.โ
- [Chartjs]-How to change the cursor to a pointer when I hover over a bar in a ChartJS bar chart?
- [Chartjs]-Different gridline steps on chart js line chart
Source:stackexchange.com