Using Presets

Presets are a very important feature in OrbCharts. Generally, it is recommended that most users choose to use presets when creating charts.

As the name suggests, a preset is a set of pre-configured parameters. It has two main purposes:

1. To override the system's original default values, avoiding the need to repeatedly set the same parameters when operating the chart.
2. To lower the usage threshold, providing developers with a quick way to create a basic style with pre-configured settings.

Built-in Presets

Import method:

import { PRESET_PIE_DONUT } from 'orbcharts'

Usage example:

import { SeriesChart, PRESET_PIE_DONUT } from 'orbcharts'

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

Obtaining Preset Examples in the Playground

All available presets have usage examples in the Playground:

You can first select the chart type you want to use from the left menu → then click the "Preset" menu to select →

Through the real-time chart presentation, find the chart and preset combination you need. You can refer to the usage method in the "Demo Code" editor in the middle.

Custom Presets

The Preset object is an object created entirely with optional fields, so customizing a Preset object is very simple. Just create an Object using {} and add the required fields as needed.

Field Description

• Type: PresetPartial<T extends ChartType, AllPluginParams>

• Fields:

  Name	Description	Type
  chartParams	chartParams$ parameters	ChartParamsPartial
  dataFormatter	dataFormatter$ parameters	DataFormatterPartialTypeMap<T>
  pluginParams	params$ parameters for all Plugins: key: Plugin name value: Plugin Params (optional)	{ [key: string]: any }

Example

const PRESET_CUSTOM_EXAMPLE = {
  chartParams: {
    padding: {
      top: 40,
      right: 40,
      bottom: 140,
      left: 80
    }
  },
  dataFormatter: {
    groupAxis: {
      scalePadding: 0
    }
  },
  pluginParams: {
    GroupAxis: {
      tickPadding: 15,
      tickTextRotate: -30
    },
    GroupAux: {
      labelRotate: -30
    },
    GridLegend: {
      placement: 'bottom',
      padding: 14,
      listRectHeight: 2
    }
  }
}

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

const chart = new GridChart(element, {
  preset: PRESET_CUSTOM_EXAMPLE
})