Class TreeMapChart<CursorResultTableBackgroundType>

Add manually controlled Cursor object. These have exactly same functions as built-in cursors but they can be freely controlled by application logic.

 const cursor = chart.addCursor()

Styling works same as built-in cursors (e.g. setCursor).

Position is set using setPosition method and displayed content using setResultTable(table => table.setContent(...)) For more details, see Developer documentation > Features > Cursor > Manual cursors

Returns

Cursor object.

Add callback function to be triggered when specified event is fired.

 // Example syntax
 object.addEventListener('click', (event) => {
     console.log(event)
 })

Some classes also report extra information about the interacted object with the second parameter:

 // Most series share information about interacted data point
 series.addEventListener('click', (event, info) => {
     console.log(info)
 })

Optional third parameter allows registering event handlers that will automatically remove themselves after first trigger:

 // Example this listener will only fire once
 object.addEventListener('click', (event) => {})

Each class has its own list of supported events. Some events are from HTML standard (click, pointerdown, etc.), while others are own events from LightningChart JS (dispose, resize, etc.)

To find what events are available, you can try following:

• If your development environment has TypeScript enabled, just write addEventListener and see what possible event types the IDE suggests. These APIs are strongly typed, and even the callback event will be correctly typed.
• Otherwise, open the class section in API documentation and check out which interface K type parameter extends.

Attach object to an legendBox entry

Returns

Series itself for fluent interface

Permanently destroy the component.

To fully allow Garbage-Collection to free the resources used by the component, make sure to remove any references to the component and its children in application code.

let chart = ...ChartXY()
let axisX = chart.getDefaultAxisX()
// Dispose Chart, and remove all references so that they can be garbage-collected.
chart.dispose()
chart = undefined
axisX = undefined

Returns

Object itself for fluent interface

Get component highlight animations enabled or not.

Returns

Boolean

Get rounded-ness of corners.

Returns

Number or undefined.

Introduced in v7.0. API might be changed depending on user feedback.

Get reference to the built-in cursor object of the chart.

Returns

Generic cursor object.

Get active cursor formatter.

Returns

Cursor formatter.

Get current cursor behavior.

Returns

SolveNearestMode or undefined

Get the FillStyle of the node labels.

Returns

FillStyle

Get the font of the node labels.

Returns

FontSettings

Get boolean flag for whether object should highlight on mouse hover

Returns

Boolean for if object should highlight on mouse hover or not.

Get the FillStyle of the node labels.

Returns

FillStyle

Get the font of the node labels.

Returns

FontSettings

Get minimum size of Panel. Depending on the type of class this value might be automatically computed to fit different elements.

Returns

Vec2 minimum size or undefined if unimplemented

Get the LineStyle of the node labels.

Returns

LineStyle

Get theme effect enabled on component or disabled.

A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components. Whether this effect is drawn above a particular component can be configured using the setEffect method.

 // Example, disable theme effect from a particular component.
 Component.setEffect(false)

For the most part, theme effects are enabled by default on most components.

Theme effect is configured with effect property.

Returns

Boolean that describes whether drawing the theme effect is enabled around the component or not.

Get the color of the path labels.

Returns

FillStyle

Get the font of the path labels.

Returns

FontSettings

Get currently active user interaction scheme. This does NOT return the last value supplied to setUserInteractions. Rather, it considers the current structure of the chart, all built-in defaults as well as overrides supplied by the user and returns the currently used interaction scheme.

Returns

TreeMapChartChartInteractions

Introduced in v7.0.0. API may change according to user feedback.

Remove event listener added using addEventListener. The expected argument should be the exact same callback function that was supplied using addEventListener:

 // Basic example syntax
 const listener = () => {}
 obj.addEventListener('click', listener)
 obj.removeEventListener('click', listener)

 // Basic boilerplate of custom interaction when user drags on an object
 obj.addEventListener('pointerdown', (eventDown) => {
     let prevCoord = eventDown
     const handlePointerMove: LCJSInteractionEventListener<'pointermove'> = (eventMove) => {
         const delta = { x: eventMove.clientX - prevCoord.clientX, y: eventMove.clientY - prevCoord.clientY }
         prevCoord = eventMove
         console.log(delta, eventMove.clientX, eventMove.clientY)
     }
     const handlePointerUp: LCJSInteractionEventListener<'pointerup'> = (eventUp) => {
         window.removeEventListener('pointermove', handlePointerMove)
         window.removeEventListener('pointerup', handlePointerUp)
     }
     window.addEventListener('pointermove', handlePointerMove)
     window.addEventListener('pointerup', handlePointerUp)
 })

