Data Marker

Data marker in a chart represents an important event, which occurred on a specific data point. Hovering on a data marker shows an additional description of the event in the tooltip.

The image below shows the default data marker on a time series chart:

Create Data Markers

To create data markers, follow the steps given below:

• Create a dataMarker object in the dataSource.

• Within the dataMarker object use the time attribute to set the time instance on which the data marker will be displayed.

• Within the dataMarker object use the timeFormat attribute to set the format of the date/time corresponding to the marker.

• Within the dataMarker object use the type attribute to define the type of the marker as flag.

• Within the dataMarker object use the value attribute to specify the y-axis label on which the data marker will be applied.

• Within the dataMarker object use the identifier attribute to set the character to be displayed within the marker.

• Within the dataMarker object use the tooltext attribute to set the text to be displayed in the tooltip, when you hover the mouse pointer over the data marker.

Refer to the code given below:

dataMarker: [{
    series: "Interest Rate",
    time: "Mar-1980",
    identifier: "H",
    timeFormat: "%b-%Y",
    tooltext: "As a part of credit control program, under the leadership of Paul Volcker, the Fed tightened the money supply, allowing the federal fund rates to approach 20 percent."
}, {
    series: "Interest Rate",
    time: "Aug-1982",
    identifier: "L",
    timeFormat: "%b-%Y",
    tooltext: "The FED eases off the monetary brakes, allowing interest rates to fall and the economy to begin a strong recovery."
}, {
    series: "Interest Rate",
    time: "Oct-1987",
    identifier: "L",
    timeFormat: "%b-%Y",
    tooltext: "The FED is forced to ease rate after the stock market crash."
}, {
    series: "Interest Rate",
    time: "May-1989",
    identifier: "H",
    timeFormat: "%b-%Y",
    tooltext: "Liquidity problem forced the Fed to increase rate to nearly 10%."
}, {
    series: "Interest Rate",
    time: "Sept-1992",
    identifier: "L",
    timeFormat: "%b-%Y",
    tooltext: "To fight the jobless economy growth the Fed had to reduce the interest rate to 3%."
}, {
    series: "Interest Rate",
    time: "Jun-2003",
    identifier: "L",
    timeFormat: "%b-%Y",
    tooltext: "Struggling to revive the economy, the FED cuts it’s benchmark rate to 1%."
}, {
    series: "Interest Rate",
    time: "Sep-2007",
    identifier: "L",
    timeFormat: "%b-%Y",
    tooltext: "Fed started reducing the Federal Fund Rate."
}, {
    series: "Interest Rate",
    time: "Dec-2008",
    identifier: "L",
    timeFormat: "%b-%Y",
    tooltext: "Fed reduced the interest rates to sub 0.25% to manage the menace of longest economic downturn since World War 2"
}],COPY

The data marker created using the above code is shown below:

There are currently two types of data markers:

• Flag type (default)
• Pin type

The pin type data marker has been introduced in FusionTime v1.3.0.

The image below shows the pin type data marker on a time series chart:

The code to render a time series chart with pin type data marker is shown below:

dataMarker: [
  {
    series: "Interest Rate",
    time: "Mar-1980",
    type: "pin", //data Marker set to pin
    identifier: "H",
    timeFormat: "%b-%Y",
    tooltext: "As a part of credit control program."
  }
];COPY

A time-series chart with pin type data marker looks like as shown below:

LIVE CHART

Data Markers visibility

Date specified data markers like "02/15/2020" are visible until the immediate time hierarchy, markers that specify time like "02/15/2020 14:30" are visible until two immediate time hierarchies.

In the following example data marker is specified at "02/16/2020 13:40:30"

In the following example data marker is specified at "02/16/2020 13:40"

In the following example data marker is specified at "02/16/2020"