Timescale and X-Axis Settings

Overview

No matter how many charts, series and technical indicators you create in one instance of AnyChart Stock Component - you always use one common argument, Date Time Axis (or, which is the same, X-axis or Timescale).

Some of X-axis settings are global and affect all charts at once; others can be personalized for each chart individually.

An X-axis can show major and minor ticks; each of these has its own settings. The illustration below demonstrates an example for minor and major ticks:

Major ticks stand for larger periods of time, while minor - for smaller ones.

to top

Timescale Settings

This section describes timescale settings that are common to all charts in the component.

Initial Visible Range

By default the component always shows 10 last days of all data sets defined. All data that falls in this range are shown on the chart, scroller and all range selector elements get the default settings to fit this 10 last days.

You can change the default range shown using selected_range node. XML below shows how, for example, one year instead of 10 days can be shown:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <time_scale>
05       <selected_range type="Unit" unit="Year" count="1" anchor="LastDate" />
06     </time_scale>
07   </settings>
08 </stock>
01{
02  settings: {
03    timeScale: {
04      selectedRange: {
05        type: "Unit",
06        unit: "Year",
07        count: 1,
08        anchor: "LastDate"
09      }
10    }
11  }
12}

selected_range node has several attributes to configure the range, these attributes are described in the table below:

Attribute Possible Values Description
type Unit
YTD
Max
Custom


Type of the selected range, this attribute is "main" - other attributes depend on its value.

Unit - allows to define date time unit type, number of units and range anchor (using unit, count and anchor attributes) to set selected range.

For example, to select 5 last days you need to set:
<selected_range type="Unit" unit="Day" count="5" anchor="LastDate"/>.

YTD - selects the latest calendar year in all data sets, from the 1st of January to the last available date. No additional settings needed.

Max - selects all available data. No additional settings needed.

Custom - allows to define custom selected range, from start_date to end_date, which should be set.

Default value is "Unit".

anchor FirstDate
Center
LastDate


This attribute works only when type is set to "Unit", it sets the point from which unit based range is calculated.

FirstDate - unit-based selected range starts from the first date in all data sets. Just as shown in the illustration below:

Center - unit-based selected range is centered in the all data sets time scale. Just as shown in the illustration below:

LastDate - unit-based selected range ends in the last date of all data sets. Just as shown in the illustration below:

Default value is "LastDate".

unit
Year
Semester
Quarter
Month
ThirdOfMonth
Week
Day
Hour
Minute
Second
Millisecond

Date time unit, when type is set to "Unit".

Default value is "Day".

count Positive Number


Number of date time units. The length of the range is calculated as count*unit.

For example:
<selected_range type="Unit" unit="Hour" count="48"/> - 48 hours (2 days) range;
<selected_range type="Unit" unit="Day" count="200"/> - 200 days range;
<selected_range type="Unit" unit="Month" count="6"/> - 6 months;
<selected_range type="Unit" unit="Month" count="12"/> - 12 months (1 year);
<selected_range type="Unit" unit="Year" count="1"/> - 1 year;

Default value is 10.

start_date DateTime value


start_date attribute works only when type is set to "Custom", it sets custom range start date.

This timestamp should be set according to: "yyyy-MM-dd hh:mm:ss.fff" mask. Learn why so in: Chart Settings: Input Date-Time Format article.

There is no default for this parameter.

end_date DateTime value


end_date attribute works only when type is set to "Custom", it sets custom range end date.

This timestamp should be set according to: "yyyy-MM-dd hh:mm:ss.fff" mask. Learn why so in: Chart Settings: Input Date-Time Format article.

There is no default for this parameter.

Initial selected range affects Range Selector preset panel. If initial settings matches any preset in the panel - appropriate preset button becomes selected.

Learn more about initial range selection in conjunction with Range Selector panel in the following article:

Several samples below show different initial range settings:

1. Unit based selection. Three months range:

Live Sample:  Setting Up Default Visible Range - Unit Type

2. Max selector. Showing all available data:

Live Sample:  Setting Up Default Visible Range - Max Type

3. YTD selector. Showing the latest year:

