Using fonts

Introduction

ArcadiaCharts can work with any TTF or OTF (OpenType font) font. Any chart element can use an individual font if required.

Defining which fonts to use in the chart

The theme file defines which font is used in which part of the chart. The style variables, which are font definitions, are defined in the <variables> section at the beginning of the theme file. For example:

<variable type="style" name="TitleElement">
    <fontFamily>Bebas</fontFamily>
    <fontSize>12pt</fontSize>
    <color>$WHITE</color>
</variable>

This definition defines a font for the “TitleElement”, which is the title text of the chart. The font “Bebas” is used, in white and with a 12 pt font size.

The following attributes can be defined in a style definition:

  • fontFamily - name of the font family
  • fontSize - font size in px, pt or relative to the chart width or height
  • color - font color in RGBA, HEX or as one of the color names (e.g. $WHITE)
  • fontWeight - font weight, e.g. normal, bold or italic
  • fontEffect: This function enables text effects similar to the CSS3 “font effect” property. Possible values are: “crisp”, “strong”, “emboss”, “outline” and “engrave”

Here's another, somewhat more complex example:

<variable type="style" name="TitleElement">
	<fontFamily>DejaVuSans</fontFamily>
	<fontSize>0.03 * $chartWidth</fontSize>
	<fontWeight>bold</fontWeight>
	<fontEffect>crisp</fontEffect>
</variable>

If no value is given for fontFamily, the default font (currently DejaVu Sans) is used.

It is standard practice that most custom tags or chart elements containing text don´t have any color information. ArcadiaCharts analyses the background color of this text and decides if a black or white font color is more readable. But of course you can force the chart to use any color you wish.

If you want to change the global color of all texts in the chart, use

<variable name="DEFAULT_TEXT_COLOR" type="color" value="rgba( x, y, z, 1.0 )" />

Or you can just use the color attribute on any element or tag

<variable type="style" name="TitleElement">
    <color>rgba(0,0,0,1.0)</color>
</variable>

<variable type="style" name="a">
    <color>rgba(0,0,255,1.0)</color>
</variable>

(The color can be provided as a hex value or a color name instead.)

You can also use this setting to define the global font color, and then use individual “style” variables to overwrite this color for certain chart elements.

It is currently not possible to change the font globally for all font elements.

List of available chart elements

The examples above define the font for the “TitleElement”, which is the title text of the chart. These are all available chart elements:

  • TitleElement: chart title
  • FooterElement: chart footer
  • AxisTick: the text along the axis
  • LegendHeader: the header of the legend
  • LegendTitle: the data series names in the legend
  • LegendFooter: the legend footer (text below the legend)
  • PopupElement: content of the popup element
  • MarkerElementX: text of the marker showing the X-value (appears on the X-axis)
  • MarkerElementY: text of the marker showing the Y-value (appears next to the value point)

Using custom tags

You can also use the style variables to define custom tags. For example, you could write in the theme file:

<variable type="style" name="b">
    <fontWeight>bold</fontWeight>
</variable> 

and then use this tag in the chart code as follows:

new ac.ACLineChartBuilder()
    // ...
    .setTitle("This is a really <b>bold</b> header")
    // ...

Loading fonts

Fonts are loaded during run time from the server and have to be present in the respective directory. (The exception is the default font DejaVu Sans; this font is included in the chart library and does not need to be loaded from the server.)
Directories: Fonts have to be in the arcadiacharts/fonts directory. The fonts used by ArcadiaCharts are in a special Javascript format; putting your TTF or OTF fonts into that directory will not work. See the next chapter on how to convert your fonts into the required format.

The standard ArcadiaCharts distribution contains a variety of fonts. Check the fonts directory for the currently available fonts.

Generating additional / custom fonts

If you want to use a font with ArcadiaCharts that is not included in the distribution, you will need to convert that font into a special format for ArcadiaCharts.

To prepare a font for usage with ArcadiaCharts, follow these steps:

  • Select a TTF or OTF font file that you want to convert. (For some sources of freely available fonts, see below.)
  • Use the Typeface-Converter: http://typeface.neocracy.org/fonts.html („Convert a font“). Select the desired characters to be converted. (More characters mean a larger font file and therefore slightly longer loading times. For most purposes, “Basic Latin” should be sufficient. For texts with umlauts (e.g. German), add “Latin-1 Supplement”. Depending on your chart, “mathematical operators” may be necessary in some cases.)
  • Copy the resulting file to your fonts directory. Rename it according to the font name, retaining the .js.html ending.

Please make sure you respect the license conditions relating to the fonts you are using.

Collections of free, commercially fully usable fonts