ArcadiaCharts can work with any TTF or OTF (OpenType font) font. Any chart element can use an individual font if required.
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:
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.
The examples above define the font for the “TitleElement”, which is the title text of the chart. These are all available chart elements:
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") // ...
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.
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:
Please make sure you respect the license conditions relating to the fonts you are using.
* http://www.fontsquirrel.com/ („100% free for commercial use“) * http://typeface.neocracy.org/fonts.html