Rich Text and DOM Extensions

Rich Text

Starting from v1.10.0, VChart supports rich text capabilities on commonly used component texts, including:

Set different text styles for specific paragraphs of the text, such as font, color, font size, etc. Mix images in text Set overall style for text, such as text alignment, text direction, text wrapping, etc. Currently, the components that support rich text configuration are:

Label component Axis component: axis labels, axis titles Discrete legend component: legend text, legend title Annotation component: annotation text Indicator card component Custom graphic element: rich text element Canvas tooltip component: title and content lines

Capabilities supported by rich text

VChart provides the following configuration items for rich text as a whole:

• Basic text style:、fontSize、fontFamily、fontStyle、fontWeight
• Text color: fill、fillOpacity
• Text stroke: stroke、lineWidth、strokeOpacity
• Text wrapping and clipping: ellipsis、wordBreak、singleLine、forceBreakLine
• Size of richtext: width、height、maxWidth、maxHeight
• Alignment of richtext: textAlign、textBaseline、verticalDirection
• Rotation and scaling:angle、scaleX、scaleY
• Text paragraph layout direction: layoutDirection
• Text paragraph configuration: textConfig

For example:

Text paragraph configuration.

Rich text is composed of text paragraphs, which support two types: text and images.

Text

Text supports the following configurations:

• Text content:text
• Text style: fontSize、fontFamily、fontStyle、fontWeight
• Text color: fill、fillOpacity
• Text stroke: stroke、lineWidth、strokeOpacity
• Text decoration: textDecoration、script 、underline、lineThrough
• Text alignment: textAlign、textBaseline
• Text line height: lineHeight

For example:

label: {
  formatMethod: value => {
    return {
      type: 'rich',
      text: [{ text: 'value: ' }, { text: `${value}`, fontWeight: 'bold', fill: value > 200 ? 'red' : 'black' }]
    };
  };
}

Image

Image supports the following configurations:

• Image Source: image
  • Supports configuring URL, SVG string, HTMLImageElement, HTMLCanvasElement.
• Image Size: width、height
• Image Background: backgroundShowMode、backgroundFill、backgroundFill、backgroundFillOpacity、backgroundStroke、backgroundStrokeOpacity、backgroundRadius、backgroundWidth、backgroundHeight
• Image Margin:margin
• Hover Image: hoverImage
  • Refers to the image displayed when interacting with hover. Supports configuring URL, SVG string, HTMLImageElement, HTMLCanvasElement.

For example:

label: {
  formatMethod: value => {
    return {
      type: 'rich',
      text: [
        {
          image: `https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/logo/logo.png`,
          width: 20,
          height: 20
        }
      ]
    };
  };
}

How to use Rich Text

How to use Rich Text in label

How to use Rich Text in Axis Components

How to use Rich Text in Discrete Legend

How to use Rich Text in Indicator

How to use Rich Text in Custom Marks

How to use Rich Text in Canvas Tooltip

DOM Extensions

To meet user needs for rendering custom DOM elements in charts, the underlying VRender supports two types of DOM extensions:

• HTML extension
• React extension

HTML Extension

How to Enable the HTML Extension Plugin

Enable the HTML extension plugin by passing the chart configuration enableHtmlAttribute

const vchart = new VChart(spec, { dom: 'chart', enableHtmlAttribute: true });

How to Use HTML Extension Attributes

React Extension

How to Enable the React Extension Plugin

Enable the React extension plugin by passing the ReactDOM export object into the chart configuration.

import ReactDOM from 'react-dom/client';

const vchart = new VChart(spec, { dom: 'chart', ReactDOM: ReactDOM });

How to Use React Extension Attributes