Improving the performance of custom visualizations

Render performance

Rendering a custom visualization with many data points can take a hit on the performance. If you know what triggers the render action, then you can decide what needs to be rendered again.

Use the reason field in the UpdateInfo class to determine what triggered the render and then determine what items you render to minimize the performance decrease. An instance of UpdateInfo is passed to you every time update is called.

Updating the document object model (DOM) and recalculating are often expensive operations. Whenever possible, prevent these updates from being performed too often. For instance, if the reason for rendering is the change of the background color of your custom visualization, then you might want to change the color of the corresponding UI element and leave the rest of the visualization untouched.

Also, be aware that highlights and selections can cause the update function to be called many times. If your custom visualization supports highlighting elements, then each mouse move operation over the visualization might trigger an update. You find that for rendering highlights and selections the decorations field in the reason is flagged. Depending on how you would like to show highlighted and selected elements, you can consider an alternative, high performance, render function that is dedicated to rendering selections and highlights.

For more information, see Class RenderReason and Class UpdateInfo.

Responsiveness of the custom visualization

The displayed size of your custom visualizations can introduce a decrease in performance. It is not necessary to always show everything. You can tweak the following items of your custom visualization to both increase the performance and show a meaningful visualization in limited screen space:

• Labels on axis
• Titles
• Text labels