{"id":19083,"date":"2025-03-25T13:27:40","date_gmt":"2025-03-25T13:27:40","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=19083"},"modified":"2025-03-25T14:51:14","modified_gmt":"2025-03-25T14:51:14","slug":"scatter-plot-hide-show-data","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/","title":{"rendered":"Hiding &#038; Showing Data Points in JavaScript Scatter Plots \u2014 JS Chart Tips"},"content":{"rendered":"<p><a href=\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point.png\" alt=\"JavaScript Scatter Plot with Checkboxes to Hide or Show Data Point Markers, with HTML, CSS, and JS Code\" width=\"100%\" class=\"alignnone size-full wp-image-19162\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point.png 1336w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point-300x159.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point-768x408.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point-1024x544.png 1024w\" sizes=\"(max-width: 1336px) 100vw, 1336px\" \/><\/a><a href=\"https:\/\/www.anychart.com\/products\/anychart\/gallery\/Scatter_Charts\/\">Scatter plots<\/a> are widely used to visualize relationships between variables by displaying values on a coordinate plane. In some cases, users may need to control which data points remain visible \u2014 whether to focus on a specific category, filter out outliers, or simplify the view for better readability.<\/p>\n<p>In this edition of <a href=\"https:\/\/www.anychart.com\/blog\/category\/js-chart-tips\/\">JS Chart Tips<\/a> \u2014 our blog series featuring practical solutions inspired by real customer questions \u2014 we\u2019ll\u00a0show you how to implement interactive point visibility control in a <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Scatter_Plot\" target=\"_blank\" rel=\"nofollow\">JavaScript scatter plot<\/a>. By using specialized <a href=\"https:\/\/api.anychart.com\" target=\"_blank\" rel=\"nofollow\">API<\/a> methods, you can let users dynamically hide and show individual markers, making data exploration more flexible and insightful.<\/p>\n<p>Let&#8217;s dive in!<\/p>\n<p><!--more--><\/p>\n<h2>Question: How to\u00a0Toggle Visibility of Scatter Plot Data Points?<\/h2>\n<p>A customer recently asked our <a href=\"https:\/\/www.anychart.com\/support\" target=\"_blank\">Support Team<\/a> how to allow users to manually hide and show specific points in a scatter plot by interacting with elements elsewhere on the same web page. Providing control over data visibility without modifying the dataset itself can be useful in various scenarios \u2014 whether the interaction happens via a table, list, or even another chart.<\/p>\n<p>To demonstrate the core approach, our engineers created a basic example where users can toggle individual points using checkboxes. Here\u2019s how that works in action:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/hiding-and-showing-data-points-in-javascript-scatter-plot.gif\" alt=\"Toggling point markers in an interactive JavaScript scatter plot on and off using checkbox UI controls\" width=\"65%\" class=\"alignnone size-full wp-image-19164\" \/><\/p>\n<p>So, how exactly can you implement this functionality? Below, we&#8217;ll walk you through the process, making it easy to integrate into your own scatter plots \u2014 or even other <a href=\"https:\/\/docs.anychart.com\/Quick_Start\/Supported_Charts_Types\" target=\"_blank\" rel=\"nofollow\">chart types<\/a>.<\/p>\n<h2>Solution: Using Exclude\/Include Points to Control Visibility<\/h2>\n<h3>Overview<\/h3>\n<p>In our <a href=\"https:\/\/www.anychart.com\" target=\"_blank\">JavaScript charts<\/a>, you can control data point visibility dynamically using the <a href=\"https:\/\/docs.anychart.com\/Common_Settings\/Interactivity\/Overview#include_and_exclude_points\" target=\"_blank\" rel=\"nofollow\">Exclude\/Include Points<\/a> feature. Two key API methods make this possible:<\/p>\n<ul>\n<li><a href=\"https:\/\/api.anychart.com\/v8\/anychart.core.cartesian.series.ContinuousBase#excludePoint\" target=\"_blank\" rel=\"nofollow\">excludePoint()<\/a> \u2014 Removes (hides) a specific data point from the display.<\/li>\n<li><a href=\"https:\/\/api.anychart.com\/v8\/anychart.core.cartesian.series.ContinuousBase#includePoint\" target=\"_blank\" rel=\"nofollow\">includePoint()<\/a> \u2014 Redisplays a hidden data point.<\/li>\n<\/ul>\n<p>By combining these methods with <a href=\"https:\/\/docs.anychart.com\/Common_Settings\/Event_Listeners\" target=\"_blank\" rel=\"nofollow\">event listeners<\/a>, you can allow users to toggle data points on and off, adjusting not the dataset\u00a0but its visual representation on the fly.<\/p>\n<p>Now, let\u2019s go step by step through the implementation. We\u2019ll build a simple example where checkboxes control which points are displayed \u2014 a flexible approach that can be extended to various use cases.<\/p>\n<h3>In Detail<\/h3>\n<p><strong>First,<\/strong>\u00a0you need to\u00a0<a href=\"https:\/\/www.anychart.com\/blog\/2022\/06\/17\/scatter-chart-js\/\" target=\"_blank\">create a scatter chart.<\/a> In this example, we\u2019ll define two categories of data points \u2014 fruits and vegetables \u2014 and display\u00a0them as two <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Scatter_Plot\/Marker_Chart\" target=\"_blank\" rel=\"nofollow\">scatter marker series<\/a>.<\/p>\n<pre><code class=\"html\">&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;title&gt;JavaScript Scatter Plot with Point Visibility Control&lt;\/title&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.13.0\/js\/anychart-base.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;style&gt;\r\n    html, body, #container { \r\n      width: 100%; height: 100%; margin: 0; padding: 0; \r\n    } \r\n  &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt; \r\n  &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n  &lt;script&gt;\r\n    anychart.onDocumentReady(function() {\r\n      \/\/ define data points:\r\n      var fruitsData = [\r\n        {x: 1, value: 14, name: \"Apple\"},\r\n        {x: 2, value: 55, name: \"Banana\"}\r\n      ];\r\n      var vegetablesData = [\r\n        {x: 1, value: 30, name: \"Tomato\"},\r\n        {x: 2, value: 45, name: \"Cucumber\"}\r\n      ];\r\n      \/\/ create a scatter plot:\r\n      var chart = anychart.scatter();\r\n      \/\/ add two marker series:\r\n      var fruitsSeries = chart.marker(fruitsData);\r\n      var vegetablesSeries = chart.marker(vegetablesData);\r\n      \/\/ set the container and render the chart:\r\n      chart.container(\"container\");\r\n      chart.draw();\r\n    });\r\n  &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p><strong>Second,<\/strong>\u00a0add checkboxes to let users control the visibility of specific points. Each checkbox corresponds to a data point, allowing users to\u00a0show or hide them dynamically.\u00a0In our example, we\u2019ll add them to the <code>&lt;body&gt;<\/code> section of the HTML as follows:<\/p>\n<pre><code class=\"html\">&lt;div id=\"controls\"&gt; \r\n  &lt;div&gt;\r\n    &lt;strong&gt;Fruits&lt;\/strong&gt;&lt;br&gt;\r\n    &lt;label&gt;\r\n      &lt;input type=\"checkbox\" id=\"appleCheckbox\" checked&gt; Apple\r\n    &lt;\/label&gt;&lt;br&gt;\r\n    &lt;label&gt;\r\n      &lt;input type=\"checkbox\" id=\"bananaCheckbox\" checked&gt; Banana\r\n    &lt;\/label&gt;&lt;br&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div&gt;\r\n    &lt;strong&gt;Vegetables&lt;\/strong&gt;&lt;br&gt;\r\n    &lt;label&gt;\r\n      &lt;input type=\"checkbox\" id=\"tomatoCheckbox\" checked&gt; Tomato\r\n    &lt;\/label&gt;&lt;br&gt;\r\n    &lt;label&gt;\r\n      &lt;input type=\"checkbox\" id=\"cucumberCheckbox\" checked&gt; Cucumber\r\n    &lt;\/label&gt;&lt;br&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p><strong>Third,<\/strong>\u00a0define a function that determines whether a data point should be included (shown) or excluded (hidden) based on the checkbox state.<\/p>\n<pre><code class=\"javascript\">function togglePoint(series, index, isChecked) {\r\n  if (isChecked) {\r\n    series.includePoint(index); \/\/ Show the point\r\n  } else {\r\n    series.excludePoint(index); \/\/ Hide the point\r\n  }\r\n}<\/code><\/pre>\n<p><strong>Fourth,<\/strong> attach event listeners to the checkboxes so that whenever a user checks or unchecks a box, the <code>togglePoint()<\/code> function updates the chart accordingly.<\/p>\n<pre><code class=\"javascript\">\/\/ control the fruits series:\r\ndocument.getElementById(\"appleCheckbox\").addEventListener(\"change\", function () {\r\n  togglePoint(fruitsSeries, 0, this.checked);\r\n});\r\ndocument.getElementById(\"bananaCheckbox\").addEventListener(\"change\", function () {\r\n  togglePoint(fruitsSeries, 1, this.checked);\r\n});\r\n\/\/ control the vegetables series:\r\ndocument.getElementById(\"tomatoCheckbox\").addEventListener(\"change\", function () {\r\n  togglePoint(vegetablesSeries, 0, this.checked);\r\n});\r\ndocument.getElementById(\"cucumberCheckbox\").addEventListener(\"change\", function () {\r\n  togglePoint(vegetablesSeries, 1, this.checked);\r\n});<\/code><\/pre>\n<p><strong>Finally,<\/strong> fine-tune the appearance of the checkbox controls and chart layout as needed, and you&#8217;ve got an interactive scatter plot where users can hide or show individual data points at will.<\/p>\n<h3>Example<\/h3>\n<p>Check out this interactive scatter plot example with dynamic point selection, built using the approach we&#8217;ve just explored. It includes additional visual tweaks for better usability \u2014 feel free to experiment with its code and customize it to fit your needs.<\/p>\n<ul>\n<li><a href=\"https:\/\/playground.anychart.com\/AjQaHVRl\" target=\"_blank\" rel=\"nofollow\">JavaScript Scatter Plot with Point\u00a0Visibility Control | AnyChart Playground<\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/playground.anychart.com\/AjQaHVRl\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/JavaScript-Scatter-Plot-with-Point-Visibility-Control.png\" alt=\"Example of a JavaScript scatter plot with checkboxes as UI controls for data series point marker visibility\" width=\"100%\" class=\"alignnone size-full wp-image-19166\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/JavaScript-Scatter-Plot-with-Point-Visibility-Control.png 1200w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/JavaScript-Scatter-Plot-with-Point-Visibility-Control-300x176.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/JavaScript-Scatter-Plot-with-Point-Visibility-Control-768x449.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/JavaScript-Scatter-Plot-with-Point-Visibility-Control-1024x599.png 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a><\/p>\n<h2>Further Learning<\/h2>\n<p>For more details on scatter plots, event handling, and point visibility control, explore the following sections of our JavaScript charting documentation:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Scatter_Plot\/\" target=\"_blank\" rel=\"nofollow\">Scatter Plot | AnyChart JS Documentation<\/a><\/li>\n<li><a href=\"https:\/\/docs.anychart.com\/Common_Settings\/Event_Listeners\" target=\"_blank\" rel=\"nofollow\">Event Listeners | AnyChart JS Documentation<\/a><\/li>\n<li><a href=\"https:\/\/docs.anychart.com\/Common_Settings\/Interactivity\/Overview#include_and_exclude_points\" target=\"_blank\" rel=\"nofollow\">Exclude and Include Points \u2014 Interactivity | AnyChart JS Documentation<\/a><\/li>\n<\/ul>\n<p>Check out more tutorials on creating scatter plots with JavaScript on our blog:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.anychart.com\/blog\/2022\/06\/17\/scatter-chart-js\/\" target=\"_blank\">Building a Scatter Chart in JavaScript<\/a> by Shachee Swadia \u2014 Visualizing the top 1,000 highest-grossing movies.<\/li>\n<li><a href=\"https:\/\/www.anychart.com\/blog\/2020\/05\/27\/scatter-plot-js-tutorial\/\" target=\"_blank\">Building a JavaScript Scatter Plot Module<\/a> by Wayde Herman \u2014 Comparing cat vs. dog popularity in the United States.<\/li>\n<\/ul>\n<h2>Wrapping Up<\/h2>\n<p>Letting users show or hide specific data points enhances scatter plot interactivity and usability. By using methods like <code>excludePoint()<\/code> and <code>includePoint()<\/code> with event listeners, you can efficiently control point visibility, making visualizations more flexible and insightful.<\/p>\n<p>Want to take it further? Try adding buttons, dropdowns, or logic-based filters for even more customization.<\/p>\n<p>Have additional questions? Feel free to\u00a0reach out to our <a href=\"https:\/\/www.anychart.com\/support\/\" target=\"_blank\">Support Team.<\/a>\u00a0And stay tuned for more practical tutorials in our <a href=\"https:\/\/www.anychart.com\/blog\/category\/js-chart-tips\/\" target=\"_blank\">JS Chart Tips<\/a> series!<\/p>\n<p><strong>Happy scattering with JavaScript!<\/strong><\/p>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Scatter plots are widely used to visualize relationships between variables by displaying values on a coordinate plane. In some cases, users may need to control which data points remain visible \u2014 whether to focus on a specific category, filter out outliers, or simplify the view for better readability. In this edition of JS Chart Tips [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,23,13,3780,4],"tags":[3928,619,618,53,3840,4053,3935,289,254,284,4321,166,258,4324,4326,471,266,1292,880,806,3352,509,4325,3845,2220,54,1760,256,1111,844,4322,165,313,1370,774,1246,1245,3620,3930,805,4263,2013,4041,2014,4040,32,55,3927,77,4261,144,167,4085,4084,4271,146,3926,433,79,152,2949,80,4090,3749,151,4089,247,36,3925,907,141,249,3111,81,3931,57,4107,3849,76,3838,3939,1238,142,99,4108,3947,3586,4054,58,3832,65,56,78,3929,101,3526,3386,3387,3388,2653,4323,783,4279,209,1761,3941,30,172,206,4320,807,808,954,4213,2816,1763,804],"class_list":["post-19083","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-html5","category-javascript","category-js-chart-tips","category-tips-and-tricks","tag-advanced-charting-with-javascript","tag-analysis","tag-analytics","tag-anychart","tag-anychart-api","tag-anychart-js-api-reference","tag-anychart-tutorial","tag-api","tag-chart","tag-chart-examples","tag-chart-ux","tag-charting","tag-charts","tag-checkbox","tag-correlation","tag-data-analysis","tag-data-analytics","tag-data-chart","tag-data-charting","tag-data-charts","tag-data-graphic","tag-data-graphics","tag-data-plot","tag-data-presentation-tips","tag-data-visual","tag-data-visualization","tag-data-visualization-design","tag-data-visualization-examples","tag-data-visualization-practice","tag-data-visualization-tutorial","tag-data-visualization-ux","tag-data-visualizations","tag-data-visuals","tag-data-viz-examples","tag-dataviz-examples","tag-dot-plot","tag-dot-plots","tag-event-listeners","tag-front-end-charting-guide","tag-front-end-development","tag-frontend-development","tag-html","tag-html-chart-setup","tag-html-charts","tag-html-page-setup","tag-html5","tag-html5-charts","tag-html5-charts-tutorial","tag-html5-dashboards","tag-html5-data-visualization","tag-infographics","tag-interactive-charts","tag-interactive-data","tag-interactive-data-chart","tag-interactive-data-solutions","tag-interactive-data-visualization","tag-interactive-data-visualization-tutorial","tag-interactive-graphics","tag-interactive-html5-dashboard","tag-interactive-infographic","tag-interactive-infographics","tag-interactive-javascript-dashboard","tag-interactive-project","tag-interactive-visualization","tag-interactive-visualizations","tag-interactive-web-charts","tag-interactivity","tag-javascript","tag-javascript-chart-customization","tag-javascript-chart-tutorial","tag-javascript-charting","tag-javascript-charting-api","tag-javascript-charting-features","tag-javascript-charting-library","tag-javascript-charting-tutorial","tag-javascript-charts","tag-javascript-code","tag-javascript-dashboard-display","tag-javascript-dashboards","tag-javascript-data-display","tag-javascript-data-visualization","tag-javascript-graph","tag-javascript-graphics","tag-javascript-library","tag-javascript-tutorial","tag-javascript-visualization-tutorial","tag-js","tag-js-api-reference","tag-js-chart","tag-js-chart-tips","tag-js-charting","tag-js-charts","tag-js-dashboards","tag-js-data-visualizations","tag-js-graphics","tag-js-library","tag-marker-chart","tag-marker-plot","tag-marker-plots","tag-plotting","tag-point-visibility-control","tag-relationships","tag-scatter","tag-scatter-chart","tag-scatter-plot","tag-step-by-step-tutorial","tag-tips-and-tricks","tag-tutorial","tag-ui","tag-ux","tag-visual-analysis","tag-visual-analytics","tag-visual-data-analytics","tag-web-dashboard","tag-web-design","tag-web-developers","tag-web-development","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Hiding &amp; Showing Points in JavaScript Scatter Plot | JS Chart Tips<\/title>\n<meta name=\"description\" content=\"Learn how to enable interactive point visibility control in a JavaScript scatter plot \u2014 and easily adapt this flexible solution to fit your own use case.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hiding\/Showing in Scatter Plots | JS Chart Tips\" \/>\n<meta property=\"og:description\" content=\"How to add point visibility control to a scatter plot (JavaScript).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-25T13:27:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-25T14:51:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point-og.png\" \/>\n<meta name=\"author\" content=\"AnyChart Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Hiding\/Showing in Scatter Plots | JS Chart Tips\" \/>\n<meta name=\"twitter:description\" content=\"How to add point visibility control to a scatter plot (JavaScript).\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point-x.png\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"AnyChart Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/\"},\"author\":{\"name\":\"AnyChart Team\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b\"},\"headline\":\"Hiding &#038; Showing Data Points in JavaScript Scatter Plots \u2014 JS Chart Tips\",\"datePublished\":\"2025-03-25T13:27:40+00:00\",\"dateModified\":\"2025-03-25T14:51:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/\"},\"wordCount\":726,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point.png\",\"keywords\":[\"advanced charting with JavaScript\",\"analysis\",\"analytics\",\"AnyChart\",\"AnyChart API\",\"AnyChart JS API Reference\",\"AnyChart tutorial\",\"api\",\"chart\",\"chart examples\",\"chart UX\",\"charting\",\"charts\",\"checkbox\",\"correlation\",\"data analysis\",\"data analytics\",\"data chart\",\"data charting\",\"data charts\",\"data graphic\",\"data graphics\",\"data plot\",\"data presentation tips\",\"data visual\",\"Data Visualization\",\"data visualization design\",\"data visualization examples\",\"data visualization practice\",\"data visualization tutorial\",\"data visualization UX\",\"data visualizations\",\"data visuals\",\"data viz examples\",\"dataviz examples\",\"dot plot\",\"dot plots\",\"event listeners\",\"front-end charting guide\",\"front-end development\",\"Frontend Development\",\"HTML\",\"HTML chart setup\",\"HTML charts\",\"HTML page setup\",\"HTML5\",\"html5 charts\",\"HTML5 charts tutorial\",\"html5 dashboards\",\"HTML5 Data Visualization\",\"infographics\",\"interactive charts\",\"interactive data\",\"interactive data chart\",\"Interactive Data Solutions\",\"interactive data visualization\",\"interactive data visualization tutorial\",\"interactive graphics\",\"interactive html5 dashboard\",\"interactive infographic\",\"interactive infographics\",\"interactive javascript dashboard\",\"interactive project\",\"interactive visualization\",\"interactive visualizations\",\"interactive web charts\",\"interactivity\",\"JavaScript\",\"JavaScript chart customization\",\"javascript chart tutorial\",\"javascript charting\",\"javascript charting api\",\"JavaScript charting features\",\"JavaScript charting library\",\"JavaScript charting tutorial\",\"javascript charts\",\"JavaScript code\",\"JavaScript dashboard display\",\"javascript dashboards\",\"JavaScript data display\",\"JavaScript data visualization\",\"javascript graph\",\"javascript graphics\",\"JavaScript library\",\"JavaScript tutorial\",\"JavaScript visualization tutorial\",\"js\",\"JS API Reference\",\"js chart\",\"JS chart tips\",\"js charting\",\"js charts\",\"js dashboards\",\"js data visualizations\",\"JS graphics\",\"js library\",\"marker chart\",\"marker plot\",\"marker plots\",\"plotting\",\"point visibility control\",\"relationships\",\"scatter\",\"scatter chart\",\"scatter plot\",\"step-by-step tutorial\",\"Tips and tricks\",\"tutorial\",\"UI\",\"UX\",\"visual analysis\",\"visual analytics\",\"visual data analytics\",\"web dashboard\",\"web design\",\"web developers\",\"web development\"],\"articleSection\":[\"AnyChart Charting Component\",\"HTML5\",\"JavaScript\",\"JS Chart Tips\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/\",\"name\":\"Hiding & Showing Points in JavaScript Scatter Plot | JS Chart Tips\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point.png\",\"datePublished\":\"2025-03-25T13:27:40+00:00\",\"dateModified\":\"2025-03-25T14:51:14+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b\"},\"description\":\"Learn how to enable interactive point visibility control in a JavaScript scatter plot \u2014 and easily adapt this flexible solution to fit your own use case.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point.png\",\"width\":1336,\"height\":710},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hiding &#038; Showing Data Points in JavaScript Scatter Plots \u2014 JS Chart Tips\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b\",\"name\":\"AnyChart Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g\",\"caption\":\"AnyChart Team\"},\"sameAs\":[\"https:\/\/www.anychart.com\"],\"url\":\"https:\/\/www.anychart.com\/blog\/author\/andrey-khachaturov\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hiding & Showing Points in JavaScript Scatter Plot | JS Chart Tips","description":"Learn how to enable interactive point visibility control in a JavaScript scatter plot \u2014 and easily adapt this flexible solution to fit your own use case.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/","og_locale":"en_US","og_type":"article","og_title":"Hiding\/Showing in Scatter Plots | JS Chart Tips","og_description":"How to add point visibility control to a scatter plot (JavaScript).","og_url":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2025-03-25T13:27:40+00:00","article_modified_time":"2025-03-25T14:51:14+00:00","og_image":[{"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point-og.png","type":"","width":"","height":""}],"author":"AnyChart Team","twitter_card":"summary_large_image","twitter_title":"Hiding\/Showing in Scatter Plots | JS Chart Tips","twitter_description":"How to add point visibility control to a scatter plot (JavaScript).","twitter_image":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point-x.png","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"AnyChart Team","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/"},"author":{"name":"AnyChart Team","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b"},"headline":"Hiding &#038; Showing Data Points in JavaScript Scatter Plots \u2014 JS Chart Tips","datePublished":"2025-03-25T13:27:40+00:00","dateModified":"2025-03-25T14:51:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/"},"wordCount":726,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point.png","keywords":["advanced charting with JavaScript","analysis","analytics","AnyChart","AnyChart API","AnyChart JS API Reference","AnyChart tutorial","api","chart","chart examples","chart UX","charting","charts","checkbox","correlation","data analysis","data analytics","data chart","data charting","data charts","data graphic","data graphics","data plot","data presentation tips","data visual","Data Visualization","data visualization design","data visualization examples","data visualization practice","data visualization tutorial","data visualization UX","data visualizations","data visuals","data viz examples","dataviz examples","dot plot","dot plots","event listeners","front-end charting guide","front-end development","Frontend Development","HTML","HTML chart setup","HTML charts","HTML page setup","HTML5","html5 charts","HTML5 charts tutorial","html5 dashboards","HTML5 Data Visualization","infographics","interactive charts","interactive data","interactive data chart","Interactive Data Solutions","interactive data visualization","interactive data visualization tutorial","interactive graphics","interactive html5 dashboard","interactive infographic","interactive infographics","interactive javascript dashboard","interactive project","interactive visualization","interactive visualizations","interactive web charts","interactivity","JavaScript","JavaScript chart customization","javascript chart tutorial","javascript charting","javascript charting api","JavaScript charting features","JavaScript charting library","JavaScript charting tutorial","javascript charts","JavaScript code","JavaScript dashboard display","javascript dashboards","JavaScript data display","JavaScript data visualization","javascript graph","javascript graphics","JavaScript library","JavaScript tutorial","JavaScript visualization tutorial","js","JS API Reference","js chart","JS chart tips","js charting","js charts","js dashboards","js data visualizations","JS graphics","js library","marker chart","marker plot","marker plots","plotting","point visibility control","relationships","scatter","scatter chart","scatter plot","step-by-step tutorial","Tips and tricks","tutorial","UI","UX","visual analysis","visual analytics","visual data analytics","web dashboard","web design","web developers","web development"],"articleSection":["AnyChart Charting Component","HTML5","JavaScript","JS Chart Tips","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/","url":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/","name":"Hiding & Showing Points in JavaScript Scatter Plot | JS Chart Tips","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point.png","datePublished":"2025-03-25T13:27:40+00:00","dateModified":"2025-03-25T14:51:14+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b"},"description":"Learn how to enable interactive point visibility control in a JavaScript scatter plot \u2014 and easily adapt this flexible solution to fit your own use case.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2025\/03\/js-scatter-plot-hide-show-point.png","width":1336,"height":710},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2025\/03\/25\/scatter-plot-hide-show-data\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Hiding &#038; Showing Data Points in JavaScript Scatter Plots \u2014 JS Chart Tips"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/2470e26e58231357db6d9993ecd6461b","name":"AnyChart Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4faeb24a1b553a1b071b765bfad138c00441a955b3a631c7564624ceeafdf884?s=96&r=g","caption":"AnyChart Team"},"sameAs":["https:\/\/www.anychart.com"],"url":"https:\/\/www.anychart.com\/blog\/author\/andrey-khachaturov\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/19083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=19083"}],"version-history":[{"count":29,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/19083\/revisions"}],"predecessor-version":[{"id":19175,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/19083\/revisions\/19175"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=19083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=19083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=19083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}