Class: CompactChart

CompactChart

This is the main class for CompactChart. It contains methods and properties that pertain to the Compact Chart instance. For the Utilities namespace and its available methods, click here.

Since:

  • 9.4.0

Members

<constant> BLACK :string

The web color "black".

Type:
  • string
Since:

  • 9.4.0

<constant> FADED_BLACK :string

The web color "black", at 60% opacity.

Type:
  • string
Since:

  • 9.4.0

<constant> FADED_GRAY :string

The web color "gray", at 80% opacity.

Type:
  • string
Since:

  • 9.4.0

<constant> FADED_LIGHTGRAY :string

The web color "lightgray", at 80% opacity.

Type:
  • string
Since:

  • 9.4.0

<constant> GRAY :string

The web color "gray".

Type:
  • string
Since:

  • 9.4.0

<constant> LIGHTGRAY :string

The web color "lightgray".

Type:
  • string
Since:

  • 9.4.0

<constant> WHITE :string

The web color "white".

Type:
  • string
Since:

  • 9.4.0

<constant, nullable> ownerWindow :Window

Accesses the defaultView of the chart container.

Type:
  • Window
Since:

  • 9.4.0

banding :Banding

Object representing banding instance.

Type:

<readonly> buttons :Record.<string, Button>

Object containing current menu buttons.

Type:
Since:

  • 9.4.0

<readonly> chart :Chart

Object representing the chart and its components (panels, axes, etc) as well as the dataSet, dataSegment, and other relevant data. There are many properties within the chart object that can be accessed; however, they are not yet documented here.

Type:
Since:

  • 9.4.0

config :Config

The live configuration of the instance, which includes any changes since the initial creation, merged with the current theme properties.

Type:
Since:

  • 9.4.0

<readonly> container :CompactChartContainer

The chart container element.

Type:
Since:

  • 9.4.0

layout :Layout

Object reflecting state of chart layout.

Type:
Since:

  • 9.4.0

masterData :Array.<MasterRecord>

List of data points loaded into the chart. The data includes a date (dT) as well as an object for each symbol. These symbol objects contain the data fields for that symbol.

Type:
Since:

  • 9.4.0

Object containing current state of menu buttons.

Type:
Since:

  • 9.4.0

<readonly> modules :Modules

Object containing module names and modules of what has been loaded into the chart. The type of "Modules" represents any class or object successfully imported through a modulePath or classDefinition property.

Type:
  • Modules
Since:

  • 9.4.0

<readonly> originalConfig :Config

The configuration as passed to the create method when chart was initialized.

Type:
Since:
  • 9.4.0 Introduced as initialConfig
  • 10.1.0 Renamed to originalConfig

preferences :Preferences

Object reflecting state of chart preferences.

Type:
Since:

  • 9.4.0

<readonly> renderers :Array.<Renderer>

List of renderers in use on the chart.

Type:
Since:

  • 9.4.0

<readonly> series :Array.<Series>

List of series in use on the chart. Each series is an object consisting of the symbol and the market for that symbol.

Type:
Since:

  • 9.4.0

<readonly> studies :Array.<StudyDescriptor>

List of study descriptors in use on the chart. A StudyDescriptor is an object that contains study settings and current state.

Type:
  • Array.<StudyDescriptor>
Since:

  • 9.4.0

Methods

addCallbackListener(type, cb)

Adds a listener cb to be fired when an event of type type is dispatched.

Parameters:
Name Type Description
type string

One of the following events:

  • dataSet - dataSet is built
  • destroy - instance destroy method is called
  • draw - canvas is painted
  • layout - layout change is advertised
  • newChart - initial data loaded from quotefeed
  • periodicity - periodicity changes
  • preferences - preferences change is advertised
  • symbol - symbol is added or removed from masterData
  • theme - theme is changed
cb CallbackFunction

Listener function that takes a data object argument which contains at least the CompactChart instance qc, as well as possible other properties.
Since:

  • 9.4.0

Returns:

An object containing the type and the callback, in case these need to be used to remove the listener in the future.

Type
object
Example

Add an event listener when chart is destroyed to remove the menus

cc.addCallbackListener("destroy", (data) => {
  delete data.qc.menus;
});

