Minimal theme for HighCharts

by

T.. Z.. and Octopee

HighCharts is a popular & flexible Javascript framework to create data visualizations. The only trouble is that the default HighChart themes have a lot of 3D, shadows, and gradient that detract from data analysis.

This post walks you through a few steps towards creating a minimal, no “Chartjunk” theme for HighCharts.

Before & After

Basic Bar

Image

Basic Line

Image

Steps towards a minimal theme

1: Include a theme file

This step allows you to create a theme file that can be fully controlled.

  • Create a copy of themes/gray.js. In this example I have named it “zuri.js”
  • Open the bar chart example: examples/bar-basic/index.html
  • Include zuri.js in the file.

Now open the file zuri.js in your favorite text editor. I use Coda.

2: Background

Remove the background color and gradient.

Replace

background:{ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, 'rgb(96, 96, 96)'], [1…

View original post 315 more words

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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


%d bloggers like this: