score:19

i've tested one possible solution with chart.js version 2.8.0. it's based on it's scriptable option and on the excellent sample you can find here.

the example below is a simplified and executable html/js code you can test by running its snippet (the button below the code).

the key is the line radius : customradius,, where customradius refers to the function customradius( context ) which is also in the code. that's because radius is a scriptable option.

the function tells the application to make the radius equals to 10 when the index is 3 (label 'd') or the value is equals or greater than 8.

let ctx = document.getelementbyid( 'actual_chart' );
  new chart(
    ctx,
    {
      type   : 'line',
      data   : {
        labels  : [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' ],
        datasets: [
          {
            data: [ 0, 1, 1, 2, 3, 5, 8, 13 ]
          }
        ]
      },
      options: {
        legend  : {
          display: false
        },
        elements: {
          point: {
            radius : customradius,
            display: true
          }
        }
      }
    } );

  function customradius( context )
  {
    let index = context.dataindex;
    let value = context.dataset.data[ index ];
    return index === 3 || value >= 8 ?
           10 :
           2;
  }
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>55468483</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.bundle.min.js"></script>
</head>

<body>
  <canvas id="actual_chart"></canvas>
</body>

</html>

the resulting chart is something like this:

enter image description here

you can find more details on the references in the first paragraph of this answer.

please, let us know if it helped.


Related Query

More Query from same tag