Learning from print: 2

Another great visualization in the New York Times today.

Some really great paradigms that can be emulated:

• Mixture of tabular & graphical data
• The total is displayed right next to the label for each “row”
• No legend off to the right or bottom. Instead each segment is identified, in context on the chart.
• The Total Row is separated & also displayed graphically & numerically.

Minimal theme for HighCharts

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

Basic Line

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, 'rgb(16, 16, 16)']
	]
}

With:

background:'#fff',

3. Bar & line colors

I decided to choose some happy colors for the theme. These are defined on the first of theme. ColourLovers is a great place to find some nice palettes for your chart.

colors: ["#1860A8","#ea7613", "#3F7C20", "#F06078", "#F0C000", "#903060", "#F09000","#55BF3B", "#DF5353", "#7798BF", "#D8DA86"],

4. Fonts

I am a Helvetica fan! There were a few places I had to replace the font family.
It might be easier to just find & replace in highcharts.js, though this has the disadvantage of being overwritten during an upgrade.

• In zuri.js find and replace
  ‘Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif’
  with:
  Helvetica, Arial
• Now, also add font definitions for the X & Y axis labels. Find these sections & add the following:

  labels: {
  style: {
  	color: '#333',
  	font: '12px Helvetica,Arial'
  }

• To hide the labels altogether, find the specific axis label section & add:

  {enabled:false}

• Similarly for the legend. Find the “legend:” section and add the following:

  itemStyle: {
  		color: '#555',
  		font: '12px Helvetica,Arial'
  	},

• Finally, change the font for the tooltips. Find the “tooltips:” section and add the following:

  style: {
  	color: '#333',
  	font: '12px Helvetica,Arial'
  }

5. Remove shadows:

In the plotOptions section, add “shadow:false” to each of the chart types.

series:{
        	shadow: false
        }

6. Remove grid lines

In both the X & Y axis section, add or change the following setting.

gridLineWidth:1

7. Some final changes

• Remove the rounded corners. In the Tooltips and Legend sections add borderRadius:0, and change the remove the gradient definitions from the background section.
• Export buttons:
  Remove the gradient & make them more minimal.To do so, add a background color & make remove the border.

  exporting: {
  		buttons: {
  			exportButton: {
  				borderWidth:0,
  				backgroundColor:'#fff',
  				symbolFill: '#666'
  			},
  			printButton: {
  				borderWidth:0,
  				backgroundColor:'#fff',
  				symbolFill: '#666'
  			}
  		}
  	}

Resources

Download HighCharts

More about “Chart Junk”:

• http://www.edwardtufte.com/tufte/
• http://www.storytellingwithdata.com/
• http://www.juiceanalytics.com/writing/