hide specific point in a scatter plot chart - Javascript highcharts

Javascript examples for highcharts:Scatter Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Scatter Chart

Description

hide specific point in a scatter plot chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function() {/*from  w w w.j a v  a  2 s .  c  o m*/
  var origData = [{
    x: 38,
    y: 42
  }, {
    x: 39,
    y: 39
  }, {
    x: 35,
    y: 45
  }, {
    x: 35,
    y: 54
  }, {
    x: 36,
    y: 35
  }];
  var myData = origData.slice();
  var hidden = false;
  $('#container').highcharts({
    chart: {
      type: 'scatter',
    },
    plotOptions: {
      scatter: {
        marker: {
          radius: 5,
          symbol: 'circle',
          fillColor: '#800000'
        },
      }
    },
    series: [{
      name: 'A',
      color: "#b0b0b0",
      data: myData
    }]
  });
  var chart = $('#container').highcharts();
  $('#button').click(function() {
    // This is an option, but you'd also need to hide the label and tooltip for it to be usable
    // the data is still in the series
    var data = chart.series[0].data;
    var point = data[3];
    if (point.marker && point.marker.enabled == false) {
      data[3].marker = {
        enabled: true,
        states: {
          hover: {
            enabled: true
          }
        }
      };
    } else {
      data[3].marker = {
        enabled: false,
        states: {
          hover: {
            enabled: false
          }
        }
      };
    }
    chart.series[0].setData(data);
  });
  $('#button2').click(function() {
    var series = chart.series[0];
    if (hidden) {
      myData = origData.slice();
      series.setData(myData);
      hidden = false;
    } else {
      series.removePoint(3);
      hidden = true;
    }
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div> 
      <button id="button" class="autocompare">toggle hide point - Disable Marker</button> 
      <button id="button2" class="autocompare">toggle hide point - Remove data point</button>  
   </body>
</html>

Related Tutorials