<async> addData(symbol [, params])

Adds market data to the chart, to be stored in masterData.

Parameters:
Name Type Argument Description
symbol string

Symbol for which the data is being added.
params DataParameters <optional>

Data parameters
Since:

  • 9.4.0

Examples

Add static data for IBM:

cc.addData("IBM", {
  data: [...],
  tryQuoteFeed: false
}).then(() => {
  // do something...
});

You can hook into the addData method by writing and adding a callbackListener for the "symbol" type:

cc.addCallbackListener("symbol", (data) => {
  if (data.action === "add") console.log("adding data...");
});

<async> addEvents(symbol [, params])

Adds event data to the chart. The data is used to create markers that appear on the chart representing the event.

Parameters:
Name Type Argument Description
symbol string

Symbol for which the data is being added.
params EventParameters <optional>

Event parameters
Since:

  • 9.4.0

Example

Add static events for IBM:

cc.addEvents("IBM", {
  data: [...],
  tryQuoteFeed: false
}).then(() => {
  // do something...
});

<async> addRenderer(chartType [, plotHandle] [, params])

Adds a renderer to the chart for a particular symbol. A renderer defines how the plot will be rendered. Params can be anything a particular renderer can use to customize the renderer. One popular example is setting the color. Chart types supported are line, mountain, step, scatterplot, candle, hollow_candle, bar, colored_bar, vertex_line, baseline, and histogram. However, in order to add a renderer, the class that supports the renderer must be configured in the CompactChart Config.

Parameters:
Name Type Argument Default Description
chartType string

Type of renderer.
plotHandle string <optional>

Symbol for which the data is being added. If not supplied, renderer will be applied to default symbol.
params RendererParameters <optional>
 {}

Rendering parameters
Since:

  • 9.4.0

Example

Add an orange step renderer for IBM:

cc.addRenderer("step", "IBM", {
  fillStyle: "orange"
}).then(() => {
  // do something...
});

<async> addStudies(types [, symbol])

Adds a study or group of studies to the chart for a particular symbol. The study types and their supporting classes must be specified in the CompactChart Config.

Parameters:
Name Type Argument Description
types string | Array.<string>

Study type(s).
symbol string <optional>

Symbol for which the study is being added. If not supplied, renderer will be applied to default symbol.
Since:

  • 9.4.0

Example

Add some studies for IBM:

cc.addStudies(["maCross", "boll"], "IBM")).then(() => {
  // do something...
});

dataCallback()

Function that will be called upon completion of data loading. The function takes no arguments. Normally this function does not exist but you can create one if desired.

Since:

  • 9.4.0

Example

A sample function:

cc.dataCallback = () => console.log("data loaded");

destroy()

Destroys the CompactChart instance. It will restore the DOM back to what it was before the instance was created and make the instance inaccessible for further interaction. You can hook into the destroy method by writing an adding a callbackListener for the "destroy" type.

Since:

  • 9.4.0

Examples

Destroy CompactChart instance:

cc.destroy();
cc = null;

You can hook into the destroy method by writing and adding a callbackListener for the "destroy" type:

cc.addCallbackListener("destroy", () => {
  console.log("chart destroyed.");
});

draw( [noCheckLoadMore])

Forces a re-rendering of the entire chart canvas and any related DOM. You can hook into the draw method by writing an adding a callbackListener for the "draw" type.

Parameters:
Name Type Argument Description
noCheckLoadMore boolean <optional>

Set to true to prevent the function from checking the quote feed for additional historical data to be used to fill the chart.
Since:

  • 9.4.0

Examples

Draw:

cc.draw();

You can hook into the draw method by writing and adding a callbackListener for the "draw" type:

cc.addCallbackListener("draw", () => {
  console.log("chart drawn.");
});

drawWithRange( [forceLoad])

Forces a re-rendering of the entire chart canvas and any related DOM, taking into account any existing span setting in the layout.

Parameters:
Name Type Argument Description
forceLoad boolean <optional>

Set to true to cause a refetch of the span data even though the data already exists in masterData.
Since:
  • 9.4.0 Introduced
  • 10.1.0 added forceLoad parameter.

home( [params])

Forces a re-rendering of the chart at the current price's position.

