Customizing the color of the data plot

Each of the columns pick a different color by default in the column chart, and the same behavior is exhibited by the bar and the pie chart as well. The line and the area chart are drawn in the same color throughout. However, you can specify the color you want for each of the data plots in any of these charts by using the color attribute of the<set> element.

<set label='2009' value='1487500' color='FFFFDD'/>

You can use the data plot color to highlight a specific data point as well, say the highest revenue in a month, or the lowest, for that matter. It is one of the most commonly used data highlighting techniques wherein the data to be highlighted is given a unique color, while all the other columns have the same color, as you can see in the following screenshot:

Different charts interpret the colors you define for the data plots differently, trying to make them look as good as possible. For example, the 3D Column chart takes a single color for the data plot and uses 3D lighting on top of that, while the 2D Column chart plots the columns using the color you specify with a default white gradient. These options (3D lighting and common gradient for all the plots) are controlled using attributes of the<chart> element. To switch off the 3D lighting, and get a solid color for all the columns in the 3D Column chart, just use<chart use3DLighting='0'...>. Similarly, to use a solid color in the 2D Column chart, that is, to remove the default white gradient that comes up, use<chart plotGradientColor='' ...>. In case you want all the columns to gradient to some other color than the default white, you can set it globally for all the columns as well, using plotGradientColor='333333'.

Customizing the border of the data plot

The 2D Column chart, as you can see in the previous screenshot, has a border around each of the columns. In case you don't like the border, and want to turn it OFF, you can simply set showPlotBorder='0'. If you like the border but not the way it looks, you can customize its color and thickness globally, using the plotBorderColor and plotBorderThickness attributes respectively. You can also have a dashed border around the data plots by setting<chart plotBorderDashed='1'...>.

Having a dashed border around a data point is another way to highlight it. To do this, all you need to do is use<set dashed='1' ...> for the column you want to highlight. The chart that you get will be similar to the following screenshot:

Have a go hero — highlight an anchor in a line chart

While you can highlight a data point in a line chart using<set dashed='1'...> similar to the 2D Column chart, it makes the line segment between that data point and the next one dashed, and could confuse the user as to which data point exactly is highlighted. To highlight a single data point, the best way is to give the anchor a different look from the other anchors. The attributes that govern the looks of an individual anchor are the same as the ones that govern them globally; just that one is for individual<set> elements and another for the global<chart> element anchorSides, anchorRadius, anchorBorderColor, and anchorBgColor. It is usually a good idea to make the anchor highlighted a little bigger in size and darker in color than the other anchors. So go ahead, create a line chart showing the monthly revenue and highlight the month having the highest revenue.