Live Sample:  Setting Up Default Visible Range - YTD Type

4. Custom selector. Showing custom range:

Live Sample:  Setting Up Default Visible Range - Custom Type

to top

Oridnal and Scatter Modes: Regular and Irregular Data Intervals

The X-axis allows two operating modes: By default, the data is plotted evenly, point by point, no matter how far the dates stay apart from each other on the timescale. This is what is called the "Ordinal" mode. If you want to plot the data within the actual intervals ("distance") between the points, you need to turn the ordinal mode off, this mode is called "Scatter".

Here is the XML sample demonstrating how to turn off the ordinal mode:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <time_scale is_ordinal="false" />
05   </settings>
06 </stock>
01{
02  settings: {
03    timeScale: {
04      isOrdinal: false
05    }
06  }
07}

The live sample below shows Microsoft stocks trading data for several years. This data set contains daily data. When the ordinal scale is used - you don't see non-trading days on the chart, but in this sample you can see the days without data - they are still displayed:

Live Sample:  Using Data at Irregular Intervals

to top

Minimum and Maximum

By default engine determines minimum and maximum (start and end date) automatically: it finds the oldest and newest timestamps in all datasets and makes the minimum and maximum. You can change this and set your own minimum and maximum, the way to do this is different in ordinal and scatter modes.

to top

Scatter Mode

In scatter mode (when is_ordinal is set to "false") minimum and maximum are set as shown below, date time should follow Input Date Time Settings.

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <time_scale minimum_mode="CustomValue" maximum_mode="CustomValue" minimum="2010-04-12" maximum="2012-04-12" />
05   </settings>
06 </stock>
01{
02  settings: {
03    timeScale: {
04      minimumMode: "CustomValue",
05      maximumMode: "CustomValue",
06      minimum: 2010-04-12,
07      maximum: 2012-04-12
08    }
09  }
10}

to top

Ordinal Mode

In ordinal mode (when is_ordinal is set to "true") minimum and maximum are set as shown below, date time should follow Input Date Time Settings.

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <time_scale minimum_mode="CustomValue" maximum_mode="CustomValue" minimum="2010-04-12 08:00:00" maximum="2010-04-12 17:00:00" minimum_filling_unit="Minute" maximum_filling_unit="Minute" minimum_filling_unit_count="15" maximum_filling_unit_count="15" />
05   </settings>
06 </stock>
01{
02  settings: {
03    timeScale: {
04      minimumMode: "CustomValue",
05      maximumMode: "CustomValue",
06      minimum: 2010-04-12 08:00:00,
07      maximum: 2010-04-12 17:00:00,
08      minimumFillingUnit: "Minute",
09      maximumFillingUnit: "Minute",
10      minimumFillingUnitCount: 15,
11      maximumFillingUnitCount: 15
12    }
13  }
14}

Note that setting minimum and maximum in ordinal mode extends further than just defining two timestamps: you should tell component what unit should be used (in "minimum_filling_unit" and "maximum_filling_unit" attributes) and how many units per point should be used (in "maximum_filling_unit_count" and "minimum_filling_unit_count" attributes).

How it works? Say you are charting some intraday data that comes almost every second:

And you want timescale to start at ten o'clock sharp and end at eleven o'clock sharp. The settings for minimum and maximum should look like that:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <time_scale minimum_mode="CustomValue" maximum_mode="CustomValue" minimum="1974-08-19 10:00:00" maximum="1974-08-19 11:00:00" minimum_filling_unit="Second" maximum_filling_unit="Second" minimum_filling_unit_count="1" maximum_filling_unit_count="1" />
05   </settings>
06 </stock>
01{
02  settings: {
03    timeScale: {
04      minimumMode: "CustomValue",
05      maximumMode: "CustomValue",
06      minimum: 1974-08-19 10:00:00,
07      maximum: 1974-08-19 11:00:00,
08      minimumFillingUnit: "Second",
09      maximumFillingUnit: "Second",
10      minimumFillingUnitCount: 1,
11      maximumFillingUnitCount: 1
12    }
13  }
14}

Another example, if you have some monthly data:

you may want to see it it context of a decade:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
05   </settings>
06 </stock>
01{
02  settings: {
03    timeScale: {
04      minimumMode: "CustomValue",
05      maximumMode: "CustomValue",
06      minimum: 1970,
07      maximum: 1980,
08      minimumFillingUnit: "Month",
09      maximumFillingUnit: "Month",
10      minimumFillingUnitCount: 1,
11      maximumFillingUnitCount: 1
12    }
13  }
14}

The same logic as shown in two samples above applies to any other case: you should understand what is an average interval in your data sets and decide which units to use. Here is a sample of ordinal scale with minimum and maximum set:

Live Sample:  X-Axis - Minimum and Maximum in Ordinal Mode

Tick Count

No matter what range of data is shown, AnyChart Stock Component shows some data labels, and this number never exceeds a certain predefined value. Actually, this is the limit on the number of dates displayed on the X-axis at the moment. By default, the limit is set to 12, but you can change it.

This sample XML demonstrates how you can alter this limit:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <time_scale max_ticks_count="22" />
05   </settings>
06 </stock>
01{
02  settings: {
03    timeScale: {
04      maxTicksCount: 22
05    }
06  }
07}

As you can see on the sample, the limit is set by the max_ticks_count attribute.

The live sample below uses the limit of 20 labels; you should use a great number when the chart is relatively large:

Live Sample:  X-Axis - Controlling Ticks Count

to top

Major and Minor Labels

When user alters the period shown on the chart, the component changes the label that displays the range actually shown on it.

For example if user zooms in to the two-year range, he will see two-year labels, e.g., 2006 and 2007, along with a number of minor labels: Jan, Feb, Mar, and so on.

You can set how exactly the minor and major labels should appear.

AnyChart Stock Component supports the following intervals for the timescale:

The sample XML below shows the default settings; use this sample as a template for creating or customizing your own settings:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <time_scale>
05       <major_interval_formats>
06         <years><![CDATA[%yyyy]]></years>
07         <months><![CDATA[%MMM]]></months>
08         <days><![CDATA[%MMM %dd]]></days>
09         <hours><![CDATA[%MMM-%dd %hh %tt]]></hours>
10         <minutes><![CDATA[%dd %hh:%mm]]></minutes>
11         <seconds><![CDATA[%hh:%mm:%ss]]></seconds>
12         <milliseconds><![CDATA[%hh:%mm:%ss.%fff]]></milliseconds>
13       </major_interval_formats>
14       <minor_interval_formats>
15         <months><![CDATA[%MMM]]></months>
16         <days><![CDATA[%dd]]></days>
17         <hours><![CDATA[%hh %tt]]></hours>
18         <minutes><![CDATA[%hh:%mm]]></minutes>
19         <seconds><![CDATA[%hh:%mm:%ss]]></seconds>
20         <milliseconds><![CDATA[%fff]]></milliseconds>
21       </minor_interval_formats>
22     </time_scale>
23   </settings>
24 </stock>
01{
02  settings: {
03    timeScale: {
04      majorIntervalFormats: {
05        years: "%yyyy",
06        months: "%MMM",
07        days: "%MMM %dd",
08        hours: "%MMM-%dd %hh %tt",
09        minutes: "%dd %hh:%mm",
10        seconds: "%hh:%mm:%ss",
11        milliseconds: "%hh:%mm:%ss.%fff"
12      },
13      minorIntervalFormats: {
14        months: "%MMM",
15        days: "%dd",
16        hours: "%hh %tt",
17        minutes: "%hh:%mm",
18        seconds: "%hh:%mm:%ss",
19        milliseconds: "%fff"
20      }
21    }
22  }
23}

When creating a formatting string, you can use the tokens described in Date-Time Formatting and combine them with static text:

