Stacked Column Charts with Images — Challenge AnyChart!

Image for post
Image for post

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 blog proved to be a great way to show you some of the most interesting ones and explain how to solve them, demonstrating the power and flexibility of our JavaScript charts library. Today’s challenge is about adding images to stacked column charts using AnyChart.

Data Visualization Task

Here’s what question one of our customers asked us for help with the other day:

How to place images on top of a series in stacked bar/column charts?

To solve this data visualization task using AnyChart JS Charts, you typically need the following:

  • use methods from our JS Charts API to transform X and Y values to pixels, and
  • make a few mathematical calculations to display images in a stacked chart series the way you want.

Solution Overview

The first thing to pay attention to is the chart itself — build a stacked column chart (or, if you need horizontal bars instead of columns, build a stacked bar chart).

Then, you’ll need to create a function which overrides the default drawing. If the width and height of a 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’ll show you how right now.

Adding Images to Stacked Column Charts

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:

<img src="http://cdn.anychart.com/ts/icons/anychart.svg">
<img src="http://cdn.anychart.com/ts/icons/anystock.svg">
<img src="http://cdn.anychart.com/ts/icons/anymap.svg">

Now, set a name and meta with the link to the corresponding image for each series, like this:

series1
.name('AnyChart')
.meta('image', 'http://cdn.anychart.com/ts/icons/anychart.svg');

Also, specify the necessary restrictions for the size of the images, in pixels:

var sizeThreshold = 30;

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:

var tmp = series.rendering().shapes();
tmp.push({
name: 'image',
shapeType: 'path',
fillName: 'fill',
canBeHoveredSelected: true,
strokeName: 'stroke',
isHatchFill: false
});

Second, pass tmp to shapes to replace the default shapes:

series.rendering()
.shapes(tmp)
.needsZero(true)

Third, create a function which will be used when drawing each series point and get the current state shapes:

.point(function() {
// get shapes group
var shapes = this.getShapesGroup(this.pointState);

Fourth, calculate the left and right values on the X axis:

var leftX = this.x - this.pointWidth / 2;
var rightX = leftX + this.pointWidth;

Fifth, draw the stacked columns and then the images on them if there’s enough room for that:

shapes['path']
.clear()
.moveTo(leftX, this.zero)
.lineTo(leftX, this.value)
.lineTo(rightX, this.value)
.lineTo(rightX, this.zero)
.close();
if (Math.abs(this.zero - this.value) >= sizeThreshold) {
shapes['image']

}

Finally, repeat the operation to make the images work fine on hover:

shapes = this.getShapesGroup(1);
shapes['image']

Well done! Now everything works as it should.

Image for post
Image for post

Visit the original article on our blog to check out the interactive stacked column chart with images and its full code. You are also welcome to look at this sample and play with its code on the AnyChart Playground. And you 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).

If you have a question or task you don’t know how to solve, please send it to our Support Team at support@anychart.com with “Challenge” in the subject line. We will do our best to help you deal with it!

New challenges will continue to appear in Challenge AnyChart!, and we hope you enjoyed today’s one about how to create stacked column charts with images on top of the series. Don’t miss a post, and thank you for your interest.

Originally published at www.anychart.com on January 23, 2019.

Written by

Cross-platform JavaScript/HTML5 data visualization solutions, flexible JS charts libraries & Qlik Sense extensions for all your dataviz needs: www.anychart.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store