Parameters:
Name Type Argument Description
params object <optional>

Parameters for homing.

Properties
Name Type Argument Default Description
animate boolean <optional>

Set to true to show an easing effect when chart is drawn, as if the chart is scrolling.
maintainWhitespace boolean <optional>
 true

Set to false to disregard any existing "whitespace" padding on the right of the chart
whitespace number <optional>

Number of pixels to pad the chart on the right between the most current data point and the y-axis or right side of chart. If not specified, will fall back on chart object's whitespace setting.
Since:

  • 9.4.0

Example

Home the chart with easing effect:

cc.home({ animate: true});

<async> loadPlugin(type [, state])

Loads a plugin module from the configuration. This is useful if the interaction module is not configured. Possible plugins to load include "crosshair", "headsUp", "easeMachine", "tooltip" or "buttons".

Parameters:
Name Type Argument Description
type string

Plugin type as described above.
state State <optional>

Interaction state, if plugin needs it.
Since:
  • 9.4.0 Introduced
  • 10.1.0 Added state parameter.
Returns:

Plugin module that was loaded.

Type
object | undefined
Example

Load the crosshair plugin:

cc.loadPlugin("crosshair", cc.interactionState).then((module) =>
  if (module) ... // module is loaded
)

notify(error)

Places a message error onto the chart in a dedicated Element, positionable via stylesheet. Message will remain until notify is called again with a falsey error.

Parameters:
Name Type Description
error string

Error message to display.
Since:

  • 9.4.0

<async> removeAllData()

Removes all data from masterData. Note this does not remove renderers.

Since:

  • 9.4.0

<async> removeData(symbol)

Removes data for symbol from masterData. Note this does not remove renderer.

Parameters:
Name Type Description
symbol string

Symbol for which market data is to be removed.
Since:

  • 9.4.0

removeEvents(symbol)

Removes event markers for symbol symbol.

Parameters:
Name Type Description
symbol string

Symbol for which event data is to be removed.
Since:

  • 9.4.0

removeRenderer(id [, params])

Removes a renderer specified by id.

Parameters:
Name Type Argument Default Description
id string

Symbol used to create the renderer.
params object <optional>
 {}

Removal parameters.

Properties
Name Type Argument Description
modifying boolean <optional>

Set to true if the removal is called from a modify operation.
Since:

  • 9.4.0

removeStudies(types)

Removes studies whose library names are included in the array types.

Parameters:
Name Type Description
types string | Array.<string>

Study type(s) to remove.
Since:

  • 9.4.0

resizeChart( [maintainScroll])

Redraws the chart, resizing the dimensions to fit the container's dimensions.

Parameters:
Name Type Argument Description
maintainScroll boolean <optional>

Set to true to make the chart's left data position remain after resizing.
Since:

  • 9.4.0

restyle()

Force a theme refresh.

Since:

  • 9.4.0

setDefaultSymbol( [symbol])

Make symbol the main symbol, which responds to layout changes such as chart type. Note a chart does not have to have a default symbol; if none is specified, it is the earliest symbol added.

Parameters:
Name Type Argument Description
symbol string <optional>

If specified, the symbol that should become the main symbol.
Since:

  • 9.4.0

setLocale( [locale])

Sets the chart's locale to the code locale. If a language for that locale is included in the configuration, the language of the chart will change as well.

Parameters:
Name Type Argument Description
locale string <optional>

If specified, the new locale for the chart.
Since:

  • 9.4.0

<async> setPeriodicity(periodicity [, force])

Changes the periodicity of the chart. This function automatically determines if it has the data already fetched to display the requested periodicity. If it does not, it will fetch it. Use the force parameter to always fetch fresh data.

Parameters:
Name Type Argument Description
periodicity Periodicity

Chart periodicity.
force boolean <optional>

Set to true to force data load.
Since:

  • 9.4.0

setTheme( [themeName])

Sets the theme to the one matching the name themeName. If not found, falls back on hardcoded grayscale theme.

Parameters:
Name Type Argument Default Description
themeName string <optional>
 ""

Theme name representing new them to load. This name must be present in the configuration.
Since:

  • 9.4.0

setTimeZone( [dataZone] [, displayZone])

