Chartjs hide data point labels

Question

I created graph using chartjs. It works fine, only issue is it shows data labels (numbers) on each point. I want to hide them, but cannot find how. Can anyone help me solve this issue ? I tried setting pointRadius = 0, but it did not do what I want.

Also if I can not hide them is there a way I can change their color ?

Chart Image

const ctx = document.getElementById('timelineChart');

        const chartColors = {
            red: '#C82846',
            green: '#7DC36E',
            blue: '#249FBA',
            darkblue: '#249FBA'
        };

        const config = {
            plugins: [new BandsPlugin()],
            type: 'bar',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "April", "May", "June", "July",
                         "January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        borderColor: chartColors.green,
                        fill: false,
                        type: 'line',
                        id: 'y-axis-1',
                        pointRadius: 0,
                        data: [
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor()
                        ],
                    }, {
                        type: 'bar',
                        id: 'y-axis-0',
                        borderWidth: 1,
                        borderColor: chartColors.green,
                        backgroundColor: chartColors.blue,
                        data: [
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor()
                        ],
                        fill: false,
                    }]
            },
            options: {
                pointRadius: 1,
                pointHoverRadius: 1,
                legend: {
                    display: false
                },
                elements: {
                    line: {
                        tension: 0,
                    },
                    point: { radius: 0 }
                },
                responsive: true,
                title: {
                    display: false,
                    text: 'Timeline Chart'
                },
                tooltips: {
                    mode: 'label',
                },
                hover: {
                    mode: 'dataset'
                },
                scales: {
                    xAxes: [{
                        barThickness: 15,
                        display: true,
                        scaleLabel: {
                            show: false,
                            labelString: 'Month'
                        },
                        ticks: {
                            beginAtZero: true
                        },
                        afterTickToLabelConversion: function (data) {


                            const xLabels = data.ticks;

                            xLabels.forEach(function (labels, i) {
                                if (i % 2 === 1) {
                                    xLabels[i] = '';
                                }
                            });
                        }
                    }],
                    yAxes: [{
                        id: 'y-axis-0',
                        display: true,
                        position: 'left',
                        scaleLabel: {
                            show: false,
                            labelString: 'Value'
                        },
                        ticks: {
                            suggestedMin: -100,
                            suggestedMax: 100,
                            max: 100,
                            min: 0,
                            stepSize: 100,
                        },
                    },
                    {
                        id: 'y-axis-1',
                        position: 'right',
                        ticks: {
                            suggestedMin: -100,
                            suggestedMax: 100,
                            max: 100,
                            min: -100,
                            stepSize: 100,
                        },
                        scaleLabel: {
                            show: false,
                            labelString: 'Value'
                        },
                    }]
                },
                bands: {
                    yValue: 50,
                    bandLine: {
                        stroke: 0.5,
                        colour: 'black',
                        type: 'dashed',
                    },
                    belowThresholdColour: [
                        chartColors.red,
                        chartColors.blue
                    ]
                }
            }
        };

        const timelineChart = new Chart(ctx, config);

Jacob Hulse Jacob Hulse · Accepted Answer · 2018-09-29T04:12:30

I had the same issue and came across this post. I'm guessing you have datalabels plugin installed (I did). Add this to your chart options:

plugins: {
    datalabels: {
        display: false,
    },
}

Hope this helps

Chartjs hide data point labels

1 Answers