Skip to main content

Intro to the Builder API

The Builder API is a new API to SciChart.js v2. In addition to programmatically creating charts with JavaScript or TypeScript code, you can now create charts with a JSON-object API, either with objects in code with discovererable intellisense, or with JSON passed from server to client.

The Builder API is intended to:

  • Provide a more familiar api to javascript developers
  • Provide better discoverability of SciChart features when using typescript
  • Enable charts to be defined using pure data, so that they can be serialized and deserialized

It is not intended to completely replace the existing API. The two can be used in combination, and the original api is more suitable for some tasks, and required for others. Currently it only supports 2D charts.

Discovering the Builder API​

To use the SciChart.js Builder API, you will need this import.

import { build2DChart, build2DPolarChart, buildPieChart, build3DChart } from "scichart";

Use the named builder function for the surface you are creating. The functions can also build chart parts from a JSON definition.

Use build2DChart📘, buildPieChart📘, build2DPolarChart📘, or build3DChart📘:

// build a 2D chart
const simple2d = await build2DChart("chartDivId", {
    // ...
});

// build a Pie chart
const pieChart = await buildPieChart("chartDivId", {});

// build a Polar 2D chart
const polar2d = await build2DPolarChart("chartDivId", {});

// build a 3D chart
const simple3d = await build3DChart("chartDivId", {});
note

Builder definitions now register only the types you use. Importing a class registers it automatically; for type-only definitions, call the matching register* functions, or registerAllTypes() as a simple migration step.

Note that all the elements are optional. This lets you define partial definitions that you can reuse and combine.

Worked Examples of the Builder API​

We've created some worked examples of the Builder API on the following pages. Also check out our Github and SciChart demo where we have published some examples of the Builder API.

Builder API Documentation Pages​

Builder API Examples​

TypeScript Intellisense​

The Builder API is best when used with Typescript, so it can guide you as to what types are available or required.

Intellisense shows which options can be passed to build2DChart:

Intellisense will show you the series definition must have a type property which is an ESeriesType. This shows you all the series types that SciChart provides (more than shown in this screenshot).

Once you have selected a series, the properties and types will become specific to that series type:

See Also​

* Creating a Simple Chart