Highlight date in Chart.js line graph-CodePudding

I would like to add a marker to highlight a particular date using Chart.js, which I can currently do using a particular index number. In the code below I can highlight the points at 2020-11-17 but only by using the index of 300, rather than referring to the specific date.

Using the customRadius function I can interact with the chart data but unfortunately date information seems to have been stripped at this stage. Nevertheless the Chart itself keeps a record of the dates through use of labels (specifically the X-axis)

How do I corelate index number to the label value?

console.log(context.data.labels);

Returns an error

const but = document.getElementById('myButton');

function customRadius(context)
  { 
    let index = context.dataIndex;
    let value = context.dataset.data[ index ];
    return index === 300 || value >= 1000000 ?
           10 :
           2;
  }

but.addEventListener('click',function() {
    let dates = [];
    let confirmed = [];
    let recovered = [];
    let deaths = [];

    fetch("https://pomber.github.io/covid19/timeseries.json")
    .then(response => response.json())
    .then(data=> {
        data["South Africa"].forEach(o => {
        dates.push(o.date);
        confirmed.push(o.confirmed);
        recovered.push(o.recovered);
        deaths.push(o.deaths);
        })
        new Chart(document.getElementById('myChart'), {
        type: 'line',
        data: {
            labels: dates,
            datasets: [{
                label: 'Confirmed',
                borderColor: 'orange',
                backgroundColor: 'orange',
                fill: 'false',
                data: confirmed
            },
            {
                label: 'Recovered',
                borderColor: 'green',
                backgroundColor: 'green',
                fill: 'false',
                data: recovered
            },
            {
                label: 'Deaths',
                borderColor: 'red',
                backgroundColor: 'red',
                fill: 'false',
                data: deaths
            }
            ]
        },
        options: {
            responsive: true,
                animation: {
                duration:0
                },
            elements: {
                point: {
                    radius : customRadius,
                    display: true
                }
            },                 
            title: {
            display: true,
            text: 'Covid-19 / South Africa'
            }
        }
        });
    });

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>
<button type="button" id="myButton">Click me</button>

<canvas id="myChart" height="100"></canvas>
</body>
</html>

CodePudding user response：

You can access the chart instance itself on which the labels live, changing your function to this will let you access the dates:

function customRadius(context) {
  let index = context.dataIndex;
  let value = context.dataset.data[index];
  const label = context.chart.data.labels[index]
  console.log(label)
  return index === 300 || value >= 1000000 ?
    10 :
    2;
}

Live sample:

const but = document.getElementById('myButton');

function customRadius(context) {
  let index = context.dataIndex;
  let value = context.dataset.data[index];
  const label = context.chart.data.labels[index]
  // console.log(label)
  return label === '2020-11-17' ?
    10 :
    2;
}

but.addEventListener('click', function() {
  let dates = [];
  let confirmed = [];
  let recovered = [];
  let deaths = [];

  fetch("https://pomber.github.io/covid19/timeseries.json")
    .then(response => response.json())
    .then(data => {
      data["South Africa"].forEach(o => {
        dates.push(o.date);
        confirmed.push(o.confirmed);
        recovered.push(o.recovered);
        deaths.push(o.deaths);
      })
      new Chart(document.getElementById('myChart'), {
        type: 'line',
        data: {
          labels: dates,
          datasets: [{
              label: 'Confirmed',
              borderColor: 'orange',
              backgroundColor: 'orange',
              fill: 'false',
              data: confirmed
            },
            {
              label: 'Recovered',
              borderColor: 'green',
              backgroundColor: 'green',
              fill: 'false',
              data: recovered
            },
            {
              label: 'Deaths',
              borderColor: 'red',
              backgroundColor: 'red',
              fill: 'false',
              data: deaths
            }
          ]
        },
        options: {
          responsive: true,
          animation: {
            duration: 0
          },
          elements: {
            point: {
              radius: customRadius,
              display: true
            }
          },
          title: {
            display: true,
            text: 'Covid-19 / South Africa'
          }
        }
      });
    });

});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>

<body>
  <button type="button" id="myButton">Click me</button>

  <canvas id="myChart" height="100"></canvas>
</body>

</html>