Knowledge Base

Vertical or horizontal lines or fills

Our charts can display lines or fills on category axis, also lines or fills on value axis. We call these lines and fills Guides.

Adding a guide is easy. AxisBase has a property called guides and it should be array containing one or more guide:

categoryAxis.guides = [{
    category: "2001",
    toCategory: "2003",
    lineColor: "#CC0000",
    lineAlpha: 1,
    fillAlpha: 0.2,
    fillColor: "#CC0000",
    dashLength: 2,
    inside: true,
    labelRotation: 90,
    label: "fines for speeding increased"
}, {
    category: "2007",
    lineColor: "#CC0000",
    lineAlpha: 1,
    dashLength: 2,
    inside: true,
    labelRotation: 90,
    label: "motorcycle fee introduced"
}]

The main thing for the guide is position at which it should be displayed. For non-date based CategoryAxis you set category using category property. In case you need a fill, set toCategory (as for the first guide). Then simply adjust line, fill colors and opacities, add label and that’s it. In case you won’t adjust any property, the guide will look like a regular grid line, as it will use axis grid line settings.

If your category axis is date-based, use date and toDate properties. Values can be both date objects of date strings matching chart.dataDateFormat format.

Adding guide for value axis is exactly the same except you use value and toValue to set position of the guide.

You can add guides to serial, xy, radar and stock charts.