Display Error when using data labels and min and/or max values for the x-axis #170
Comments
|
This is the original chart without min and max values for the x-axis: |
|
This is the chart with values for min and max for the x-axis: |
|
When we open the underlying html-code directly in the browser the problem also exists: |
|
This is the underlying html code: <!DOCTYPE html>
<html>
<head>
<title>Chart</title>
<meta charset='utf-8'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors'></script>
<script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0'></script>
<style>
body { margin: 0; padding: 0; }
#container { width: 100%; }
</style>
</head>
<body>
<div id='container'>
<canvas id='myChart'></canvas>
</div>
<script>
Chart.register(window['chartjs-plugin-autocolors']);
Chart.register(ChartDataLabels);
Chart.defaults.animation.duration = 1000;
Chart.defaults.animation.easing = 'linear';
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan','Feb','Mar','Apr','May','Jun',],
datasets: [
{label: 'Dataset1' ,
data: [ 5.5, 4, 7, 2, 5, 6],
borderWidth: 1},
{label: 'Dataset2' ,
data: [ 4, 8, 3, 5, 1, 9],
borderWidth: 1},
{label: 'Dataset3' ,
data: [ 3, 5, 7, 6, 2, 4],
borderWidth: 1}
]
},
options: {
aspectRatio: 1.6,
scales: {
y: {
id: 'first-y-Axis',
display: true,
title: {
display: true,
text: 'Demo y-axis'
}
},
x: {
id: 'first-x-Axis',
display: true,
title: {
display: true,
text: 'Demo x-axis'
},
min: 'Feb' ,
max: 'May'
}
},
plugins: {
title: {
display: true,
position: 'top',
text: 'I love Better Access Charts'
},
subtitle: {
display: false,
},
legend: {
display: true,
position: 'right'
},
datalabels: {
anchor: 'start',
color: 'red',
font: {
size: 16
}
}
}
}
});
</script>
</body>
</html> |
|
This issue was reported to the data labels team: |
|
The user @yannick_xy brought my attention to this video: https://www.youtube.com/watch?v=pbcH5H3mNd4 At minute 09:31 the optimized code is visible: https://www.youtube.com/watch?v=pbcH5H3mNd4&t=591s |
|
With the help of @yannick_xy I got the above solution adapted to better Access Charts. Old Code: datalabels: {
anchor: 'start',
color: 'red',
font: {
size: 16
}
}New Code: datalabels: {
anchor: 'start',
color: (context) => {
const x = context.chart.scales.x;
if (context.dataIndex >= x.min && context.dataIndex <= x.max) {
return 'red';
} else {
return 'transparent';
}
}
} |
|
Released with version 4.10.04 |
When you decide to show data labels and also decide to use min and/or max values for the x-axis there is an error in the display.
The text was updated successfully, but these errors were encountered: