Performance should always be a concern, but as you get into larger datasets (20k+ nodes) the chart will definitely slow down. How do we combat this? What constitutes a good solution? Lets go over some of the basic performance concerns and how we can address them.

Data Types

The type of data you input to the chart can have drastic performance implications. If you are plotting multi dimensional data there will definitely be a slow down.

2D Array

If you are rendering your data as a 2D array of values then the chart will at the very least render at n^2 speed. This data format is typical if you are using data in the form [x,y] or [timestamp,value]. We consider this data to have an irregular step, meaning the interval (step) is not identical from node to node.

Note: If you're data is multidimensional but the step is consistent (e.g once every second), you do not need multidimensional data. You can use a single dimensional array and set your `scaleX.step` value in the initial chart configuration.


There is no straight forward solution to performance. With that said there are some basic steps you can take to achieve a relative performance gain. A combination of the following methodologies.

Defer Load

You can defer the loading of data in your chart by rendering an empty series object and giving your chart configuration a noData object to inform the user data is on the way. You can batch in data asynchronously after this.

let chartConfig = {
  type: 'area',
  noData: {
    text: 'No data found',
    backgroundColor: '#efefef'
  // if fetching data remotely define an empty series
  series: [{}]

JSON Attributes

There are several attributes which enhance aspects of the render speed. These attributes are the main performance features located in the plot object.

plot: {
  exact:true, // is recommended when you want the chart to paint ALL nodes and not sample your data
  smartSampling: true, // smart sample and render data
  hintTs: true, // tells the library you have timestamps as keys and activates a small optimization technique
  maxNodes: 150, // max nodes to have event listeners for eg) tooltips wont show but crosshair will
  maxTrackers: 150, // will disable the hover active areas you have for markers (again, 60k) since you use crosshair tool anyway

ZingChart Globals

A small list of attributes which will help the parse/render process.

 // defined ABOVE the render and sets flags 
// globally for ALL charts on a page
zingchart.DEV.CACHECANVASTEXT = true;
zingchart.DEV.CHECKDECIMALS = false;
zingchart.DEV.CACHESELECTION = true;
zingchart.DEV.MEDIARULES = false;
zingchart.DEV.SKIPTRACKERS = true;

Render Type

The render method is where you can define the output which can either render canvas or svg. If you are rendering a large dataset, the performance of canvas will benefit you because DOM explosion happens when rendering in svg.

 // render the chart right away
  id: 'myChart', 
  data: myConfig, 
  height: '100%', 
  width: '100%',
  output: 'canvas',