Creating Charts

This chapter mainly explains how to create chart objects and the related parameters that can be used with chart objects.

Chart Classes

Depending on the type of data required, different chart classes need to be used to create charts. There are six chart classes corresponding to six types of data:

• SeriesChart
• GridChart
• MultiGridChart
• MultiValueChart
• RelationshipChart
• TreeChart

Import method:

import { SeriesChart } from 'orbcharts'

Syntax

The syntax and parameters of the six chart classes are the same. Here, SeriesChart is used as an example:

<div id="#chart"></div>

import { SeriesChart } from 'orbcharts'

const element = document.querySelector('#chart')

const chart = new SeriesChart(element)

As shown in the example above, the chart class has one required parameter, which is a DOM element. This will be the root node for OrbCharts to draw on.

The second parameter is optional and will be explained later:

const chart = new SeriesChart(element, {
  // options  
})

The chart object returned by the constructor of the chart class completes the creation of the chart object. Drawing and interaction will be performed on this chart object.

Chart Class Parameters

First Parameter: element

• Type: HTMLElement | Element

• Description: The DOM element selected for drawing the chart. All chart SVG elements will be added to this element as the root node.

Second Parameter: options

• Type: ChartOptionsPartial<T extends ChartType>

• Description: Optional parameter settings. If not set, all will be default values.

Name	Description	Type
preset	The chart's "preset", used to override the original default parameters	PresetPartial<T extends ChartType>
width	The width of the SVG to be drawn. If not set or using auto, OrbCharts will automatically listen to the width of the outer DOM element and adjust accordingly	'auto'
height	The height of the SVG to be drawn. If not set or using auto, OrbCharts will automatically listen to the height of the outer DOM element and adjust accordingly	'auto'

• Default values:

{
  preset: null,
  width: 'auto',
  height: 'auto'
}

options.preset (Preset)

A preset is a setting object that can be used to override the system's default values. There are two ways to use it: one is to use the built-in presets of OrbCharts, and the other is to customize the presets. For more detailed Preset API and usage methods, please refer to the Preset chapter.

Built-in preset usage example:

import { SeriesChart, PRESET_PIE_DONUT } from 'orbcharts'

const chart = new SeriesChart(element, {
  preset: PRESET_PIE_DONUT
})

Custom preset example:

import { SeriesChart, Pie } from 'orbcharts'

const chart = new SeriesChart(element, {
  preset: {
    chartParams: {
      padding: {
        top: 10,
        right: 10,
        left: 10,
        bottom: 10
      }
    }
  }
})

options.width, options.height (Chart Size)

OrbCharts will automatically listen to the outer DOM for adaptive size adjustments by default, so to set the chart size, you can simply set the size of the DOM.

<div id="chart" style="width:1024px;height:500px;"></div>

const element = document.querySelector('#chart')
const chart = new SeriesChart(element)

Another way is to set width and height through the Options parameter of the chart class:

<div id="chart"></div>

const element = document.querySelector('#chart')
const chart = new SeriesChart(element, {
  width: 1024,
  height: 500
})