Learn how to properly format the “y” axis values of your Highcharts chart.
In “Getting Started with Highcharts Part I: Basic Charts,” we covered the absolute basics of how to use the Highcharts jQuery plugin. In that article, we demonstrated that with minimal effort, we can render a professional looking chart in our web page. So the final example was a column chart that provided a data visualization of total 2014 sales in the Acme Widgets company.
But when you look at that final jsFiddle.net link, there are a few areas that could use additioal effort. The first area I wanted to focus on is the “y” axis (aka the “up and down” dimension of our chart). We have properly labeled that axis “US Dollars,” but this approach is inefficient, and the actual dollar amounts are not formatted correctly.
Example # 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function () { $('#container').highcharts({ title: { text: 'Acme Widget Company' }, subtitle: { text: 'Total Sales - 2014' }, chart: { type: 'column' }, xAxis: { categories: ['Sue Frost', 'Jim Stone', 'Linda Brady', 'Edward Lee'] }, yAxis: { title: { text: 'US Dollars' } }, series: [{ showInLegend: false, data: [150, 900, 675, 400] }] }); }); |
So, in Example # 1, we have a column chart that is borrowed from the previous article in this series. The “y” axis is labeled as “US Dollars,” which is ok, but not very efficient. The actual numbers do not have dollar signs next to them, which minimizes the visual impact. Also, if we format these numbers correctly, we shouldn’t need to use the word “Dollar” in the label. So something like “Sales” would be more efficient and visually cleaner.
HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 1: http://jsfiddle.net/gf9d3pq4/1/
Example # 2
|
1 2 3 4 5 6 7 8 |
yAxis: { title: { text: 'Sales' }, labels: { format: '${value}' } } |
In Example # 2, we made two changes: 1) We simplified the label as: “Sales”, 2) We aded a “labels” property. This property is an object with one value: “format”. The value is a string which provides a template for how the “y” axis values should be formatted. In this case, we have added a dollar sign to the left of the number. This is great, but there is still one problem: the highest value on the “y” axis is “1100”. This number is not formatted correctly for most locals. Using the United States as an example, there should be a comma after the “1”. So let’s fix this.
HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 2: http://jsfiddle.net/gf9d3pq4/2/
How to Demo:
- Click the jsfiddle link
- Change the values of the “yAxis” property and then click the “Run” button in the upper-left-hand corner of the screen to see how your changes affect the appearance of the chart.
Example # 3
|
1 2 3 4 5 6 7 8 |
yAxis: { title: { text: 'Sales' }, labels: { format: '${value:,.0f}' } } |
In Example # 3, we updated the labels.format value so that a comma is added for thousands. We also specified no decimal places. The comma is a big improvement, making four-digit numbers display correctly for the United States numbering syntax (proper syntax for other locals will vary).
HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 3: http://jsfiddle.net/gf9d3pq4/3/
How to Demo:
- Click the jsfiddle link
- Change the values of the “yAxis” property and then click the “Run” button in the upper-left-hand corner of the screen to see how your changes affect the appearance of the chart.
Summary
In this article we learned how to format the “y” axis of a Highcharts chart. We discussed the “yAxis” property of the configuration object, the “labels” property, and how to add a dollar sign to properly convey US currency. We also demonstrated how to add a comma so that four-digit numbers are properly formatted.
Helpful Links for How to format the Highcharts “y” Axis
http://api.highcharts.com/highcharts#yAxis.labels
http://stackoverflow.com/questions/19810931/highcharts-y-axis-thousands-separator
WOW 2