ZingChart Basics: Changing Font

by Derek Fletes

I just wrote a post on how to structure text to maximize data comprehension (via styling, placement, and color). In this post I will be showing you how to execute font changes inside of ZingChart.

Changing Font: Locations

There are three basic locations where you can make the easiest changes to your font while using ZingChart:

  1. HTML: This would be doing some basic inline HTML styling or via the <style></style> tags. However, we do not advise this as there are much easier options (that will add less clutter to your headers).

  2. CSS: Rendering a font in a stylesheet is a good separation of concerns. Since font is going to style stuff on the page, it makes sense to keep all of your styling elements together.

  3. Globals: Styling your font within the globals: {} tag will be the easiest and quickest way to style your fonts. You see the word global and can visually make the connection that changes here will be made to all text across the whole graph.

Below is the sample code for a very simple chart. These changes will occur within the <script></script> tags where ZingChart lives in your code. If you decide to use globals to change fonts, place it below the chart type like I've shown below. It will make it easy to access later.

How To Change Fonts:

Obviously, there are the standard fonts that we can use while styling our text. "Times New Roman" is the example I used in the picture above. This font is generally recognized in CSS and HTML inherently. What happens if we want to use more stylish fonts that aren't inherently recognized?

This is actually really easy to achieve. Normally these font directories include links. This example uses Google Fonts (there are many other font repositories, but Google Fonts is my personal favorite). Choose the font you like and Google will give you a link like this:

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

Input this inside of your head tags and this font will now be available for use in your chart.


Tip: You can just change out the font name at the end of the link for whichever Google font you want.

Ex: Let's say you want to use "Work Sans" instead of "Roboto". It's super easy to do!

<link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet' type='text/css'>

Now you have the stylish web fonts you need. Under this font-family tag, you can now make any type of font related changes you need including, size, weight, etc.

Conclusion

Visualizing data doesn't only extend into your charts. Fonts are really important to comprehension. Styling is now a fully integrated and vital component to websites and data visualizations. Keep these tips in mind and some stylistic changes will improve the presentation of your data.