Set component highlight animations enabled or not. For most components this is enabled by default.

 // Example usage, disable highlight animations.
 component.setAnimationHighlight(false)

This method does not work before map data is loaded. See onMapDataReady

Returns

Object itself

Enable/disable animation of Nodes positions. This is enabled by default.

 // Example, enable category position animation and increase speed.
 chart.setAnimationValues(true, 2)

 // Example, disable value animation.
 chart.setAnimationValues(false)

Returns

Object itself.

Configure rounded-ness of corners.

 obj.setCornerRadius(10)             // 10 px rounding radius
 obj.setCornerRadius(undefined)     // straight corners

Style chart cursor using a callback function. Available style APIs can depend on the type of chart.

 // Example syntax
 chart.setCursor((cursor) => cursor
     .setGridStrokeXStyle(new SolidLine({
         thickness: 1,
         fillStyle: new SolidFill({ color: ColorRGBA( 255, 0, 0 ) })
     }))
 )

See Cursor2D, CursorXY or Cursor3D for all available methods for configuring the cursor.

Example usage:

 // Example 1, disable Y Axis tick marker & grid line.
 chart.setCursor((cursor) => cursor
     .setTickMarkerYVisible(false)
     .setGridStrokeYStyle(emptyLine)
 )

 // Example 2, style cursor ResultTable.
 chart.setCursor((cursor) => cursor
     .setResultTable((resultTable) => resultTable
         .setOrigin(UIOrigins.LeftTop)
         .setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
         .setTextFont((font) => font
             .setSize(12)
             .setFamily('sans-serif')
         )
         .setBackground((background) => background
             .setFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 0) }))
         )
     )
 )

 // Example 3, style cursor TickMarker X.
 chart.setCursor((cursor) => cursor
     .setTickMarkerX((tickMarker: UIPointableTextBox) => tickMarker
         .setTextFont((font) => font.setWeight('bold'))
         .setTextFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))
         .setBackground((background) => background.setFillStyle(emptyFill).setStrokeStyle(emptyLine)),
     )
 )

Returns

Object itself for fluent interface.

Set cursor formatting, controlling the text displayed in built-in cursor.

 chart.setCursorFormatting((_, hit, hits) => {
     return [
         ['Cursor pointing at'],
         [hit.series], // returning a series will display the series color and its name automatically.
         ['X', '', hit.axisX.formatValue(hit.x)], // utilizing axis formatValue is useful for considering active zoom level and type of axis
         ['Y', '', hit.y.toFixed(2)], // empty string '' results in gap between cells
         [{ text: 'Example', font: { weight: 'bold' }, fillStyle: fillRed }] // any cell can also be styled individually
     ]
 })

Before overriding default cursor formatting, it is recommended to check if using setUnits or configuring Axis cursor formatting would be enough.

In order to use series specific data properties (e.g. Heatmap sample "intensity"), you should use type guards to assert the type of the SolveResult:

 // Example of using type guard in cursor formatter
 Chart.setCursorFormatting((chart, hit, hits) => {
     if (!isHitHeatmap(hit)) return undefined
     return [hit.intensity.toFixed(1)]
 })

More details in Developer documentation (Features > Cursor).

Returns

Object itself

Set cursor behavior. This affects both built-in cursor as well as any custom cursor connected using setCustomCursor.

For possible values see SolveNearestMode. Additionally, you can supply undefined value to disable cursor completely.

 // Example, show 1 nearest solve result only
 chart.setCursorMode('show-nearest')

 // Example, disable cursor
 chart.setCursorMode(undefined)

 // Example, enable interpolation
 chart.setCursorMode('show-all-interpolated')

Returns

Object itself

Connect a custom cursor to the chart. This has 2 effects:

1. The built-in cursor is disabled.
2. The provided callback function is called whenever the custom cursor should be updated, along with the data that the cursor should be pointing at.

