Skip to main content

TreemapChart (트리맵차트) Widget Control

The Widget Control (Property · Method · Event) entries you use to control the TreemapChart widget from a script. For an introduction and usage, visit TreemapChart.

info

In the examples below, treemapchartID is the name (ID) you gave the TreemapChart widget on the canvas. In scripts, access it as widgetID.member.

Widget Control summary​

Widget ControlKindSignatureDescription
setDataMethodsetData(data)Replaces the treemap/heatmap data and redraws the chart
setCurrencyMethodsetCurrency(unit)Sets the currency unit for trading value and market cap ('원' / '달러')
setStopsMethodsetStops(jsonString)Overrides the color theme (positive/negative color stops and more) with JSON
setTooltipFieldsMethodsetTooltipFields(jsonString)Configures the fields shown in the item tooltip
setGroupSummaryFieldsMethodsetGroupSummaryFields(jsonString)Configures the fields shown in the group summary
onItemClickEventonItemClick = (code, groupCode) => { ... }Runs when you click an item (tile)

Property​

info

Not applicable — the TreemapChart widget has no script-only Property. In scripts, read and write values with the common Widget Control (getProperty / setProperty) below.

Method​

setData​

Replaces the treemap/heatmap data and redraws the chart.

  • Kind: Method
  • Parameters: data (string) - a JSON string holding either a flat array (label, value, colorValue, extras, and optional children) or a column-style object of parallel arrays
  • Returns: None (void)

Example

treemapchartID.setData(JSON.stringify([
  { label: "삼성전자", value: 350, colorValue: 2.15, extras: { currentPrice: 72500 } },
  { label: "SK하이닉스", value: 280, colorValue: -1.2 }
]));

setCurrency​

Sets the currency unit used for trading value and market cap. The unit you choose changes how amounts are labeled and how decimals are handled.

  • Kind: Method
  • Parameters: unit (string) - '원' (Korean won, default) or '달러' (US stocks)
  • Returns: None (void)

Example

treemapchartID.setCurrency("달러");

setStops​

Overrides the treemap color theme with a JSON object, then refreshes the cached theme and hover state.

  • Kind: Method
  • Parameters: jsonString (string) - a JSON object string with positive/negative color stops, the neutral color, glow, tooltip colors, and more
  • Returns: None (void)

Example

treemapchartID.setStops(JSON.stringify({
  positiveStops: [{ value: 0, color: "#FF1B5E20" }, { value: 3, color: "#FF4CAF50" }],
  negativeStops: [{ value: 0, color: "#FFB71C1C" }, { value: -3, color: "#FFE57373" }],
  zeroColor: "#FF9E9E9E",
  tooltipBgColor: "#FF202020"
}));

setTooltipFields​

Sets the fields shown in the item tooltip with JSON.

  • Kind: Method
  • Parameters: jsonString (string) - a JSON array of field specs. Each entry has key, label, format (an options object), and useChangeColor. format options: decimals (integer, default 0), comma (boolean, default false), sign (boolean, default false), prefix (string), suffix (string), divisor (number, e.g. 10000)
  • Returns: None (void)

Example

treemapchartID.setTooltipFields(JSON.stringify([
  { key: "colorValue", label: "등락률", format: { decimals: 2, sign: true, suffix: "%" }, useChangeColor: true },
  { key: "currentPrice", label: "현재가", format: { decimals: 0, comma: true } }
]));

setGroupSummaryFields​

Sets the fields shown in the group summary with JSON. The format matches setTooltipFields.

  • Kind: Method
  • Parameters: jsonString (string) - the same JSON array of field specs as setTooltipFields
  • Returns: None (void)

Example

treemapchartID.setGroupSummaryFields(JSON.stringify([
  { key: "currentPrice", label: "현재가", format: { decimals: 0, comma: true } },
  { key: "colorValue", label: "등락률", format: { decimals: 2, sign: true, suffix: "%" }, useChangeColor: true }
]));

Event​

onItemClick​

Runs when you click an item (tile) in the chart. It behaves the same for both treemap and heatmap. Assign a callback function to define what happens.

  • Kind: Event
  • Parameters (handler arguments): code - the code of the clicked symbol, groupCode - the code of the group it belongs to (null when there is no group)
  • Returns: None

Example

treemapchartID.onItemClick = (code, groupCode) => {
  // Handle the clicked item
};

Common Widget Control (all widgets)​

note

Every widget supports name-based common Widget Control (Method) entries such as setProperty, getProperty, and setStyleProperty. See the common reference doc (to be written).