Marking weekends or filling single series backround

Deprecated
The information contained in this article is deprecated and is here as an archive only. Refer to the links further down the page, or use search option to find up-to-date information.

Sometimes you might need to have color fills on the background of your chart showing different time periods, marking weekends etc. In most cases you can use Guides for this purpose. However sometimes it is more comfortable to use a regular column graph to achieve the same result. For example - if you need a guide which would fill one series only, it is better to use columns, as guide with the same start and end values will produce line instead of a fill.

Here is an example of non-date-based chart with fills in the background, showing some dependencies.

To make the columns look like fills, you should:

1) create a separate value axis and set stackType to "100%" and hide all the assets of this axis:

var valueAxisColumn = new AmCharts.ValueAxis();
valueAxisColumn.axisAlpha = 0;
valueAxisColumn.stackType = "100%";
valueAxisColumn.labelsEnabled = false;
valueAxisColumn.gridAlpha = 0;
valueAxisColumn.axisAlpha = 0;
chart.addValueAxis(valueAxisColumn);

2) create column graph, assign it to this axis and set columnWidth to 1.01 (we add 0.1 to avoid tiny spaces). You should also set colorField for this graph.

var graph = new AmCharts.AmGraph();
graph.valueAxis = valueAxisColumn;
graph.valueField = "visits";
graph.colorField = "color";
graph.type = "column";
graph.columnWidth = 1.01;
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.showBalloon = false;
chart.addGraph(graph);

Now, in your data you should simply add a field with hex color code for each data item:

{
    "series": "2",
    "value": 984,
    "color": "#CD0D74"
}

That's it.  And here is another example which uses the same technique to mark all the weekends with different color.