How to edit my custom tooltips in my line chart using chart.js?

Question

This is my code

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
        }
    }
}
});

My output

My Expected Output

How can I able to put/edit custom tooltip in my line chart? I just want to get the exact tooltips in the second picture but I don't have any idea how to fix it? Another thing is my $nDateI only want to show four dates like 8,15,22,29 But when I tried to create a new array label with value of this [" ", " "]; my chart crashed.

Answer 1

You can use custom callback function to render with your own choice html tags and colors, Follow the official documentation link for further guidance.

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

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