Sets either the dataZone, displayZone, or both to the zone provided. Zones are IANA timezone strings, e.g. "America/Chicago". Note that for either of the two parameters, a value of null means to use the local timezone. If you do not want to set/change one of these time zones, pass an undefined as your argument.

Parameters:
Name Type Argument Description
dataZone string <optional>
<nullable>

Time zone to use for the market data.
displayZone string <optional>
<nullable>

Time zone to use for the display on the chart.
Since:

  • 9.4.0

tableize( [all])

Returns the data available on the chart in tabular format.

Parameters:
Name Type Argument Description
all boolean <optional>

Normally only data visible on chart is returned. Set to true to specify all data in memory, even if not displayed in the current chart.
Since:

  • 10.1.0

Returns:

Data records.

Type
Array.<Record.<string, (string|number)>>
Example

Output data:

console.table(cc.tableize());

<static> create(config)

Creates a new CompactChart instance from a configuration object. This is the recommended way to create a CompactChart instance.

Parameters:
Name Type Description
config Config

CompactChart configuration object.
Since:

  • 9.4.0

Returns:

A new CompactChart instance.

Type
CompactChart
Example

Create a new CompactChart instance with static data for GOOG as a baseline chart:

import sample5min from "./examples/data/GOOG_5MIN.js";
import getLicenseKey from "./key.js";
import { CompactChart } from "./js/compactChart.js";
import { Baseline } from "./js/modules/renderers/baseline.js";
const config = {
  container: document.getElementById("chartiq_compactchart"), // make sure such an element is on the document
  initialization: {
    symbols: [{ symbol: "GOOG", data: sample5min }],
    renderers: [["baseline", "GOOG"]]
  },
  layout: {
	   interval: "day",
	   period: 1
  },
  meta: {
    keyFn: getLicenseKey
  },
  renderers: {
    Baseline: {
      classDefinition: Baseline,
      width: "2px",
      down: {
        baseColor: "#B82C0C1F",
        color: "#B82C0C9F",
        borderColor: "#B82C0CFF"
      },
      up: {
        baseColor: "#8CC1761F",
        color: "#8CC1769F",
        borderColor: "#8CC176FF"
      }
    }
  },
  stylesheets: ["css/styles.css"]
};
let cc = CompactChart.create(config);

Type Definitions

ChartDescriptor

Object that contains the current state of the chart.

Type:
  • object
Properties:
Name Type Argument Description
periodicity string

Resolved periodicity as a string.
type string

Chart type.
starttime string <optional>

Time of first bar visible on chart.
endtime string <optional>

Time of last bar visible on chart.
List Array.<string>

of symbols on chart.
studieslist Array.<string>

List of studies on chart.
Since:

  • 9.4.0

ChartType

Built-in chart types supported.

Type:
  • 'bar' | 'baseline' | 'candle' | 'colored_bar' | 'histogram' | 'hollow_candle' | 'line' | 'mountain' | 'scatterplot' | 'step' | 'vertex_line'
Since:

  • 9.4.0

CommonModuleConfig

Fields common to all module configurations. This tells the CompactChart where to find a module. CompactChart supports both static (classDefinition) and dynamic (modulePath) loading of modules. Providing a classDefinition will take preference over providing modulePath. Generally, one or the other is required. Default modulePaths are built in and can be found in defaultDynamicModulePaths module. You only need to be concerned about these fields if you want to create your own implementation of a module, or want to load statically.

This is a template type definition. The template type, T, denotes the module file's export.

Type:
  • object
Properties:
Name Type Argument Description
modulePath string <optional>

Path to module file to dynamically load.
classDefinition Class.<T> <optional>

Definition of the class, if you've already statically loaded it.
Since:

  • 9.4.0

Example

Static loading:

import { Banding } from "./module/banding.js";
const config: {
	banding: {
		classDefinition: Banding;
		...
 },
 ...
};

CompactChartContainer

Decorated container element.

Type:
  • HTMLElement
Properties:
Name Type Description
qc CompactChart

CompactChart instance to which element is attached.
Since:

  • 9.4.0

Config

