Highcharts for Designers
Get to know Highcharts to make the most of it with your team.
Having heavily worked on Analytics products for the past year, I realized a few months back that my own understanding, as well as my team, of how charts work was still a bit blurry. So I decided to dig into the matter and learn more about Highcharts, the framework we are using to power all our data visualizations.
Designing an analytics product is not an easy task. What data should be surfaced? How do you convey its meaning in a useful way? What can actually be built by your developers?
Highcharts has been one of the most popular frameworks in the industry for a while now - And it’s easy to see why. It’s so powerful, flexible, and simple. It just takes a bit of energy to get through the very dense and detailed documentation.
The goal of this post is to familiarize you with the terminology and possibilities of Highcharts. You can see it as a quick overview of the things to know as a Designer working on an analytics project.
Charts Anatomy
You won’t believe how many different words are used to define the same things regarding charts. Everyone has their own way to express the same concepts. Make sure to align the team’s vocabulary to keep communication clear throughout the project. Let’s start with some basic elements:
Title & Subtitle
The style and position of these 2 elements is very flexible. You can even use the subtitle as footnote for instance.
X-Axis & Y-Axis
The axis labels, tick marks and gridlines are closely linked together.
There are 4 different types of axis: linear (0, 1, 2, 3, …), algorithmic (0, 10, 100, 1000, …), datetime (Jul 1, Jul 2, Jul 3, …), and categories (banana, strawberry, kiwi, …). Also, you can add any format to y-axis labels, such as $, °C, and %.
You can also enable minor tick marks and gridlines to add a better readability of the values.
Series
A series is a set of data, for example a line graph or one set of columns.
Because series are the most important element in a chart, Highcharts offers you a lot of options to customize them. You can edit the style (color, thickness, etc), play with animations, and more. You can also define the style of a specific point, add highlight zones (for predictions, for instance), etc.
In the context of line or area charts, series can be either stacked or overlapping.
Tooltips
Tooltips appear when a user hovers over a point in a series. Tooltips are one of the most customizable elements on a chart. You can edit its content, style, and position.
Legend
The legend displays the series in a chart with a symbol (usually a colored dot) and the name of the series. The user can disable and enable a series from the legend.
Plot Lines and Bands
These are useful artifacts to highlight a specific event (e.g. date) or a range of events.
Zooming
This interaction allows the user to drag her mouse in the chart to zoom in along a specific axis or both.
Drill Down
This feature allows the user to click on any point to dig into a sub-series.
3D
It’s there, but it doesn’t mean you need to use it…
Accessibility
Add a description to a chart, its content, points, or series, so that screen reader users can still get the main takeaway.
Responsiveness
Very similar to media queries breakpoints in CSS. This allows you to refine the look of your charts for different screen sizes.
Types of Charts
There are many types of charts and combinations are possible. So the goal is not to tell you which one to use when. I leave you to this great post. Here is a quick overview:
Bar Chart
You can also put bar charts in a grid to create a Trellis chart:
Column Chart
You can also make a column chart into an histogram by removing the padding.
Area Chart
Areaspline Chart
Angular Gauge
Similar to a speedometer.
And it’s more modern version, the Activity Gauge:
Funnel Series
You can edit the overall size and the neck height and width.
Line Chart
You can also use steps instead of straight lines:
Pie Chart
A pie chart is composed of sectors.
You can also overlap pie charts to get a donut chart:
Spline Chart
Scatter Chart
This chart is basically a cloud of points from a series.
Box Plot Series
Convenient way to depict groups of data through their five-number summaries (min, quantiles, and max).
Polar Chart
Heat Map Series
A matrix of shades of a color to represent the intensity of each point of the series.
Treemap
The data is structured as a tree, where each point represents a node. You can play with 4 different algorithms to display the data. This one must be the most obscure chart type. Lucky us, not a lot of applications for simple analytics dashboards.
Waterfall Series
Show a cumulative effect. All columns can have their own style.
Range Series
This series type can be added to area, areaspline, and column charts to represent a range of values.
Error Bar Series
This series can be added to another series to represent uncertainty. Error bars are composed of a vertical stem and 2 whiskers. Both can be styled individually.
I hope that by now you understand better what a chart is, and what types of charts you can use with Highcharts.
Style
I talked a bit about the style of different elements above, and here are some more details of what you can do:
- Freely position all the elements of a chart.
- Apply shadows to a lot of them.
- Have custom borders and background colors for the chart and plot.
- Only one font can be used in each chart.
- Define custom color, width, etc to axis, tick marks, and gridlines.
- Have custom background color, border radius, and border width on your tooltips.
- Play with the easing and duration any element animation of a chart when loaded or at every change.
Conclusion
I hope that by now you have a better understanding of how HighCharts works and what you can do with it. I’ve tried to keep it short and sweet so that you come away with enough to start a productive discussion with your team’s front-end engineers.
I will also work on HighMaps and HighStocks, 2 more advanced products, in the same format. Make sure to follow me to be notified when I post them.
