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

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, '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”:

Advertisements

3 thoughts on “Minimal theme for HighCharts

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