{"id":18868,"date":"2025-02-11T09:14:28","date_gmt":"2025-02-11T09:14:28","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=18868"},"modified":"2025-02-12T07:46:04","modified_gmt":"2025-02-12T07:46:04","slug":"quadrant-chart-images","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2025\/02\/11\/quadrant-chart-images\/","title":{"rendered":"Quadrant Chart with Custom Image Markers \u2014 JS Chart Tips"},"content":{"rendered":"

\"JavaScript<\/a>Displaying unique images as markers can add a distinctive touch to your charts, making data visualization more engaging and informative. In this edition of JS Chart Tips<\/a>, we will guide you through the process of using custom image markers for each data point in a quadrant chart<\/a> with our JavaScript charting library<\/a>.<\/p>\n

<\/p>\n

Question: How to Display Custom Images as Markers in Quadrants?<\/h2>\n

A user recently\u00a0reached out to\u00a0our Support Team<\/a>\u00a0 with a question that, in a nutshell, boils down to the following: “Can I change the marker in a quadrant chart into a custom image?”<\/em> We\u00a0recognized\u00a0the need to achieve something like what is shown below:<\/p>\n

\"Quadrant
\nSo,\u00a0the short answer is yes<\/strong>, and now we will show you exactly how. If you have a similar requirement, follow along!<\/p>\n

Solution: Adding Images as Markers for Quadrant Data Points<\/h2>\n

Overview<\/h3>\n

When you create a JS quadrant chart<\/a> with AnyChart, data is represented as a marker series<\/a> by default. To make these markers appear as custom images, use the fill()<\/code> method and specify the image source URL.<\/p>\n

To display unique images for\u00a0each data point, add a custom property in your dataset containing the image URL. By passing a custom function into the fill()<\/code> method, you can dynamically extract and apply the image URLs for\u00a0the series markers.<\/p>\n

In Detail<\/h3>\n

Let\u2019s now see exactly how this solution looks in a quick example.<\/p>\n

First of all, we create\u00a0a basic quadrant chart. The following JavaScript code is enough to\u00a0generate such a visualization, with data introduced as an array of objects<\/a>:<\/p>\n

anychart.onDocumentReady(function () {\r\n  \/\/ create data\r\n  var data = [\r\n    {x: 4, value: 42},\r\n    {x: 13, value: 59},\r\n    {x: 25, value: 68},\r\n    {x: 25, value: 63},\r\n    {x: 44, value: 54},\r\n    {x: 55, value: 58},\r\n    {x: 56, value: 46},\r\n    {x: 60, value: 54},\r\n    {x: 72, value: 73}\r\n  ];\r\n\r\n  \/\/ create a chart\r\n  var chart = anychart.quadrant(data);\r\n\r\n  \/\/ set the chart title\r\n  chart.title(\"Quadrant Chart with Images as Markers\");\r\n\r\n  \/\/ set the container id\r\n  chart.container(\"container\");\r\n\r\n  \/\/ initiate drawing the chart\r\n  chart.draw();\r\n});<\/code><\/pre>\n
Second, for each data point, you can\u00a0specify the URL of an image to be used as a marker by adding a custom property.\u00a0In this example, here’s how we add an image to the last data point:<\/p>\n
{x: 72, value: 73, image: \"https:\/\/pbs.twimg.com\/profile_images\/1389594666287476744\/jbdbQ5Oh_400x400.jpg\"}<\/code><\/pre>\n
Third, we customize the series by using the\u00a0fill()<\/code> method with a custom function to dynamically extract and apply the image URLs for each marker. In the example below, the function is set for the normal state of the data points. It applies the image URL from the dataset to\u00a0each data point, and if the URL is absent, it applies\u00a0a\u00a0default image URL instead:<\/p>\n
series.normal()\r\n  .fill(function(){\r\n    return {\r\n      src: this.getData(\"image\") ? this.getData(\"image\") : \"https:\/\/www.anychart.com\/_design\/img\/static\/AnyChart-circle.png\"\r\n    };\r\n  });<\/code><\/pre>\n
Fourth, we can customize the marker appearance to ensure the images display as intended. For example, let’s adjust the size and fill mode, as well as configure how markers look not only in the normal state but also in hovered and selected states:<\/p>\n
\/\/ customize series appearance in the normal state\r\nseries.normal()\r\n  .size(15)\r\n  .fill(function(){\r\n    return {\r\n      src: this.getData(\"image\") ? this.getData(\"image\") : \"https:\/\/www.anychart.com\/_design\/img\/static\/AnyChart-circle.png\",\r\n      mode: \"fit\"\r\n    };\r\n  });\r\n    \r\n\/\/ customize series appearance in the hovered state\r\nseries.hovered()\r\n  .size(20)\r\n  .fill(function(){\r\n    return {\r\n      src: this.getData(\"image\") ? this.getData(\"image\") : \"https:\/\/www.anychart.com\/_design\/img\/static\/AnyChart-circle.png\",\r\n      mode: \"fit\"\r\n    };\r\n  });\r\n  \r\n\/\/ customize series appearance in the selected state\r\nseries.selected()\r\n  .size(25)\r\n  .fill(function(){\r\n    return {\r\n      src: this.getData(\"image\") ? this.getData(\"image\") : \"https:\/\/www.anychart.com\/_design\/img\/static\/AnyChart-circle.png\",\r\n      mode: \"fit\"\r\n    };\r\n  });<\/code><\/pre>\n
That’s it!\u00a0Our\u00a0quadrant chart\u00a0now uses images as markers.<\/p>\n
If you have a similar case,\u00a0you might prefer a more concise version to achieve the same result:<\/p>\n
\/\/ define fill logic\r\nfunction customFill(point) {\r\n  return {\r\n    src: this.getData(\"image\") || \"https:\/\/www.anychart.com\/_design\/img\/static\/AnyChart-circle.png\",\r\n    mode: \"fit\"\r\n  };\r\n};\r\n\r\n\/\/ apply fill logic to different states\r\nseries.normal().size(15).fill(customFill);\r\nseries.hovered().size(20).fill(customFill);\r\nseries.selected().size(25).fill(customFill);<\/code><\/pre>\n
Examples<\/h3>\n
Check out an example of a JavaScript quadrant chart with images as markers, and feel free to experiment further with its code and visualization:<\/p>\n
    \n
  • Quadrant Chart with Image Markers | AnyChart Playground<\/a><\/li>\n<\/ul>\n
    \"JavaScript<\/a><\/p>\n
    Further Learning<\/h2>\n
    To learn more, refer to our JavaScript charting documentation:<\/p>\n
      \n
    • Quadrant Chart \u2014 Basic Charts | AnyChart JS Documentation<\/a><\/li>\n
    • Fill Settings \u2014 Graphics | AnyChart JS Documentation<\/a><\/li>\n<\/ul>\n
      And the API reference:<\/p>\n
        \n
      • AnyChart Core Scatter Series Marker Fill | AnyChart JS API Reference<\/a><\/li>\n
      • Graphics Vector Image Fill Mode | AnyChart JS API Reference<\/a><\/li>\n<\/ul>\n
        Wrapping Up<\/h2>\n
        Whenever you need custom image markers for your quadrant charts, now you know how to implement them. For more tips and tricks, keep following our JavaScript Chart Tips<\/a> series. And feel free to contact our Support Team<\/a>\u00a0whenever\u00a0you\u00a0have any questions regarding any of the chart types<\/a> or features<\/a> of our\u00a0JavaScript charting library<\/a>. Have a great data visualization time!<\/p>\n