{"id":7242,"date":"2019-01-23T06:12:14","date_gmt":"2019-01-23T06:12:14","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=7242"},"modified":"2019-01-23T15:25:26","modified_gmt":"2019-01-23T15:25:26","slug":"stacked-column-charts-images-challenge","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/","title":{"rendered":"Stacked Column Charts with Images \u2014 Challenge AnyChart!"},"content":{"rendered":"<p><a href=\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/\"><img decoding=\"async\" class=\"alignnone size-full wp-image-7243\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png\" alt=\"Images in Stacked Column Charts Series explained in Challenge AnyChart!\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png 960w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge-300x200.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge-768x512.png 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/a>We are ready to share a new advanced JS (HTML5) data visualization tutorial. Tasks we get from our <a href=\"https:\/\/www.anychart.com\/company\/customers\/\">customers<\/a> are always interesting, and the <a href=\"https:\/\/www.anychart.com\/blog\/category\/challenge-anychart\/\">Challenge AnyChart!<\/a> series on our\u00a0blog proved to be a great way to show you some of the most compelling ones and explain how to solve them, demonstrating the power and flexibility of our\u00a0<a href=\"https:\/\/www.anychart.com\/\">JavaScript charts library<\/a>. Today\u2019s challenge is about adding images to stacked column charts\u00a0using AnyChart.<\/p>\n<p><!--more--><\/p>\n<h2>Data Visualization Task<\/h2>\n<p>Here&#8217;s what question one of our customers asked us for help with the other day:<\/p>\n<blockquote><p><em><strong>How to place images on top of\u00a0a series in stacked bar\/column charts?<\/strong><\/em><\/p><\/blockquote>\n<p>To solve this data visualization task using AnyChart JS Charts, you typically need the following:<\/p>\n<ul>\n<li>use methods from\u00a0our\u00a0<a href=\"https:\/\/api.anychart.com\/\" target=\"_blank\" rel=\"nofollow\">JS Charts API<\/a>\u00a0to transform\u00a0X and\u00a0Y values to pixels, and<\/li>\n<li>make a few mathematical calculations to display\u00a0images in a stacked chart series the way you want.<\/li>\n<\/ul>\n<h2>Solution Overview<\/h2>\n<p>The first thing\u00a0to pay attention to is the chart itself \u2014 <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Stacked\/Value\/Column_Chart\/\" target=\"_blank\" rel=\"nofollow\">build a stacked column chart<\/a> (or, if you need horizontal bars instead of columns, <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Stacked\/Value\/Bar_Chart\" target=\"_blank\" rel=\"nofollow\">build a stacked bar chart<\/a>).<\/p>\n<p>Then, you&#8217;ll need to create a function which overrides the default drawing. If the width and height of\u00a0a certain bar\/column are big enough, a proper image will be placed there. The image size will be changed proportionally when the bar\/column size is changed. We&#8217;ll show you how right now.<\/p>\n<h2>Adding Images to\u00a0Stacked Column Charts<\/h2>\n<p>Before putting the main script to work and deliver a nice example of interactive stacked column charts with images, cache the needed images in HTML:<\/p>\n<pre><code class=\"html\">&lt;img src=\"http:\/\/cdn.anychart.com\/ts\/icons\/anychart.svg\"&gt;\r\n&lt;img src=\"http:\/\/cdn.anychart.com\/ts\/icons\/anystock.svg\"&gt;\r\n&lt;img src=\"http:\/\/cdn.anychart.com\/ts\/icons\/anymap.svg\"&gt;\r\n<\/code><\/pre>\n<p>Now, set a name and meta with the link to the corresponding image for each series, like this:<\/p>\n<pre><code class=\"javascript\">series1\r\n    .name('AnyChart')\r\n    .meta('image', 'http:\/\/cdn.anychart.com\/ts\/icons\/anychart.svg');\r\n<\/code><\/pre>\n<p>Also, specify the necessary restrictions\u00a0for the size of the images, in pixels:<\/p>\n<pre><code class=\"javascript\">var sizeThreshold = 30;\r\n<\/code><\/pre>\n<p>To add an image to each point of the stacked chart, define a special function that will override the default drawing. First, create a variable in the body of the function, which needs to include the shapes array and a new shape intended for drawing images:<\/p>\n<pre><code class=\"javascript\">var tmp = series.rendering().shapes();\r\n    tmp.push({\r\n      name: 'image',\r\n      shapeType: 'path',\r\n      fillName: 'fill',\r\n      canBeHoveredSelected: true,\r\n      strokeName: 'stroke',\r\n      isHatchFill: false\r\n    });\r\n<\/code><\/pre>\n<p>Second, pass <code>tmp<\/code> to <code>shapes<\/code> to replace the default shapes:<\/p>\n<pre><code class=\"javascript\">series.rendering()\r\n      .shapes(tmp)\r\n      .needsZero(true)\r\n<\/code><\/pre>\n<p>Third, create a function which will be used when drawing each series point and get the current state shapes:<\/p>\n<pre><code class=\"javascript\">.point(function() {\r\n      \/\/ get shapes group\r\n      var shapes = this.getShapesGroup(this.pointState);\r\n<\/code><\/pre>\n<p>Fourth, calculate the left and right values on the X axis:<\/p>\n<pre><code class=\"javascript\">var leftX = this.x - this.pointWidth \/ 2;\r\nvar rightX = leftX + this.pointWidth;\r\n<\/code><\/pre>\n<p>Fifth, draw the stacked columns and then the images on them if there&#8217;s enough room for that:<\/p>\n<pre><code class=\"javascript\">shapes['path']\r\n        .clear()\r\n        .moveTo(leftX, this.zero)\r\n        .lineTo(leftX, this.value)\r\n        .lineTo(rightX, this.value)\r\n        .lineTo(rightX, this.zero)\r\n        .close();\r\n\r\nif (Math.abs(this.zero - this.value) >= sizeThreshold) {\r\n shapes['image']\r\n\u2026\r\n}\r\n<\/code><\/pre>\n<p>Finally, repeat the operation to make the images work fine on hover:<\/p>\n<pre><code class=\"javascript\">shapes = this.getShapesGroup(1);\r\n        shapes['image']\r\n<\/code><\/pre>\n<p>Well done! Now everything works as it should. You can check it on the <a href=\"https:\/\/playground.anychart.com\/UnzC6dAq\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a> and see once again that any data visualization task can be solved with the help of the AnyChart JS charting library (and thanks to quick assistance from our Support Team whenever you face any difficulties).<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-UnzC6dAq\" src=\"https:\/\/playground.anychart.com\/UnzC6dAq\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-UnzC6dAq{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<p>For more information, look through the full code of the interactive stacked column chart with images:<\/p>\n<pre><code class=\"javascript\">anychart.onDocumentReady(function() {\r\n\r\n  \/\/ minimum size of a series logo in px\r\n  var sizeThreshold = 30;\r\n\r\n  var data = anychart.data.set([\r\n    [\"2018-01-01\", 12, 32, 10],\r\n    [\"2018-01-02\", 8, 2, 12],\r\n    [\"2018-01-03\", 34, 15, 1],\r\n    [\"2018-01-04\", 2, 19, 7],\r\n    [\"2018-01-05\", 10, 12, 9]\r\n  ]);\r\n\r\n  var chart = anychart.column();\r\n  chart.yScale().stackMode(\"value\");\r\n  chart.legend(true);\r\n  chart.pointWidth('65%');\r\n  chart.palette([\"#087dc9\", \"#ff8500\", \"#fd0002\"]);\r\n\r\n  \/\/ set data from the table\r\n  var mapping1 = data.mapAs({'x': 0, 'value': 1});\r\n  var mapping2 = data.mapAs({'x': 0, 'value': 2});\r\n  var mapping3 = data.mapAs({'x': 0, 'value': 3});\r\n  var series1 = chart.column(mapping1);\r\n  series1\r\n    .name('AnyChart')\r\n    .meta('image', 'http:\/\/cdn.anychart.com\/ts\/icons\/anychart.svg');\r\n\r\n  var series2 = chart.column(mapping2);\r\n  series2\r\n    .name('AnyStock')\r\n    .meta('image', 'http:\/\/cdn.anychart.com\/ts\/icons\/anystock.svg');\r\n\r\n  var series3 = chart.column(mapping3);\r\n  series3\r\n    .name('AnyMap')\r\n    .meta('image', 'http:\/\/cdn.anychart.com\/ts\/icons\/anymap.svg');\r\n\r\n  for (var i = 0; i < chart.getSeriesCount(); i++) {\r\n    setupDrawer(chart.getSeriesAt(i), sizeThreshold);  \r\n  }\r\n\r\n  chart.container(\"container\").draw();\r\n\r\n  \/\/custom drawer\r\n  function setupDrawer(series, sizeThreshold) {\r\n    var images = [];\r\n    var tmp = series.rendering().shapes();\r\n    tmp.push({\r\n      name: 'image',\r\n      shapeType: 'path',\r\n      fillName: 'fill',\r\n      canBeHoveredSelected: true,\r\n      strokeName: 'stroke',\r\n      isHatchFill: false\r\n    });\r\n\r\n    series.rendering()\r\n      .shapes(tmp)\r\n      .needsZero(true)\r\n      .point(function() {\r\n      \/\/ get shapes group\r\n      var shapes = this.getShapesGroup(this.pointState);\r\n\r\n      \/\/ calculate the left value of the X axis\r\n      var leftX = this.x - this.pointWidth \/ 2;\r\n      \/\/ calculate the right value of the x axis\r\n      var rightX = leftX + this.pointWidth;\r\n\r\n      shapes['path']\r\n      \/\/ resets all 'line' operations\r\n        .clear()\r\n        .moveTo(leftX, this.zero)\r\n        .lineTo(leftX, this.value)\r\n        .lineTo(rightX, this.value)\r\n        .lineTo(rightX, this.zero)\r\n      \/\/ close by connecting the last point with the first straight line\r\n        .close();\r\n\r\n      \/\/ draw the logo if the image is greater than a threshold\r\n      if (Math.abs(this.zero - this.value) >= sizeThreshold) {\r\n        shapes['image']\r\n        \/\/ resets all 'line' operations\r\n          .clear()\r\n          .moveTo(leftX, this.zero)\r\n          .lineTo(leftX, this.value)\r\n          .lineTo(rightX, this.value)\r\n          .lineTo(rightX, this.zero)\r\n        \/\/ close by connecting the last point with the first straight line\r\n          .close()\r\n          .zIndex(3)\r\n          .fill({\r\n          src: series.meta('image'),\r\n          mode: \"fit\",\r\n          opacity: 1\r\n        });\r\n\r\n        shapes = this.getShapesGroup(1);\r\n        shapes['image']\r\n        \/\/ resets all 'line' operations\r\n          .clear()\r\n          .moveTo(leftX, this.zero)\r\n          .lineTo(leftX, this.value)\r\n          .lineTo(rightX, this.value)\r\n          .lineTo(rightX, this.zero)\r\n        \/\/ close by connecting the last point with the first straight line\r\n          .close()\r\n          .zIndex(2);\r\n      }\r\n    })\r\n  }\r\n});\r\n<\/code><\/pre>\n<hr \/>\n<p>If you have a question or task you don\u2019t know how to solve, please send it to our <a href=\"https:\/\/www.anychart.com\/support\/\">Support Team<\/a> at <a href=\"mailto:support@anychart.com\" target=\"_blank\" rel=\"nofollow\">support@anychart.com<\/a> with &#8220;Challenge&#8221; in the subject line. We will do our best to help you deal with it!<\/p>\n<p>New challenges will continue to appear in <a href=\"https:\/\/www.anychart.com\/blog\/category\/challenge-anychart\/\">Challenge AnyChart!<\/a>, and we hope you enjoyed today\u2019s one about how to create stacked column charts with images on top of the series. Don\u2019t miss a post, and thank you for your interest.<\/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>We are ready to share a new advanced JS (HTML5) data visualization tutorial. Tasks we get from our customers are always interesting, and the Challenge AnyChart! series on our\u00a0blog proved to be a great way to show you some of the most compelling ones and explain how to solve them, demonstrating the power and flexibility [&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":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,280,22,23,13,4],"tags":[53,70,71,281,258,44,290,85,54,256,32,55,36,141,81,57,58,65,56,581,187,580,30,172],"class_list":["post-7242","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-challenge-anychart","category-charts-and-art","category-html5","category-javascript","category-tips-and-tricks","tag-anychart","tag-bar-chart","tag-bar-charts","tag-challenge","tag-charts","tag-charts-and-art","tag-column-chart","tag-column-charts","tag-data-visualization","tag-data-visualization-examples","tag-html5","tag-html5-charts","tag-javascript","tag-javascript-charting","tag-javascript-charting-library","tag-javascript-charts","tag-js-chart","tag-js-charting","tag-js-charts","tag-stacked-bar-charts","tag-stacked-charts","tag-stacked-column-charts","tag-tips-and-tricks","tag-tutorial","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Stacked Column Charts with Images \u2014 Challenge AnyChart!<\/title>\n<meta name=\"description\" content=\"We&#039;re ready to share a new advanced JS (HTML5) data visualization tutorial. Learn how to add images to stacked column charts\u00a0in AnyChart JavaScript library.\" \/>\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\/2019\/01\/23\/stacked-column-charts-images-challenge\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Stacked Column Charts with Images \u2014 Challenge AnyChart!\" \/>\n<meta property=\"og:description\" content=\"We&#039;re ready to share a new advanced JS (HTML5) data visualization tutorial. Learn how to add images to stacked column charts\u00a0in AnyChart JavaScript library.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/\" \/>\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=\"2019-01-23T06:12:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-23T15:25:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"640\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Irina Maximova\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\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=\"Irina Maximova\" \/>\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\/2019\/01\/23\/stacked-column-charts-images-challenge\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/\"},\"author\":{\"name\":\"Irina Maximova\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058\"},\"headline\":\"Stacked Column Charts with Images \u2014 Challenge AnyChart!\",\"datePublished\":\"2019-01-23T06:12:14+00:00\",\"dateModified\":\"2019-01-23T15:25:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/\"},\"wordCount\":575,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png\",\"keywords\":[\"AnyChart\",\"bar chart\",\"bar charts\",\"challenge\",\"charts\",\"Charts and Art\",\"column chart\",\"column charts\",\"Data Visualization\",\"data visualization examples\",\"HTML5\",\"html5 charts\",\"JavaScript\",\"javascript charting\",\"JavaScript charting library\",\"javascript charts\",\"js chart\",\"js charting\",\"js charts\",\"stacked bar charts\",\"stacked charts\",\"stacked column charts\",\"Tips and tricks\",\"tutorial\"],\"articleSection\":[\"AnyChart Charting Component\",\"Challenge AnyChart!\",\"Charts and Art\",\"HTML5\",\"JavaScript\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/\",\"name\":\"Stacked Column Charts with Images \u2014 Challenge AnyChart!\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png\",\"datePublished\":\"2019-01-23T06:12:14+00:00\",\"dateModified\":\"2019-01-23T15:25:26+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058\"},\"description\":\"We're ready to share a new advanced JS (HTML5) data visualization tutorial. Learn how to add images to stacked column charts\u00a0in AnyChart JavaScript library.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png\",\"width\":960,\"height\":640},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Stacked Column Charts with Images \u2014 Challenge AnyChart!\"}]},{\"@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\/c79061b5c43d09368b8d44b36842b058\",\"name\":\"Irina Maximova\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g\",\"caption\":\"Irina Maximova\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/irina-maximova\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Stacked Column Charts with Images \u2014 Challenge AnyChart!","description":"We're ready to share a new advanced JS (HTML5) data visualization tutorial. Learn how to add images to stacked column charts\u00a0in AnyChart JavaScript library.","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\/2019\/01\/23\/stacked-column-charts-images-challenge\/","og_locale":"en_US","og_type":"article","og_title":"Stacked Column Charts with Images \u2014 Challenge AnyChart!","og_description":"We're ready to share a new advanced JS (HTML5) data visualization tutorial. Learn how to add images to stacked column charts\u00a0in AnyChart JavaScript library.","og_url":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2019-01-23T06:12:14+00:00","article_modified_time":"2019-01-23T15:25:26+00:00","og_image":[{"width":960,"height":640,"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png","type":"image\/png"}],"author":"Irina Maximova","twitter_card":"summary_large_image","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Irina Maximova","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/"},"author":{"name":"Irina Maximova","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058"},"headline":"Stacked Column Charts with Images \u2014 Challenge AnyChart!","datePublished":"2019-01-23T06:12:14+00:00","dateModified":"2019-01-23T15:25:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/"},"wordCount":575,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png","keywords":["AnyChart","bar chart","bar charts","challenge","charts","Charts and Art","column chart","column charts","Data Visualization","data visualization examples","HTML5","html5 charts","JavaScript","javascript charting","JavaScript charting library","javascript charts","js chart","js charting","js charts","stacked bar charts","stacked charts","stacked column charts","Tips and tricks","tutorial"],"articleSection":["AnyChart Charting Component","Challenge AnyChart!","Charts and Art","HTML5","JavaScript","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/","url":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/","name":"Stacked Column Charts with Images \u2014 Challenge AnyChart!","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png","datePublished":"2019-01-23T06:12:14+00:00","dateModified":"2019-01-23T15:25:26+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058"},"description":"We're ready to share a new advanced JS (HTML5) data visualization tutorial. Learn how to add images to stacked column charts\u00a0in AnyChart JavaScript library.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/01\/stacked_challenge.png","width":960,"height":640},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2019\/01\/23\/stacked-column-charts-images-challenge\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Stacked Column Charts with Images \u2014 Challenge AnyChart!"}]},{"@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\/c79061b5c43d09368b8d44b36842b058","name":"Irina Maximova","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g","caption":"Irina Maximova"},"url":"https:\/\/www.anychart.com\/blog\/author\/irina-maximova\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/7242","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\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=7242"}],"version-history":[{"count":44,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/7242\/revisions"}],"predecessor-version":[{"id":7379,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/7242\/revisions\/7379"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=7242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=7242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=7242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}