javascript

Hide title label of datasets in Chart.js

To remove or hide datasets label in Chart.js you can set legend display property to false.

options: {
    plugins: {
        legend: {
            display: false
        }
    }
}

If you are using the Chart.js library to plot your charts then you can use the above code to hide the default dataset label shown on the top of the charts. In the new version of Chart.js, you need to assign a display: false inside plugins property of options object.

Full Code Example

The full code example to plot chart without showing datasets label can be found below.

<canvas id="my_chart" width="400" height="200" ></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script>
var ctx = document.getElementById("my_chart").getContext("2d");

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Jan", "Feb", "Mar", "Apr"],
        datasets: [{
            label: "Title on top",
            data: [10, 20, 30, 40]
        }]
    },
    options: {
        plugins: {
            legend: {
                display: false
            }
        }
    }
});
</script>

Was this helpful?