search

chartjs / chartjs-plugin-datalabels

Chart.js plugin to display labels on data elements
https://chartjs-plugin-datalabels.netlify.app
MIT License
886 stars 483 forks source link

Display Error when using data labels and min and/or max values for the x-axis #414

Open team-moeller opened 8 months ago

team-moeller commented 8 months ago

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.

team-moeller commented 8 months ago

This is the original chart without min and max values for the x-axis: image The datalables are shown at the beginning and the color is red.

team-moeller commented 8 months ago

This is the chart with values for min and max for the x-axis: image One can see the number "3" at the left side and the numbers 6, 9 and 4 on the right side.

team-moeller commented 8 months ago

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>
team-moeller commented 8 months ago

This issue is related to this one: https://github.com/team-moeller/better-access-charts/issues/170