For example, to set all ticks to appear with the label in the yy/mm/dd format (e.g.: 07/02/13), you would have to use the following formatting string: "%yy/%MM/%dd". The sample XML below demonstrates how to set this format:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <time_scale>
05       <major_interval_formats>
06         <years><![CDATA[%yy/%MM/%dd]]></years>
07         <months><![CDATA[%yy/%MM/%dd]]></months>
08         <days><![CDATA[%yy/%MM/%dd]]></days>
09       </major_interval_formats>
10       <minor_interval_formats>
11         <months><![CDATA[%yy/%MM/%dd]]></months>
12         <days><![CDATA[%yy/%MM/%dd]]></days>
13       </minor_interval_formats>
14     </time_scale>
15   </settings>
16 </stock>
01{
02  settings: {
03    timeScale: {
04      majorIntervalFormats: {
05        years: "%yy/%MM/%dd",
06        months: "%yy/%MM/%dd",
07        days: "%yy/%MM/%dd"
08      },
09      minorIntervalFormats: {
10        months: "%yy/%MM/%dd",
11        days: "%yy/%MM/%dd"
12      }
13    }
14  }
15}

The live sample below demonstrates these settings in action:

Live Sample:  X-Axis - Custom Intervals Formatting

You can localize labels too; here is a sample XML for the localization:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <time_scale>
05       <major_interval_formats>
06         <years><![CDATA[%yyyy年]]></years>
07         <months><![CDATA[%M月]]></months>
08         <days><![CDATA[%M月 %dd日]]></days>
09         <hours><![CDATA[%M月 %dd日 %HH ]]></hours>
10         <minutes><![CDATA[%dd日 %HH:%mm]]></minutes>
11         <seconds><![CDATA[%HH:%mm:%ss]]></seconds>
12         <milliseconds><![CDATA[%HH:%mm:%ss.%fff]]></milliseconds>
13       </major_interval_formats>
14       <minor_interval_formats>
15         <months><![CDATA[%M月]]></months>
16         <days><![CDATA[%dd日]]></days>
17         <hours><![CDATA[%HH]]></hours>
18         <minutes><![CDATA[%HH:%mm]]></minutes>
19         <seconds><![CDATA[%HH:%mm:%ss]]></seconds>
20         <milliseconds><![CDATA[%fff]]></milliseconds>
21       </minor_interval_formats>
22     </time_scale>
23   </settings>
24 </stock>
01{
02  settings: {
03    timeScale: {
04      majorIntervalFormats: {
05        years: "%yyyy年",
06        months: "%M月",
07        days: "%M月 %dd日",
08        hours: "%M月 %dd日 %HH ",
09        minutes: "%dd日 %HH:%mm",
10        seconds: "%HH:%mm:%ss",
11        milliseconds: "%HH:%mm:%ss.%fff"
12      },
13      minorIntervalFormats: {
14        months: "%M月",
15        days: "%dd日",
16        hours: "%HH",
17        minutes: "%HH:%mm",
18        seconds: "%HH:%mm:%ss",
19        milliseconds: "%fff"
20      }
21    }
22  }
23}

Now you can see how to combine tokens with static text.

The live sample below demonstrates the Chinese localization of AnyChart Stock Component:

Live Sample:  X-Axis - Formatting Labels

to top

Right and left paddings

There are two option for right and left time scale paddings:

Auto margins adjustment

You can adjust right and left paddings of the time scale so the series like CandleStick, OHLC, Bar and RangeBar are shown uncut at the edges.

To enable paddings you have to enable adjust_margins:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <time_scale adjust_margins="true" />
05   </settings>
06 </stock>
01{
02  settings: {
03    timeScale: {
04      adjustMargins: true
05    }
06  }
07}

Illustration below shows how adjust_margins affect the chart:

AnyChart Stock Timescale margins adjustment

As you can see, when adjust_margins is set to true the first and the last candlesticks are not cut in half, but Area series has paddings between the area and the border of the chart.

Note: adjust_margins flag is global for all charts and engine adds paddings, only if there is some bar, candlestick or ohlc series on some chart.

Here is a live sample, that demonstrates how adjust_margins affects the chart display:

Live Sample:  Timescale left-right margins

Manual paddings settings

