Как редактировать пользовательские всплывающие подсказки на линейной диаграмме с помощью chart.js?

Это мой код

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [{{ $nDate }}],
            datasets: [{
                label: 'All Users',
                data: [ {{ $nUser }} ],
                backgroundColor: ['rgba(54, 162, 235, 0.2)'],
                borderColor: ['rgba(54, 162, 235, 1)'],
                borderWidth: 3,
                lineTension: 0,
                labelFontSize : '16',
            }]
        },
 options: {
    tooltips: {
        mode: 'index',
        intersect: false,
        position: 'nearest'
    },
    responsive: false,
    legend: { display: false },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
                type: 'category',
                labelOffset: 10,
                stepSize:250,
                callback: function(value, index) {
                if (value !== 0) return value;
                }
            },
            gridLines:{
                drawBorder:false
            }
        }],
        xAxes: [{
            gridLines: {
                display: false,
            },
        }],
    },
    plugins:{
        datalabels:{
            display:false
        }
    }
}
});

Мой результат

Мой ожидаемый результат

Как я могу добавить / отредактировать пользовательскую всплывающую подсказку на линейной диаграмме? Я просто хочу получить точные подсказки на втором рисунке, но я не знаю, как это исправить? Еще одна вещь - мой $nDate. Я хочу показать только четыре даты, например 8,15,22,29. Но когда я попытался создать новую метку массива со значением этого [" ", " "];, моя диаграмма разбилась.