Overview
Application Scenario
When designing a chart, you can customize the setting items like the chart title, label, and prompt using code. You can use JS to customize their display content or use HTML code to customize their styles and content.
For example, for the chart title, you can directly input HTML code <font color='#00AEFF'>▍</font> Product Sales, and then select Use HTML to Parse Text Content.
Note:The following figure shows the preview effect.
Function Description
1. Custom code can be used to set the title, label, axis label, and tooltip in the chart.
2. You cannot customize the chart title by using JS code. When entering the HTML code, you can edit the code directly in the text box instead ot using formulas.
3. You need to select Use HTML to Parse Text Content when using HTML code.
4. When you use HTML code, the following restrictions apply to chart export:
Only these tags: <b>、<strong>、<i>、<em>、<br/>、<span> are supported.
Only inline styles are supported for <span>.
Only inline styles: font-size, font-family, font-style, font-weight, and color are supported (when font-weight is set to bold, only supports bold, not bolder).
Exported HTML text can be displayed horizontally only, which cannot be rotated.
Nested tag formats are not supported, for example: <span>Parent Node<span>Child Node</span></span>.
Examples Index
Document Link | Application Scenario | Display Effect |
Custom Images as Prompts | Through customizing chart labels/prompts by HTML code, you can set labels to images which display following the graph. | |
Use custom JS code to set chart labels and perform calculations, and use formulas to change the value formats. Then, the proportions of each category will be displayed on the chart which contains one series and multiple categories. | | |
Custom Label as the Series Sum Custom Tooltips as Series Sum | Customize chart labels/prompts by JS code to display the summary values on the stacked column chart. | |
Customize pie chart labels by HTML code to display labels in series colors. | | |
Customize chart tooltips by HTML code to create a different style for each tooltip. | | |
Customize chart prompts by JS+HTML code to retrieve dataset data for the tooltips and obtain an increase/decrease triangle effect. | | |
Customize chart prompts by JS code to display cell data. | | |
Customize chart tooltips by JS+HTML code to display all series with different units. | | |
Customize chart axis by JS code to display numerical indicators for the category axis. | |
Common HTML Writing
Here are some commonly used HTML writing methods for text parsing for you to reference.
Type | Example |
Display Effect of the Single Label in Single Line | <span style="color:blue;">New chart title</span> |
<b>New chart title</b> | |
<i>New chart title</i> | |
<span style="font-size:16px; font-family:Verdana; font-style:italic; font-weight:bold; color: #00f;">New chart title</span> | |
Display Effect of the Single Label in Line Feed | <span style="color:blue;">New<br>chart title</span> |
<span style="color:blue;">New<br>chart<br>title</span> | |
<em>New chart<br>table title</em> | |
Display of Multiple Labels in a Single Line | <b>New</b><i>chart</i> |
<b>New</b><i>chart</i><em>title</em> | |
<span style="color:blue;">New</span><i>chart</i><em>title</em> | |
Display of Multiple Labels in Line Feed | <b>New<br>chart</b><br> |
<b>New<br>chart</b><br><em>title</em> | |
<b>New</b><i>chart</i><br><em>title</em> |
Previous：Difference Between Chart Hyperlink and Cell Hyperlink
