Need help in figuring out config for a custom tooltip

[m-ketan]

I'm a complete beginner to Chartjs (or any other data visualisation library) and having a hard time figuring out the configuration from the official docs for designing a custom tooltip (line graph) like below:

Current config and looks:

const data = {
  labels: labelsArray,
  datasets: [
    {
      fill: false,
      lineTension: 0,
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: '#006fc9',
      borderWidth: 1,
      borderCapStyle: 'round',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(0, 111, 201, 0.23)',
      pointHoverBorderColor: 'rgba(0, 109, 197, 0.45)',
      pointHoverBorderWidth: 1,
      pointRadius: 0,
      pointHitRadius: 10,
      data: leadsArr,
    }
  ]
};

const options = {
  maintainAspectRatio: false,
  responsive: true,
  legend: {
    display: false
  },
  scales: {
    xAxes: [{
      gridLines: {
        display: false
      },
      scaleLabel: {
        display: true,
        labelString: 'Time'
      }
    }],
    yAxes: [{
      ticks: {
        stepSize: 20,
        beginAtZero: true
      },
      gridLines: {
        drawBorder: false
      },
      scaleLabel: {
        display: true,
        labelString: 'Leads',
      }
    }]
  },
  tooltips: {
    mode: 'index',
    backgroundColor: 'rgba(255,255,255)',
    borderColor: 'rgb(0, 0, 0)',
    borderWidth: 0.3,
    cornerRadius: 0,
    caretSize: 0,
    xPadding: 70,
    yPadding: 25,
    titleFontColor: 'rgba(0, 0, 0, 0.87)',
    titleFontSize: 10,
    titleFontFamily: 'Roboto',
    bodyFontFamily: 'Roboto',

  }
};

Please suggest some config which helps in achieving the above tooltip, thanks!