Combined configuration object used to create the CompactChart. A sample configuration, used in the sample template included in your package, can be found at examples/config.js. It contains most of the options detailed below. If a particular feature is not desired, it can (and should) be removed from the configuration. Sometimes the mere presence of a configuration property is indication that it should be used. CompactChart combines the configuration file with the chosen theme to comprise a full initialization configuration. If a feature is not desired, be sure to remove it from not only the configuration file but from the theme files as well.

Type:
  • object
Properties:
Name Type Argument Description
themeName string <optional>

Current theme name.
container HTMLElement

DOM element which will contain the compact chart HTML markup. This is a mandatory property as the CompactChart needs to create itself somewhere. You should place an HTMLElement on your template where you want the chart to appear. Set the dimensions of the element as you like. There are a few style settings relating to the class "chart-container" in the application stylesheet.
banding BandingConfig <optional>

Configuration of banding module.
buttons ButtonsConfig <optional>

UI menu buttons configuration.
chart ChartConfig <optional>

General chart configuration.
crosshair CrosshairConfig <optional>

UI crosshair configuration.
easeMachine EaseMachineConfig <optional>

Configure the implementation of chart zoom action.
eventMarkers EventMarkersConfig <optional>

Event markers configuration.
footer FooterConfig <optional>

UI footer menu configuration.
headsUp HeadsUpConfig <optional>

UI heads-up configuration.
initialization InitialConfig <optional>

Initial chart state configuration (data, renderers, studies, events).
interaction InteractionConfig <optional>

Configuration related to chart interaction.
language LanguageConfig <optional>

Configure language support.
layout LayoutConfig <optional>

Layout configuration.
marker MarkerConfig <optional>

Markers configuration.
market MarketConfig <optional>

Support for market time zones.
meta MetaConfig <optional>

High-level configuration.
panel PanelConfig <optional>

Configuration related to a panel.
plotDecorators PlotDecoratorConfig <optional>

Configuration for plot decorators (fill-ins).
preferences Preferences <optional>

Chart preferences.
renderers RendererConfig

Configure renderers for different plot types.
quoteDriver QuoteDriverConfig <optional>

Configure quote feeds.
signaliq SignalIQConfig <optional>

Configuration for SignalIQ module.
span SpanConfig <optional>

Span/Range selection configuration.
studies StudyConfig <optional>

Studies configuration.
stylesheets Array.<string> <optional>

List of stylesheet URLs, or inline styles. CompactChart creates a shadow DOM underneath the container. As a result, it is shielded from the page stylesheets. The stylesheets section allows stylesheets to be loaded within the shadow DOM. The stylesheets property is either an array of paths, relative to the html page loading the CompactChart, of stylesheets to load into the container, or actual inline stylesheets which will be added in an inline style tag to the container. In order to load as an inline style, the array element must begin with the string "inline:". The application comes with three stylesheets; you can supplement with your own if you wish.
themes ThemesConfig <optional>

Supported themes.
timezoneSupport TimezoneConfig <optional>

Timezone configuration.
tooltip TooltipConfig <optional>

UI tooltip configuration.
xaxis XAxisConfig <optional>

Configuration of x axis.
yaxis YAxisConfig <optional>

Configuration of y axes.
Since:
  • 9.4.0 Introduced
  • 9.8.0 TooltipConfig added
Examples

Creating an HTMLElement in your DOM tree as HTML on your template:

<div id="chartiq_compactchart" class="chart-container" style="height: 300px; width: 100%;"></div>

Set your container property then as follows:

container: document.getElementById("chartiq_compactchart")

DataParameters

Parameters passed to CompactChart#addData function.

Type:
  • object
Properties:
Name Type Argument Description
data Array.<PriceRecord> <optional>

Static data to be added, in proper market data format.
appending boolean <optional>

If true, indicate data is supplementing end of existing data.
appendToDate Date <optional>

Date to truncate existing data to so new data can be added from that date onward.
tryQuoteFeed boolean <optional>

If false, bypass any attempt at supplementing data from quotefeed.
Since:

  • 9.4.0

InitialConfig

This is the section that contains the instructions for what you want the chart to load initially. Renderers, Studies and Events can be added or removed after initialization as well, using the CompactChart class methods.

Type:
  • object
Properties:
Name Type Argument Description
symbols Array.<object> <optional>

List of symbols, with their parameters.

Properties
Name Type Argument Description
symbol Array.<object>

Ticker symbol or handle.
data Array.<PriceRecord> <optional>

Optional static data. For examples, see examples/data/*_DAILY.js.
main boolean <optional>

Indicates whether this is the main series.
bypassQuoteFeed boolean <optional>

Set to true to not attempt to use a quotefeed, even if one is configured.
events Array.<object> <optional>

List of events, with their parameters.

Properties
Name Type Argument Description
symbol Array.<object>

Ticker symbol or handle.
data Array.<EventRecord> <optional>

Data to be loaded, if statically loading event data.
params Array.<EventParameters> <optional>

Optional event parameters. The params.color can be either a literal CSS color, or a variable beginning with an asterisk (*), which matches up to the corresponding variable (eventMarkers.colorMap) in the themes. That way, colors can be customized by theme.
renderers Array.<Array> <optional>

List of renderers in the form of an array.

Elements
Index Type Argument Description
0 ChartType | string

Type of renderer, e.g. "bar", "line".
1 string <optional>

Symbol for which this renderer applies, if omited, default symbol.
2 RendererParameters <optional>

Optional renderer parameters.
studies Array.<string> <optional>

List of study names. These names must exist in the configuration under studies/types. See StudyConfig.
Since:

  • 9.4.0

Example

Load two symbols, with GOOG as the main symbol and displaying as a mountain chart with a y-axis on the right (default), while AAPL is a colored bar chart with y-axis on the left. Events for both symbols are loaded, with the colors of the markers determined by theme. A Moving Average Cross and Volume study are loaded (they pertain to the default symbol).

config.initialization = {
	symbols: [{ symbol: "AAPL" }, { symbol: "GOOG", main: true }],
	events: [
		{ symbol: "AAPL", params: { color: "*ec1" } },
		{ symbol: "GOOG", params: { color: "*ec2" } }
	],
	renderers: [
		["mountain"],
		["colored_bar", "AAPL", { yAxis: { position: "left" } }]
	],
	studies: ["maCross", "vol"]
)}

Layout

Defines the layout of the chart.

Type:
Properties:
Name Type Description
candleWidth number

Number of pixels for a bar.
interval TimeUnit | number

Chart interval.
period number

Chart period. Value above 1 causes consolidation to occur.
Since:

  • 9.4.0

LayoutConfig

Allows initialization of layout when chart is loaded.

Type:
  • object
Properties:
Name Type Argument Default Description
adj boolean <optional>
 true

Use adjusted close.
candleWidth number <optional>
 8

Number of pixels for a bar.
chartScale string <optional>
 linear

Type of scaling for main chart y-axis.
crosshair boolean <optional>
 false

State of crosshair display, false is hidden.
currentValues boolean <optional>
 false

Set to true to display current values in the headsUp, otherwise crosshair values are shown,.
events boolean <optional>
 true

Set to true to show events.
extendedHours boolean <optional>
 false

Set to true to show extended hours data.
interval TimeUnit | number <optional>
 'day'

Chart interval.
marketSessions Record.<string, number> <optional>
 {}

Market sessions available and whether to display them, e.g. { pre: true, post: true }.
period number <optional>
 1

Chart period. Value above 1 causes consolidation to occur.
signalData boolean <optional>
 true

Set to true to show signals.
span object <optional>

If not undefined (default), contains span parameters.

Properties
Name Type Argument Description
base string

Span range unit (day, month, etc).
multiplier number

Multiple of span base unit.
forceLoad boolean <optional>

If set, will force new load regardless of previous periodicity setting.
periodicity Periodicity <optional>

Span periodicity.
timeUnit TimeUnit <optional>
<nullable>

Used to represent units of interval.
tooltip boolean <optional>
 false

Set to true to display a tooltip with crosshair values.
Since:
  • 9.4.0 Introduced
  • 9.8.0 added tooltip.

MetaConfig

High-level configuration of the CompactChart. This property must be provided as it contains the licenseKey function. It also contains optional metrics logging configuration.

Type:
  • object
Properties:
Name Type Argument Description
keyFn function

The getLicenseKey function imported from key.js REQUIRED for proper functionality.
metricsEnabled boolean <optional>

Set to true to turn on metrics logging.
metricsURL string <optional>

URL of metrics server.
ecosystem boolean <optional>

Indicates that chart shares the page with other resources and should not attempt to modify page-level attributes.
Since:
  • 9.4.0 Introduced
  • 10.1.0 Added property ecosystem.
Example

Initializing `meta` in configuration:

import getLicenseKey from "../key.js";
...
const config = {
	...
	meta: {
		keyFn: getLicenseKey
	},
	...
}

Periodicity

Chart Periodicity representation.

Type:
  • object
Properties:
Name Type Argument Description
period number

Number of records included in one bar representation.
interval TimeUnit | number

Units of time between records.
timeUnit TimeUnit <optional>
<nullable>

Units to use, "second", "minute", "day", "week", "month".
Since:

  • 9.4.0

Preferences

Chart user preferences.

Type:
  • object
Properties:
Name Type Argument Description
locale string <optional>

Name of locale. The appropriate language file will load and the dates and numbers on the chart will be displayed according to the locale. Languages are configured in files named for each locale in js/modules/languages.
theme string <optional>

Name of theme to load. Themes are configured in files named for each theme in js/modules/themes. Without a theme specified, the chart will draw in its default grayscale theme.
timeZone string <optional>
<nullable>

IANA time zone name to use for the displayed time zone (x-axis)
Since:

  • 9.4.0

Series

A simple object representing a series that is on the chart.

Type:
  • object
Properties:
Name Type Argument Description
symbol string

Symbol of the series.
market string <optional>

Name of market the series belongs to.
Since:

  • 9.4.0

SingleThemeConfig

Configure a theme available to the chart.

Type:
Since:

  • 9.4.0

ThemesConfig

CompactChart supports theming. In the js/modules/themes folder there are a few themes supporting Day, Night, and colorblind-friendly themes. More themes may be added simply by creating a copy of the default theme file found in the themes folder, renaming it to the desired theme name, and setting the properties in the file. To provide support for a theme, include its name in the themes section of the configuration. Remember, theme properties combine with general properties. If you wish to remove a feature by removing it from the configuration, don't forget to remove it from the themes files as well. If you do not wish to support themes, but wish to adjust a property normally associated with themes, like a color or font, you can do so by setting the property directly in the configuration file. If no theme is set and no properties related to theming are set either, the chart will fall back on default grayscale theming.

Type:
Since:

  • 9.4.0

Example

Sample theme configuration:

themes: {
	night: {
		modulePath: "./modules/themes/night.js"
	},
	night_cb: {
		modulePath: "./modules/themes/night_cb.js"
	},
	day: {
		modulePath: "./modules/themes/day.js"
	},
	day_cb: {
		modulePath: "./modules/themes/day_cb.js"
	},
	none: null
}

TimeUnit

Possible values of the Periodicity object's interval or timeUnit property.

Type:
  • 'millisecond' | 'second' | 'minute' | 'day' | 'hour' | 'week' | 'month' | 'year' | 'tick'
Since:

  • 9.4.0

TimezoneConfig

Configure which timezones are available to the chart. By default, four time zones are available: UTC, Europe/London, Asia/Tokyo, and America/New_York. Importing the timezones example file in examples/timezones.js provides many more timezones. Import the timezones file like so:

import * as Timezones from "../examples/timezones.js";

Then you can use the imports in your config:

timezoneSupport: {
	 modulePath: "./modules/timezone.js",
	 rules: Timezones.rules,
	 zones: Timezones.zones
}

Note: these settings should reference the timezone module at js/module/timezone.js, not the example Timezones file. Note: any custom rules or zones must be formatted in accordance with IANA formatting https://www.iana.org/time-zones/repository.

Type:
Properties:
Name Type Argument Description
cities Record.<string, string> <optional>

City/time zone offset map imported from Timezones example (Timezones.timezoneMap), or custom mapping
rules Record.<string, Array.<Array>> <optional>

Rules imported from Timezones example (Timezones.rules), or custom rules.
zones Record.<string, (string|Array.<Array>)> <optional>

Zones imported from Timezones example (Timezones.zones), or custom zones.
Since:
  • 9.4.0 Introduced
  • 10.1.0 Added cities parameter`.