chartParams$

• The API chartParams$ is a shared chart parameter setting for all Plugins, and the parameters on the chart objects of each data type are the same. It is mainly used to set common chart styles and behaviors.

• All parameters are optional. If this API is not used, all parameter settings will be default values.

Syntax

The syntax for creating chartParams data is chart.chartParams$.next()

Example:

chart.chartParams$.next({
  // Optional chartParams parameters
  padding: {
    bottom: 100
  }
})

Parameters

• Type: ChartParamsPartial

• Fields:

  Name	Description	Type
  padding	Padding between the root element and Plugin elements	Padding
  highlightTarget	The range of elements selected when a Highlight event occurs	'series' | 'group' | 'category' | 'datum' | 'none'
  highlightDefault	The default Highlight target when no event occurs (id, seriesLabel, groupLabel, or categoryLabel), which will select elements based on the range set by highlightTarget.	string | null
  colorScheme	Select color scheme, which will switch the settings under the colors field	'dark' | 'light'
  colors	Set colors (separately for each color scheme)	{ light: ColorScheme dark: ColorScheme }
  styles	Set styles	Styles
  transitionDuration	Duration of animations (milliseconds)	number
  transitionEase	Type of animation (d3.js d3-ease names)	string

• chartParams.padding

  Name	Description	Type
  top	Padding between the chart content and the top edge	number
  right	Padding between the chart content and the right edge	number
  bottom	Padding between the chart content and the bottom edge	number
  left	Padding between the chart content and the left edge	number

• chartParams.colors.light and chartParams.colors.dark

  Name	Description	Type
  label	Array index corresponding to data labels	string[]
  labelContrast	Contrast color for label, mainly used for text overlaying graphical elements: [0] => Color when label is dark [1] => Color when label is light	string
  primary	Primary color, usually defined for labels, text, or auxiliary lines	string
  secondary	Secondary color, usually defined for axes or background auxiliary lines	string
  background	Background color, usually defined for blocks of color under information text such as tooltips (to maintain consistent color scheme)	string

• chartParams.styles

  Name	Description	Type
  textSize	Text size. Two formats: (1) number unit is px, e.g., 14 (2) string can define custom units, e.g., 0.875rem	string | number
  unhighlightedOpacity	Opacity of other graphical elements when Highlight (mouse over) occurs	number

• Default values:

  {
    padding: {
      top: 60,
      right: 60,
      bottom: 60,
      left: 60
    },
    highlightTarget: 'datum',
    highlightDefault: null,
    colorScheme: 'light',
    colors: {
      light: {
        label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
        labelContrast: ['#ffffff', '#1b1e23'],
        primary: '#1b1e23',
        secondary: '#e1e1e1',
        background: '#ffffff'
      },
      dark: {
        label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
        labelContrast: ['#ffffff', '#1b1e23'],
        primary: '#f0f0f0',
        secondary: '#e1e1e1',
        background: '#000000'
      }
    },
    styles: {
      textSize: '0.875rem',
      unhighlightedOpacity: 0.3
    },
    transitionDuration: 800,
    transitionEase: 'easeCubic'
  }
  

Chart Padding Settings - chartParams.padding

padding is the padding between the root element and Plugin elements, with four fields: top, right, bottom, and left.

However, the actual effect may vary depending on the design of each Plugin. For example:

Example 1: The Pie class (pie chart) draws the chart aligned to the center of the screen, and the padding between the pie chart and the scene is set by padding. The larger the padding, the smaller the area of the pie chart.

Example 2: The Bars class (bar chart) has x and y axes, with the origin at the bottom left by default. The x-axis aligns to the bottom of the root element plus the bottom padding, and the y-axis aligns to the left of the root element plus the left padding.

Highlight Target - chartParams.highlightTarget

Set the target data for highlight events. Generally, it is triggered when the mouse passes over specific graphical elements, which can be mapped to corresponding data by id or label. The mapping methods are 'series', 'group', 'category', 'datum', and 'none', described as follows:

• series: In the "Series", "Grid", and "MultiGrid" data types, get the seriesLabel of the data of the triggered element and select all elements with the same seriesLabel.
• group: In the "Grid" and "MultiGrid" data types, get the groupLabel of the data of the triggered element and select all elements with the same groupLabel.
• category: In the "MultiValue", "Relationship", and "Tree" data types, get the categoryLabel of the data of the triggered element and select all elements with the same categoryLabel.
• datum: In all data types, only select the triggered element when a highlight event occurs.
• none: No highlight event.