In january this year a colleague and me worked on visualizing data with Google Charts for a customer. There was this one request concerning special icons inside of the charts. My first reaction was: "This should not be possible using one of these chart frameworks". Why? Because customizing frameworks is always hard, and the request was very special. It was not about changing colors or adding white space. The wish was to change the default behaviour of a presentation inside a chart.
So in our case we had a pie chart with some slices, that should have icon labels. Normally Google Charts presents a text label or value. So, is it possible to change this with reasonable efforts? Yes it is!
TL;DR
Create and import an icon font to use it in the Pie Chart options at pieSliceTextStyle.
The solution
When we thought about what is showing in the chart, we came to the result: text. A basic pie slice has a color and a text label or value. With checking the Pie Chart options we found out, that you can choose between 'label' or 'value' instead of the default 'percentage' for pieSliceText.
When thinking about showing an icon we needed to think about the context. An icon should represent something outstanding and unique. In the chart we had data, that contained various numbers for different objects.
❕ For this article I simplify things with speaking about healthy fruits to show in the chart. So we can imagine different types of fruits, each with a random value, e.g. the amount of vitamine c.
Back in january we created a chart with text labels first, which we could show to the customer. The bad thing about using text labels was the length of the texts. Too long labels were automatically hidden by Google Charts, which resulted in a colorful tasty pie with missing labels.
After we searched the web as usual for solutions but this time without success, we have consulted again.
So we have fruits and numbers. What are we showing in the chart? Text labels for each fruit. What can we display per icon? Fruits, because each of them is unique and recognizeable.
The main question now was: How can we change the text label into an icon?
Checking the docs again, we found the option pieSliceTextStyle, which allows changing the font per fontName. This was the needed trigger for the magic idea to use an icon font!
With using an icon font we do not change any functionality of the framework. The label still remains text, but with a special font it shows what we want, instead of basic characters. 💥
Create a custom icon font
IcoMoon is an awesome tool for generating custom icon fonts. You can upload svg files and IcoMoon App will convert it and build an icon font for you for free! Thanks guys ✋
You need to add named ligatures (fi) to the icons. This makes it possible to reference and use an icon by a real name.
We have no opportunity to set custom names in the Google Charts data, so the icons must represent the labels by having the exactly same name. If we want to show a plum, we need an icon called Plum. If we want an apple, we need Apple.
Final comparison between default text labels and custom icon labels
I found nothing about that possibility on the web before, so I wanted to share our journey in this short article. It is my first ever written article. I'm open for advices. If you already read about similar approches, please share them with me.
In the end, using icons can have benefits but can also bring problems. You have to decide for each unique situation, if this is something for you.
❕ The numbers and percentages in the following image are randomly chosen. These are no true data!
You can find the code on my CodePen: https://codepen.io/donni106/pen/Exjexow
❕ Do not wonder about missing icons. The icon font was created per IcoMoon free plan, which means "These links expire in 24 hours. To get permanent unchanging links, Go Premium.", sorry!
Top comments (0)