Highlight a particular point in chart JS

Question

enter image description hereI want to highlight a particular point in chartjs and I want x and y axis interception at the data points in chart js .

The point (753.17,126.52) should be high lightened with marker where the rest of the point should not high lightened in the line chart .

Below is the image I want to create a chart as the below .

<apex:page >
  <apex:includeScript value="{!$Resource.Chartjs}"/>
  <script language="JavaScript">
   window.onload = function displayLineChart() {
    var data = {
        labels: [669.426, 669.427,735.618,753.170,801.809],
        datasets: [
            {

                fillColor: "rgb(255,255,255)",
                strokeColor: "rgb(0,0,128,1.0)",
                pointColor: "rgba(176,196,222)",
                borderColor: "lightgreen",



                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [0.00, 50, 100, 126.52, 200]
            },

        ]
    };
    var ctx = document.getElementById("lineChart").getContext("2d");
    var options = { 

            scale: {
   ticks: {
      display: false
   }
}
            };
    var lineChart = new Chart(ctx).Line(data, {

    //Boolean - If we show the scale above the chart data           
    scaleOverlay : false,

    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,

    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : null,
    //Number - The scale starting value
    scaleStartValue : null,

    //String - Colour of the scale line 
    scaleLineColor : "rgba(0,0,0,.1)",

    //Number - Pixel width of the scale line    
    scaleLineWidth : 2,

    //Boolean - Whether to show labels on the scale 
    scaleShowLabels : false,

    //Interpolated JS string - can access value
    scaleLabel : "<%=value%>",

    //String - Scale label font declaration for the scale label
    scaleFontFamily : "'Arial'",

    //Number - Scale label font size in pixels  
    scaleFontSize : 12,

    //String - Scale label font weight style    
    scaleFontStyle : "normal",

    //String - Scale label font colour  
    scaleFontColor : "#666",    

    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : false,

    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",

    //Number - Width of the grid lines
    scaleGridLineWidth : 1, 

    //Boolean - Whether the line is curved between points
    bezierCurve : true,

    //Boolean - Whether to show a dot for each point
    pointDot : true,

    //Number - Radius of each point dot in pixels
    pointDotRadius : 5,

    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth : 1,

    //Boolean - Whether to show a stroke for datasets
    datasetStroke : true,

    //Number - Pixel width of dataset stroke
    datasetStrokeWidth : 2,

    //Boolean - Whether to fill the dataset with a colour
    datasetFill : true,

    //Boolean - Whether to animate the chart
    animation : true,

    //Number - Number of animation steps
    animationSteps : 60,

    //String - Animation easing effect
    animationEasing : "easeOutQuart",

    //Function - Fires when the animation is complete
    onAnimationComplete : null

});
      lineChart.defaults.scale.gridLines.display 


            = false;

  }
</script>
    <div class="box">
    <canvas id="lineChart" height="500" width="600"></canvas>
  </div>

</apex:page>

Answer 1

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:

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

Please, let us know if it helped.