Welcome to the “changing the look of your chart” tutorial. In this tutorial you will learn:
A chart is always painted on a rectangular white frame, the “canvas”. If the chart has a shadow or rounded corners there is always a piece of the canvas visible. This is no problem as long as the background-color of the website is white. But if your website has a colored background there is a white rectangular frame visible around the chart. The following figure illustrates the issue.
In order to integrate the chart seamlessly into the surrounding website, the canvas background color can be set to the same color as the website background. This is done using the setColorVariable(“SURROUNDING_WEBSITE_COLOR”, “colorString”) function of the builder.
new ac.ACLineChartBuilder() // ... .setColorVariable("SURROUNDING_WEBSITE_COLOR", "#eeeeee" ) // ...
You can replace “colorString” with hex-notation ( ”#eeeeee” ), rgb-notation ( “rgb(238,238,238)” ), rgba-notation ( “rgba(238,238,238,1.0)” ) and even css color names ( “lightgray” ). Most likely the color of your website will be set up as a hex value and you can copy & paste it here.
In most cases when you need to integrate a chart into an existing website, you want the chart to have a certain size to match the width of your website or your text column. In arcadiaCharts you can use the setHeight(height) and setWidth(width) commands:
new ac.ACLineChartBuilder() // ... .setWidth(400) .setHeight(250) // ...
The parameters “width” and “height” are set in pixels. Without any settings to the contrary the library will draw a chart which is 650 pixels wide and 400 pixels high. Please keep in mind that you can scale the chart as you like, but making the charts tiny can end up with the problem that the chart area gets too small to display the desired information.
The “look and feel” of the chart is determined by the two xml-files:
The theme defines the general layout of a chart (line width, frame style, fonts, background style, etc.). The colorScheme takes these elements and assigns colors to them.
While doing the “my first line/bar/pie chart” tutorial you already used the “business” theme with a “blue” colorScheme. These are set up as default when no theme/colorScheme is defined. Our library comes with 8 different themes and 13 colorSchemes which can be used to get 104 possible variations. This results in a wide initial choice of looks combined with great flexibility to customize your chart by modifying the themes/colorSchemes to your liking or to match your corporate identity.
A theme is set with the builder's setTheme( theme )
command.
The color scheme is set with the builder's setColorScheme( colorScheme )
command.
new ac.ACLineChartBuilder() // ... .setTheme("theme_standard_classic.xml") .setColorScheme("color_scheme_green.xml") // ...
Each of the themes and color schemes listed below can be combined.
You have the choice of using the default value set colors which are defined in the ColorScheme or selecting out one of our color generation modes which choose colors matching your background color. If you wish complete control of your value set, you can edit the value set colors in your ColorScheme.
The color generation modes are:
ac.ColorGenerationMode.COMPLEMENTARY | ![]() |
ac.ColorGenerationMode.ANALOGIC | ![]() |
ac.ColorGenerationMode.SHADES | ![]() |
Default color scheme | ![]() |
If you wish to change the ColorScheme to use your own value set colors, please refer to the "Using ColorSchemes and Palettes" manual
As you might have noticed in the example code above, no path has been specified for the theme and colorScheme xml-files. This is due to the fact that all standard themes and colorSchemes exist twice:
/arcadiacharts/themes
if you downloaded the complete distribution of the arcadiaCharts library.The “built-in” themes are meant for hassle-free “off-the-shelf” usage. You don`t need to worry about paths and you save bandwidth because no additional files have to be transferred. External themes and colorschemes can easily be modified and adapted to your needs.
If you specify only the name of a theme or colorScheme (like theme_standard_plain.xml
) the internal or built-in version of a theme or colorScheme will be used. If you specify the complete path (like /arcadiacharts/theme/theme_standard_plain.xml
) the external version of the theme or colorScheme will be used.
Should you need to enforce the use of either a built-in or an external theme / colorScheme, you can do it by adding an additional parameter to the builder-command.
setTheme( theme, ac.Origin.EXTERNAL )
or
setColorScheme( colorScheme, ac.Origin.BUILT_IN )
In the example below the use of the external theme and colorScheme is enforced. This can be useful if you modify some themes or colorSchemes without changing their names and keep them in the root folder of your installation instead of the preset subfolder. In this case the builder can get confused since there is no path which indicated that you want to load an external theme.
new ac.ACLineChartBuilder() // ... .setTheme("theme_standard_smokedglass.xml", ac.Origin.EXTERNAL) .setColorScheme("color_scheme_lightgray.xml", ac.Origin.EXTERNAL) // ...
The result should look like this:
Congratulations, you now know everything about fitting the chart into your website and applying themes and colorSchemes.