If you want to create the margins of certain size you can use pixel_margins attribute, which sets the pixel margin to the left and to the right. Sample XML/JSON snippet to set this attribute:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <time_scale pixel_margins="15" />
05   </settings>
06 </stock>
01{
02  settings: {
03    timeScale: {
04      pixelMargins: 15
05    }
06  }
07}

Illustration below shows what this attribute does with the chart display:

AnyChart Stock Timescale Margins

Live sample with pixel_margins set to 30 pixels:

Live Sample:  Timescale left-right pixel margins

 

Note: pixel_margins affects all charts and it can be combined with adjust_margins.

Different Left and Right Paddings

You can fine tune paddings and specify different padding to the right and to the left using left_pixel_margin and right_pixel_margin attributes. They override value set in pixel_margins. Here is a sample of the chart with no padding to the left and big padding to the right:

Live Sample:  Timescale - different left and right pixel margins

to top

Local Settings for Specific Chart

The above sections have described the global settings that affect all the charts. Some settings can be customized to affect a specific chart only. These settings are to be made in the <x_axis> subnode of the <chart> node. Here is a sample XML for that:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <charts>
05       <chart>
06         <x_axis>
07           <labels enabled="false" />
08         </x_axis>
09       </chart>
10     </charts>
11   </settings>
12 </stock>
01{
02  settings: {
03    charts: [
04      {
05        xAxis: {
06          labels: {
07            enabled: false
08          }
09        }
10      }
11    ]
12  }
13}

Enable or Disable X-Axis Labels

By default, labels are shown for all the charts; however, when you use two or more charts, you may want to turn off the labels for some of them.

Here is a sample XML for turning off labels for one of the charts:

XML/JSON Syntax
Plain code
01 <chart>
02   <x_axis>
03     <labels enabled="false" />
04   </x_axis>
05 </chart>
01{
02  xAxis: {
03    labels: {
04      enabled: false
05    }
06  }
07}

The live sample below shows a chart with stock data and an MFI chart; labels on the MFI chart are disabled:

Live Sample:  X-Axis - Enable and Disable Labels

to top

Gridlines

Gridlines for major and minor ticks are configured separately. For both major and minor ticks you can use solid and dashed lines with the full set of settings. Here is a sample XML with settings for different colors and transparency levels for major and minor ticks:

XML/JSON Syntax
Plain code
01 <chart>
02   <x_axis>
03     <major_grid>
04       <line enabled="true" color="DarkRed" opacity="0.5" />
05     </major_grid>
06     <minor_grid>
07       <line enabled="true" color="DarkRed" opacity="0.05" />
08     </minor_grid>
09   </x_axis>
10 </chart>
01{
02  xAxis: {
03    majorGrid: {
04      line: {
05        enabled: true,
06        color: "DarkRed",
07        opacity: 0.5
08      }
09    },
10    minorGrid: {
11      line: {
12        enabled: true,
13        color: "DarkRed",
14        opacity: 0.05
15      }
16    }
17  }
18}

The live sample below demonstrates the use of such settings:

Live Sample:  X-Axis Gridline Settings

To use dashed lines instead of solid, set the dashed property to true in the <line> node. Below is a sample XML for enabling and customizing dashed lines for gridlines:

XML/JSON Syntax
Plain code
01 <chart>
02   <x_axis>
03     <minor_grid>
04       <line color="#A0A0A0" dashed="true" dash_length="3" dash_space="3" pixel_hinting="true" />
05     </minor_grid>
06     <major_grid>
07       <line color="#B5B5B5" dashed="true" dash_length="3" dash_space="3" pixel_hinting="true" />
08     </major_grid>
09   </x_axis>
10 </chart>
01{
02  xAxis: {
03    minorGrid: {
04      line: {
05        color: "#A0A0A0",
06        dashed: true,
07        dashLength: 3,
08        dashSpace: 3,
09        pixelHinting: true
10      }
11    },
12    majorGrid: {
13      line: {
14        color: "#B5B5B5",
15        dashed: true,
16        dashLength: 3,
17        dashSpace: 3,
18        pixelHinting: true
19      }
20    }
21  }
22}

The live sample below demonstrates the use of dashed lines for gridlines:

