Chart Style Idea

• Overview
• Style Idea and Demonstration
• Create a Chart
• Define reusable settings and put them in Style
• Apply a Style
• Styles Inheritance

Overview

While configuring your elements' visual appearance you may have encountered a problem of adjusting your elements' options, especially when these options are common for a whole group of elements. For this case we have a styles node, in which you can describe the style of your color tooltips, labels, markers, i.e. fully configure the view of your chart.

In this section we will describe main parts of chart style and demonstrate how style can be created and applied. The main idea of styles is to segregate visualization and data definition. Visual appearance of elements is defined using certain styles and then you just apply the style to the certain data elements. Style can be applied to data series, data category or single element. Also, styles are used to make charts interactive, you can define how elements will be displayed by default, when selected, when user moves cursor over an element, etc.

Please see all information about element styles in Styles sections of approriate element tutorials and XML Reference, for example:

• Column Chart Styles
• Labels Styles

 

Style Idea and Demonstration

Style is a named set of confuguration nodes for some element, each style holds all unique settings for the element, typically style consists of a main part and so-called states.

Each style should have a unique name among the styles of the same type, you can create <bar_style name="Style1"/> and <marker_style name="Style1"/> at the same time.

Main part holds all default settings for the element, and states define how element looks like when it is hovered, pushed, selected and so on. The number of states supported may differ from style to style.

Most convenient way of using style is to define the settings that wouldn't change (like a marker shape, for example, or line thickness) and create a named style in <styles/> node.

Later, when you create an element you specify the style attribute and set its value to style name.

Let's go through the creation of a simple bar chart to understand how everything works.

Create a Chart

At first we just create a bar chart with several columns without configuring them. We adjust chart's type:

Now we need to create some bars. That is very simple. We create data node, specify Series name and type, add 5 points and set names and values for them:

That's all! Although we have changed only some attributes our chart already works:

Define reusable settings and put them in Style

Now let's configure one of the elements: let it be the first bar. We will change its color in both normal and hover states.

We create the corresponding subnode in bar_style node, and define that our bar should have DarkBlue color in normal mode and Aqua color when we hover on it. So the XML for bar now is as follows:

Apply a Style

Now when we have created our style let's apply it to bar. In point node we create style attribute and enter our style's name there:

Here is the result:

You can also define style for <series> or in <bar_series> to set style for all series or all series in chart.

Styles Inheritance

Whenever you create a style you may want to create it basing on another style - to do this just specify parent attribute and set its value to the name of the style you want to inherit. Sample XML:

If you use XML above - all bars with style="ChildStyle" will have Red fill as well as all styles with style="MainStyle".