Custom cursors are still affected by other cursor behavior controls such as:

• setCursorMode
• Series setCursorEnabled

The custom cursor can be anything defined by the user, such as:

• Using other LCJS means of displaying the cursor, like custom ticks, constant lines, text boxes, etc.
• Displaying a cursor using HTML/JS/CSS
• Displaying a cursor using UI framework, like Angular, React, Vue, Next, ...

 // Example of plugging in a custom cursor
 chart.setCustomCursor((event) => {
     if (event) {
         // Display custom cursor
     } else {
         // Hide custom cursor
     }
 })

Returns

Object itself

 // Example usage
 treeMap.setData([
     { name: 'Category 1', value: 10 },
     { name: 'Category 2', value: 12 },
     { name: 'Category 3', children: [
       { name: 'Category 3.1', value: 6 },
       { name: 'Category 3.2', value: 12 },
    ]},
 ])

Returns

Object itself

Set the amount of levels of children nodes to display.

 chart.setDisplayedLevelsCount(2)

Returns

Object itself.

Set the node to drill down to. Pass node for automatic drill down to that node.

// Pass any child of the main node to drill down.
setTimeout(() => {
   chart.setDrillDownNode(node[0])
}, 4000)

Pass undefined to reset drill down.

setTimeout(() => {
  chart.setDrillDownNode(undefined)
}, 8000)

Returns

Object itself.

Set FillStyle of the node labels.

// Example, set node label color to red.
chart.setHeaderFillStyle(new SolidFill({ color: ColorCSS('red') }))

Returns

Object itself.

Set Font of the node labels.

// Example, set node label font to 20px.
chart.setHeaderFont((font) => font.setSize(20))

Returns

Object itself.

Set highlight on mouse hover enabled or disabled.

Mouse interactions have to be enabled on the component for this to function as expected. See setMouseInteractions for more information.

Returns

Object itself for fluent interface.

Set the text for the back button that returns to the 1st level of Nodes.

 chart.setInitPathButtonText('Reset')

Returns

Object itself.

Set FillStyle of the node labels.

// Example, set node label color to red.
chart.setLabelFillStyle(new SolidFill({ color: ColorCSS('red') }))

Returns

Object itself.

Set Font of the node labels.

// Example, set node label font to 20px.
chart.setLabelFont((font) => font.setSize(20))

Returns

Object itself.

Set LineStyle of the node labels.

// Example, set node label color to red.
chart.setNodeBorderStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorCSS('blue') }) }))

Returns

Object itself.

Set the color of the nodes.

// Example usage of PalettedFill by value .
chart.setNodeColoring(
     new PalettedFill({
         lut: new LUT({
             steps: [
                 { value: 0, color: ColorCSS('red') },
                 { value: 20, color: ColorCSS('blue') },
             ],
             interpolate: true,
         }),
     }),
)

Returns

Object itself.

Set the color of the nodes.

// Example, set colors of nodes to purple and blue only.
chart.setNodeColoring([ColorCSS('purple'), ColorCSS('blue')])

Returns

Object itself.

Set theme effect enabled on component or disabled.

A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components. Whether this effect is drawn above a particular component can be configured using the setEffect method.

 // Example, disable theme effect from a particular component.
 Component.setEffect(false)

For the most part, theme effects are enabled by default on most components.

Theme effect is configured with effect property.

Returns

Object itself.

Set Color of the parent node.

// Example, set parent node color to red.
chart.setParentNodeColor(ColorCSS('red'))

Returns

Object itself.

Set Color of the path labels.

// Example, set path label color to red.
chart.setPathLabelFillStyle(new SolidFill({ color: ColorCSS('red') }))

Returns

Object itself.

Set Font of the path labels.

// Example, set path label font to 20px.
chart.setPathLabelFont((font) => font.setSize(20))

Returns

Object itself.

Configure user interactions from a set of preset options.

Without any explicit configuration, the charts select the default user interaction scheme based on available information, such as axis types, attached series and data supplied to series.

The setUserInteraction methods allow explicitly configuring the used interaction scheme.

 // Example, disable all user interactions
 chart.setUserInteractions(undefined)

Returns

Object itself.

Introduced in v7.0.0. API may change according to user feedback.