Live Sample:  X-Axis - Using Dashed Gridlines

Learn more about gridline settings in XML Reference.

to top

Label Settings

You can customize the appearance of major and minor tick labels.

Font

Labels font can be customized in the <font> node; here is a sample XML that shows how you can do that:

XML/JSON Syntax
Plain code
01 <chart>
02   <x_axis>
03     <labels>
04       <major_labels>
05         <font family="Arial" size="11" bold="true" color="DarkRed" />
06       </major_labels>
07       <minor_labels enabled="true">
08         <font family="Arial" size="11" bold="false" color="#000000" />
09       </minor_labels>
10       <background>
11         <fill type="Solid" color="White" />
12       </background>
13     </labels>
14   </x_axis>
15 </chart>
01{
02  xAxis: {
03    labels: {
04      majorLabels: {
05        font: {
06          family: "Arial",
07          size: 11,
08          bold: true,
09          color: "DarkRed"
10        }
11      },
12      minorLabels: {
13        enabled: true,
14        font: {
15          family: "Arial",
16          size: 11,
17          bold: false,
18          color: "#000000"
19        }
20      },
21      background: {
22        fill: {
23          type: "Solid",
24          color: "White"
25        }
26      }
27    }
28  }
29}

The live sample below demonstrates the setting in action:

Live Sample:  X-Axis - Labels Font Settings

Learn more about font settings in the Font Article or XML Reference.

to top

Background

Label background lies beneath all labels and is configured in the <background> node. Here is a sample XML that shows how you can customize background settings:

XML/JSON Syntax
Plain code
01 <chart>
02   <x_axis>
03     <labels>
04       <background enabled="true">
05         <fill enabled="true" type="Solid" color="#ECF3CB" />
06         <border enabled="true" color="#667619" />
07       </background>
08     </labels>
09   </x_axis>
10 </chart>
01{
02  xAxis: {
03    labels: {
04      background: {
05        enabled: true,
06        fill: {
07          enabled: true,
08          type: "Solid",
09          color: "#ECF3CB"
10        },
11        border: {
12          enabled: true,
13          color: "#667619"
14        }
15      }
16    }
17  }
18}

The live sample below demonstrates the settings in action:

Live Sample:  X-Axis - Labels Background Settings

Learn more about background settings in the Background Article or XML Reference.

to top

Helper Label

Helper Label is actually a major label that "sticks" to the left of the X-axis and helps user to understand what period is displayed there. The illustration below provides a demonstration of a Helper Label:

This label doesn't have any special settings - it uses major tick labels settings. By default, it is turned on, but you can turn it off at any time.

Here is a sample XML that shows how you can turn Helper Label off:

XML/JSON Syntax
Plain code
01 <chart>
02   <x_axis>
03     <labels show_helper_label="false" />
04   </x_axis>
05 </chart>
01{
02  xAxis: {
03    labels: {
04      showHelperLabel: false
05    }
06  }
07}

to top

Date Highlighter

Date Highlighter is the vertical line drawn though the date, currently pointed at by the mouse pointer. This element is very helpful when working with multiple data series; it gives user a clear idea of the date the points are presented for in the legend and titles.

Date Highlighter combined with Series Value Highlighter or Y Axis Value Highlighter form an element known to end-users as Crosshair.

By default, Date Highlighter is enabled and displayed on all charts as a gray line. Besides the line, you can also display a single or multiple labels with current date or time combined with a static text.

Look at the captions on the picture below to get a better idea of what this all is about:

Date Highlighter is configured for each chart individually. For any chart, you can define unique settings for the element or completely disable it.

Line

The vertical line can be fully customized. You can draw it with a solid or dashed line alike.

Below is a sample XML syntax for customizing a line for Date Highlighter:

XML/JSON Syntax
Plain code
01 <chart>
02   <x_axis>
03     <date_highlighter enabled="true">
04       <line color="#333333" thickness="2" opacity="1" />
05     </date_highlighter>
06   </x_axis>
07 </chart>
01{
02  xAxis: {
03    dateHighlighter: {
04      enabled: true,
05      line: {
06        color: "#333333",
07        thickness: 2,
08        opacity: 1
09      }
10    }
11  }
12}

