ZingChart: How to Speed Up My Chart

First: Analyze

Common chart attributes that slow down a chart

1. rules   because this generates a large if statement inside parse. If you have many rules  objects, you will have many if  statements.

1. 2D values array. If you are plotting timeseries data, this will always be a limiting factor to how fast your chart is. We can only parse and render a 2D array  at an optimal speed compared to a 1D values  array.

2. Turn off animation.

3. How many plots do you have. Do you have one plot with 20k points or do you have two hundred plots with one hundred points? The amount of plots vs nodes will also slow down rendering.

Second: Optimize

Speeding up your charts can be dependent on the chart type you are using. There are a general list of attributes in the plot  object that will help.

"plot":{

  // helps with smart sampling
  "mode":"fast",  

  // helps crosshair rendering (crosshairs are MUCH faster than tooltips for chart types with nodes/markers)
  "exact":true, 
        
  // smart sample dataset and render data    
  "smartSampling":true, 
  
  // max nodes to have event listeners for eg) tooltips wont show but crosshair will  
  "maxNodes":100,
 
  // max nodes to have event listeners for eg) tooltips wont show but crosshair will 
  "maxTrackers":100, 
}

Defining a canvas render can be a quick way to speed up a render

zingchart.render({ output: 'canvas' });

Lastly, the next level of speed comes from global zingchart  object settings.

zingchart.DEV.CACHECANVASTEXT = true;
zingchart.DEV.CHECKDECIMALS = false;
zingchart.DEV.CACHESELECTION = true;
zingchart.DEV.MEDIARULES = false;
zingchart.DEV.SKIPTRACKERS = true;

zingchart.render({...});

Docs

1. https://www.zingchart.com/docs/tutorials/features/performance

2. https://www.zingchart.com/docs/api/json-configuration/graphset/plot

3. https://www.zingchart.com/docs/api/json-configuration/graphset/crosshair