ZingChart 2.2.0 has arrived! We’re always striving to make our customers happy. As a result, the team is finally ready to release the new build of ZingChart. It includes some important updates that our users have been requesting. If you're thinking of upgrading to 2.2.0, please read this post as it contains important information regarding breaking changes caused by the switch to a new default theme. Jump to the New Theme section to get fixes and compatibility information.

The New Build of ZingChart

This latest release includes additional features in our JavaScript charting library, API updates, and new chart types.

New Chart Type: Calendar

calendar image for new calendar chart type
The new build includes the newest addition to ZingChart’s list of chart types: calendar chart. This highly customizable chart type allows you to display data activity over the course of one month up to a full calendar year. You can use it as an actual calendar, with numbered days and/or to mark off specific dates. Customization options include:

  • Select your own color palette
  • Configure your rows to start on Sunday or Monday
  • Style cells by months, weeks, and day

Above is a simple demo using only some of the features in this chart type. Stay tuned for new calendar documentation for a more in-depth explanation on how to put together and format calendars in ZingChart.

Chart Updates

Bubble charts now have updated "max-size", "scaling", and "size-factor" attributes. For "max-size", provide a pixel value to specify your maximum bubble size. For "scaling", provide a value of "area" (default) or "radius" (the square root of your default value). For "size-factor", provide a value in relation to 1 to enlarge (>1) or decrease (<1) the size of your bubbles.

Angular gauge charts are also updated. The new build includes further customization for the needle indicator. You can modify the base (curved or flat), tip (curved or pointed), and offset (distance from center) with the "indicator" attribute. There is also more customization available for the pivot point. Based on ZingChart markers and shapes, you can change your pivot point to display diamonds, stars, gears, etc. with the "type" attribute.

Scales in angular gauge charts are updated, as well. We now support multiple scales, which means you can incorporate two or more scales into your angular gauge. There are also new scale markers. Use a "markers" array to incorporate line or area markers into your gauge.


New Theme


The wait is over! ZingChart has received an (admittedly) much-needed facelift in the form of two new themes, which we’ve dubbed internally as “light” and “dark.” These new themes update styling to a more modern, flat, simplistic approach. With the new build, the “light” theme is the new default. Be advised that the new theme does implement new default styling and will affect charts that were created with the previous versions of ZingChart. For backwards compatibility, we have added the ‘classic’ theme to reset all of the new defaults. Simply set your theme to "classic" in order to maintain old chart configuration while updating to v2.2.0. .

There are three ways to set a theme in ZingChart :

  1. Globally using the *zingchart.THEME *variable.
zingchart.THEME = “light”;
2. Within the chart configuration object.
  type : ‘line’,  
  theme : ‘dark’  
  1. Within the render object.
  id : ‘myChart’,  
  theme : ‘classic’,  
  width : 500,  
  height : 300  

new theme example

new theme alternate example

If you prefer the style of the original theme, simply set “theme”:”classic” in your chart configuration to revert back to our classic theme.

Watermark Update

ZingChart 2.2.0 unlicensed/trial charts will include new watermark colors with luminance detection.

zingchart watermark

This makes the ZingChart branding look better if you are using the new light or dark themes, or custom styling.

Context Menu Update

Our new build features an updated context menu. It has a sleeker, more streamlined look to conform with the release of our new light and dark themes. We’ve also included several new attributes to allow for better menu customization.

context menu

By default, the context menu appears wherever your right-click on your chart. To fix it to a specific position, add a “docked” attribute and set the value to true. The default position for a docked context menu is on the left-hand side. You can move it to the right-hand side of your chart with a “position” attribute, and by setting the value to “right”.

To adjust the transparency levels of your context menu, add an “alpha” attribute. Provide any value between 0 (clear) and 1 (solid), making sure to place a zero before your decimal point.

You can also add a hamburger menu icon, giving users the option to directly click on the context menu. Create a “button” object, and add a “visible” attribute. Set the value to true.

Added Features - GeoJSON and TopoJSON

TopoJSON map made in ZingChart
Recently, we added support for GeoJSON with the ZingChart maps module. We’ve extended that to include the type GeometryCollection and made some tweaks to issues with MultiLineString.

With ZingChart 2.2.0, we now offer full support for TopoJSON. For those that don’t know, TopoJSON is a map file type that was created by Matt Bostock of D3 fame. It solves some of the major issues that plague GeoJSON, namely the duplication of shared lines and exorbitant file sizes. The end result is a file that holds all the information of a typical GeoJSON file but in a size that’s usually 1/6th the size. That means less time parsing JSON files and faster map renders. Read more about TopoJSON or head to our docs to get started making some maps.

API Updates

API updates in the new build are centered around animation. They include:

  • Boolean to set whether animation runs on legend actions or on data API calls
  • On-legend-toggle
  • On-change

Key Fixes

The new build of ZingChart also contains some important fixes you can use in your charts. They include:

  • Legend scrolling
  • Horizontal bullet chart rendering
  • Crosshair alignment
  • Realtime tooltip flickering

We Want Your Feedback

We would love to hear if this latest build solves any charting issues you’ve been facing. Leave your feedback in the comments section below and we will be sure to reply.