html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

#container{

  height: 60%

}

​

#controls{

  display: grid;

  grid-template-columns: 1fr 1fr;

}

anychart.onDocumentReady(function() {

​

  // define data points:

  var fruitsData = [

    {x: 1, value: 14, name: "Apple"},

    {x: 2, value: 55, name: "Banana"}

  ];

  var vegetablesData = [

    {x: 1, value: 30, name: "Tomato"},

    {x: 2, value: 45, name: "Cucumber"}

  ];

  // create a scatter plot:

  var chart = anychart.scatter();

​

  // add two marker series:

  var fruitsSeries = chart.marker(fruitsData).name("Fruits").size(10);

  var vegetablesSeries = chart.marker(vegetablesData).name("Vegetables").size(10);

​

  // define a callback function to toggle point visibility:

  function togglePoint(series, index, isChecked) {

    if (isChecked) {

      series.includePoint(index)

    } else {

      series.excludePoint(index)

    }

  }

​

  // add event listeners for checkboxes:

  // control the fruits series:

  document.getElementById("appleCheckbox").addEventListener("change", function () {

    togglePoint(fruitsSeries, 0, this.checked);

  });

  document.getElementById("bananaCheckbox").addEventListener("change", function () {

    togglePoint(fruitsSeries, 1, this.checked);

  });

  // control the vegetables series:

  document.getElementById("tomatoCheckbox").addEventListener("change", function () {

    togglePoint(vegetablesSeries, 0, this.checked);

  });

  document.getElementById("cucumberCheckbox").addEventListener("change", function () {

    togglePoint(vegetablesSeries, 1, this.checked);

  });

  // set scale limits for the axes:

  chart.yScale().minimum(0).maximum(60);

  chart.xScale().minimum(0).maximum(3);

  // configure the tooltip format:

  chart.tooltip().format("{%name}: {%x} vs. {%value}");

​

  // set the chart title, container, and render the chart:

  chart.title("Show/Hide Data Points");

  chart.container("container");

  chart.draw();

});