Display Error when using data labels and min and/or max values for the x-axis #414
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: |
|
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/[email protected]'></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 is related to this one: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: