Skip to content

September 30, 2012

Making a pictograph with Highcharts

by Joe Kuan

Although Highcharts 2.3 doesn’t support pictograph, it is possible to create one. The main idea is to use scatter chart and define each point as an object with marker symbol. You can check out this jsFiddle.

Here I have created a simply method, createPictoPoints, to layout different images for each category. Basically, you have to call this method with your data configuration, then the method returns Highcharts x-axis categories and series configurations. The only issue is that you have to manually adjust how many images should go on each row and how close they are with each other because it depends on the size of your images.

As this is not a native pictograph from Highcharts. To create this pictograph is a bit of a hack that each row is actually a category without a name. The blank row between two categories is also a category without a name. Also it doesn’t support partial image for fraction values.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: