Instance

Type module

Sources

Items from Instance can be imported/included and used via following ways.

TypeScript

/**
 * Import via: Instance.ts
 * Access items like: $instance.myVariable
 */
import * as $instance from "@amcharts/amcharts4/Instance";

Variables

Instance does not have any variables.

Functions

#addLicense(license: string)

Returns voidSince 4.5.16

Adds a license, e.g.:

am4core.addLicense("xxxxxxxx");

am4core.addLicense("xxxxxxxx");

Multiple licenses can be added to cover for multiple products.

#addToQueue(sprite: Sprite)

Returns void

#create(htmlElement: $type.Optional <HTMLElement | string>,
classType: { })

Returns T

A shortcut to creating a chart instance.

The first argument is either a reference to or an id of a DOM element to be used as a container for the chart.

The second argument is the type reference of the chart type. (for plain JavaScript users this can also be a string indicating chart type)

let chart = am4core.create("chartdiv", am4charts.PieChart);

// Can pass in chart type reference like this:
var chart = am4core.create("chartdiv", am4charts.PieChart);

// ... or chart class type as a string:
var chart = am4core.create("chartdiv", "PieChart");

#createChild(htmlElement: $type.Optional <HTMLElement | string>,
classType: { })

Returns T

Creates all HTML and SVG containers needed for the chart instance, as well as the new Sprite (as specified in classType parameter).

#createDeferred(callback: (args: Array <any>) => Sprite,
scope?: any,
rest: Array <any>)

Returns Promise <Sprite>Since 4.10.0

Useful in creating real queues form mult-chart creation.

Accepts a reference to a function which crates and returns actual chart object.

It returns a Promise which you can use to catch chart instance once it's created.

am4core.createDeferred(function(div) {
  // Create first chart
  let chart = am4core.create(div, am4charts.XYChart);
  // ...
  return chart;
}, "chartdiv1").then(chart) {
  // `chart` variable holds an instance of the chart
  console.log("Chart ready", chart);
}

am4core.createDeferred(function(div) {
  // Create second chart
  let chart = am4core.create(div, am4charts.PieChart);
  // ...
  return chart;
}, "chartdiv2").then(chart) {
  // `chart` variable holds an instance of the chart
  console.log("Chart ready", chart);
}

am4core.createDeferred(function(div) {
  // Create first chart
  var chart = am4core.create(div, am4charts.XYChart);
  // ...
  return chart;
}, "chartdiv1").then(chart) {
  // `chart` variable holds an instance of the chart
  console.log("Chart ready", chart);
}

am4core.createDeferred(function(div) {
  // Create second chart
  var chart = am4core.create(div, am4charts.PieChart);
  // ...
  return chart;
}, "chartdiv2").then(chart) {
  // `chart` variable holds an instance of the chart
  console.log("Chart ready", chart);
}

More info: Improving chart performance: deferred daisy chained instantiationrmation

#createFromConfig(config: object,
htmlElement?: string | HTMLElement,
classType?: { } | string)

Returns Sprite

A shortcut to creating a chart from a config object.

Example:

let chart am4core.createFromConfig({ ... }, "chartdiv", am4charts.XYChart );

var chart am4core.createFromConfig({ ... }, "chartdiv", "XYChart" );

If chartType parameter is not supplied it must be set in a config object, via reference to chart type, e.g.:

{
  "type": am4charts.XYChart,
  // ...
}

{
  "type": am4charts.XYChart,
  // ...
}

Or via string: (if you are using JavaScript)

{
  "type": "XYChart",
  // ...
}

{
  "type": "XYChart",
  // ...
}

A container can either be a reference to an HTML container to put chart in, or it's unique id.

If container is not specified, it must be included in the config object:

{
  "type": "XYChart",
  "container": "chartdiv",
  // ...
}

{
  "type": "XYChart",
  "container": "chartdiv",
  // ...
}

#disposeAllCharts()

Returns void

Disposes all of the currently active charts.

#processNextDeferred()

Returns void

#queueHandler(sprite: Sprite)

Returns void

#removeFromQueue(sprite: Sprite)

Returns void

#unuseAllThemes()

Returns void

Removes all "active" themes. Any charts created subsequently will not have any theme applied to them.

#unuseTheme(value: ITheme)

Returns void

Removes a theme from "active themes" list, so it won't get applied to any charts created subsequently.

#useTheme(value: ITheme)

Returns void

Applies a theme to System, and subsequently all chart instances created from that point forward.

amCharts supports multiple themes. Calling useTheme multiple times will make the System apply multiple themes, rather than overwrite previously set one.

This enables combining features from multiple themes on the same chart.

E.g.:

am4core.useTheme(am4themes.material);
am4core.useTheme(am4themes.animated);

am4core.useTheme(am4themes.material);
am4core.useTheme(am4themes.animated);

The above will apply both the Material color and animation options to all charts created.

#viewPortHandler(sprite: Sprite)

Returns voidSince 4.9.12

Checks whether the chart was not initialized fully due to setting of onlyShowOnViewport. If it hasn't and is now in the viewport the chart will be initialized.