Changing the look of your chart

Welcome to the “changing the look of your chart” tutorial. In this tutorial you will learn:

  • How to fit the chart into your website if you use another background color than white.
  • How to resize your chart to make it fit into your layout
  • How themes and color schemes work.
  • How to apply themes and color schemes to your chart.

How to adjust the chart background

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.

How to resize your chart

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.

Styles and Color: Theme and ColorScheme

The “look and feel” of the chart is determined by the two xml-files:

  • the theme
  • the colorScheme

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")
    // ...

Overview of the themes and colorSchemes

Each of the themes and color schemes listed below can be combined.

The following themes are available

theme_standard_business.xml
theme_standard_classic.xml
theme_standard_colorsphere.xml
theme_standard_glazed.xml
theme_standard_pastelshade.xml
theme_standard_signet.xml
theme_standard_smokedglass.xml
theme_standard_velvet.xml
theme_standard_minimal.xml

The following color schemes are available

color_scheme_pigeonblue.xml
color_scheme_blue.xml
color_scheme_darkblue.xml
color_scheme_green.xml
color_scheme_darkgreen.xml
color_scheme_sand.xml
color_scheme_brown.xml
color_scheme_red.xml
color_scheme_darkred.xml
color_scheme_lightgray.xml
color_scheme_mediumgray.xml
color_scheme_darkgray.xml
color_scheme_black.xml
color_scheme_monochrome.xml

Changing the colors of your valuesets

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:

  1. .setColorGenerationMode( ac.ColorGenerationMode.COMPLEMENTARY ) - chooses a variation of colors which are based on the complementary color of your background color.
  2. .setColorGenerationMode( ac.ColorGenerationMode.ANALOGIC ) - chooses a variation of colors which are based on the color of your background color.
  3. .setColorGenerationMode( ac.ColorGenerationMode.SHADES ) - chooses a variation of colors which match your background color exactly but very the brightness of this color
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

Built-in vs. external themes

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:

  1. integrated into the library code as “built-in” theme and “built-in” colorScheme
  2. as external files on your file system in the directory /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.

Enforce use of a built-in or external theme or colorScheme

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.