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

Question

Это мой код

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 Но когда я попытался создать новую метку массива со значением этого [" ", " "];, мой график потерпел крах.

Answer 1

Вы можете использовать пользовательскую функцию обратного вызова для рендеринга с вашими собственными HTML-тегами и цветами по своему усмотрению. Для получения дополнительных указаний перейдите по ссылке официальной документации.

http://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips

options: { tooltips: { enabled: false, custom: function(tooltipModel) {} } }