The live sample below demonstrates different line configuration options. The first chart uses the default settings; the second one uses a solid, two pixel-wide line; the third one uses a red dashed line:

Live Sample:  X-Axis Date Highlighter - Line Settings

For details on customizing Date Highlighter lines, please refer to XML Reference.

to top

Labels

Date Highlighter can have a single or multiple labels. The label can display the current date in a custom format combined with a static text.

Below is the sample XML syntax for adding a label positioned over the X-Axis draft area:

XML/JSON Syntax
Plain code
01 <chart>
02   <x_axis>
03     <date_highlighter enabled="true">
04       <line thickness="1" color="#777777" dashed="false" opacity="1" />
05       <labels>
06         <label anchor="Bottom" x_padding="0" y_padding="0" valign="Bottom" halign="Center">
07           <format><![CDATA[{%Date}{"%MMM %dd, %yyyy"}]]></format>
08           <font family="Tahoma" size="9" bold="true" color="White" />
09           <background enabled="true">
10             <fill enabled="true" type="Solid" color="#6D6D6D" opacity="1" />
11             <border enabled="false" color="#CBAF87" />
12             <corners type="Rounded" all="3" />
13             <inside_margin left="3" right="3" />
14           </background>
15         </label>
16       </labels>
17     </date_highlighter>
18   </x_axis>
19 </chart>
01{
02  xAxis: {
03    dateHighlighter: {
04      enabled: true,
05      line: {
06        thickness: 1,
07        color: "#777777",
08        dashed: false,
09        opacity: 1
10      },
11      labels: [
12        {
13          anchor: "Bottom",
14          xPadding: 0,
15          yPadding: 0,
16          valign: "Bottom",
17          halign: "Center",
18          format: "{%Date}{\"%MMM %dd, %yyyy\"}",
19          font: {
20            family: "Tahoma",
21            size: 9,
22            bold: true,
23            color: "White"
24          },
25          background: {
26            enabled: true,
27            fill: {
28              enabled: true,
29              type: "Solid",
30              color: "#6D6D6D",
31              opacity: 1
32            },
33            border: {
34              enabled: false,
35              color: "#CBAF87"
36            },
37            corners: {
38              type: "Rounded",
39              all: 3
40            },
41            insideMargin: {
42              left: 3,
43              right: 3
44            }
45          }
46        }
47      ]
48    }
49  }
50}

To have it display the current date, insert the {%Date} token in the caption formatting string. Below is the XML syntax demonstrating the insertion:

XML/JSON Syntax
Plain code
01 <chart>
02   <x_axis>
03     <date_highlighter>
04       <labels>
05         <label>
06           <format><![CDATA[{%Date}{"%MMM %dd, %yyyy"}]]></format>
07         </label>
08       </labels>
09     </date_highlighter>
10   </x_axis>
11 </chart>
01{
02  xAxis: {
03    dateHighlighter: {
04      labels: [
05        {
06          format: "{%Date}{\"%MMM %dd, %yyyy\"}"
07        }
08      ]
09    }
10  }
11}

{%Date} is a token that returns the date value; you can customize the date format to be used with this token. For more information on customizing the token parameters, please refer to Numbers Formatting.

The live sample below uses two charts with Date Highlighter labels, each configured different from the other:

Live Sample:  X-Axis Date Highlighter - Using Labels

This section provides only the basic information on using labels with Date Highlighter. For the detailed coverage of all functions and label application options, please refer to XML Reference.

to top

Enable/Disable

If you do not need Date Highlighter, you can simply disable it. XML syntax for the disabling:

XML/JSON Syntax
Plain code
01 <chart>
02   <x_axis>
03     <date_highlighter enabled="false" />
04   </x_axis>
05 </chart>
01{
02  xAxis: {
03    dateHighlighter: {
04      enabled: false
05    }
06  }
07}

This live sample of a chart without Date Highlighter:

Live Sample:  X-Axis Date Highlighter - Disabling

to top