chart.js

Remove the label in the black selection

Goal:
Remove the icon, and the text (black selection from the picture). I want only to show the bar chart and no interaction with the cursor.

Problem:
is it possible to do it based on the source code?

Other:
https://jsbin.com/kezoyaqoru/edit?html,output

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <style>

    </style>
    <title>Chart</title>
</head>

<body>
    <div>
        <canvas id="myChart"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
    <script>
        const ctx = document.getElementById('myChart');     
        const data = [10, 12, 14, 20, 16, 11];
           
        Chart.register(ChartDataLabels);
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
                datasets: [{
                    label: `testtesttest`,
                    data: data,
                    borderWidth: 0,
                    backgroundColor: 'blue',
                    borderColor: 'blue'
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'testtesttest',
                        color: 'black',
                        font: {
                            weight: 'bold',
                            size: 13
                        }
                    },
                    datalabels: {
                        anchor: 'end',
                        align: 'end',
                        color: 'black',
                        font: {
                            weight: '',
                        },
                        formatter: function (value, context) {
                            return value;
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>

remove the black mark selection

Googling but not finding the answer

Solution

  • Please Use this piece of Code it hide the legend from bar:

    options: {

    options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false // Hide the legend
                },
                tooltip: {
                    enabled: false // Disable tooltips
                }
            },
            hover: {
                mode: null // Disable hover interaction
            }

    }
    }