Docs Back to Docs

ZingChart Branding

Overview

On our charts, ZingChart branding appears in the following areas:

The ZingChart loading screen can be removed or customized by any user. The ZingChart watermark and context menu item can only be removed by users that hold a paid license key. Users should note that the ZingChart watermark and context menu item do not appear until the chart is loaded into a web browser. We do this to provide developers more flexibility and ease-of-use when familiarizing themselves with our product.

ZingChart Watermark

The ZingChart logo appears as a watermark at the bottom-right corner of our charts. It appears by default on all unlicensed charts when loaded into the web browser.

Removing Watermark

You need to buy a license key to remove the ZingChart logo watermark that appears at the bottom-right corner of all our charts. Once you have your license key, set it to the ZC.LICENSE variable, e.g., ZC.LICENSE = [ "569d52cefae586f634c54f86dc99e6a9" ]. Make sure the key is placed before the render method, and that it is placed in every page that renders charts. Note that the key will also remove the ZingChart item in the context menu.

PhantomJS users only: Used to generate static images, this server side program requires a separate license file. Please contact us if you are a PhantomJS user. You must have the most recent version of PhantomJS for chart images to properly generate.

Positioning Watermark

You can change the position of the watermark on your chart. Create a gui object, and then a watermark object. Add a position attribute. By default, the watermark appears at the bottom right corner of the chart (br). You can also place it in the following corners: bottom-left (bl), top-right (tr), top-left (tl).

gui: {
  watermark: {
    position: "bl" //br (default), bl, tr, tl
  }
}

Note that you must use a graphset array to contain your chart data.

https://app.zingsoft.com/demos/embed/6FFZA1FE

Context Menu Item

The context menu (or right-click menu, as it’s also known) appears when the user right-clicks on the chart. By default, About ZingChart appears as the last item in the menu on all unlicensed charts when loaded into the web browser.

Removing Menu Item

You need to buy a license key to remove the About ZingChart item that appears at the bottom of the context menu. Once you have your license key, set it to the ZC.LICENSE variable, e.g., ZC.LICENSE = [ "569d52cefae586f634c54f86dc99e6a9" ]. Make sure the key is placed before the render method, and that it is placed in every page that renders charts. Note that the key will also remove the ZingChart watermark on your charts.

https://app.zingsoft.com/demos/embed/N40ROTYM

You can add or remove other items on the menu, as well as change how the context menu appears on the chart. See our documentation on how to customize the ZingChart context menu (or right-click menu).

Loading Screen

The loading screen is what users see before a chart appears on the page. It is generally only visible with larger datasets, when the page needs more time for the chart to fully load. By default, the ZingChart logo appears on that screen, and users have the option of removing it or replacing it with a different image.

Hiding Logo

To remove or hide the ZingChart logo, go to the render method. Add a hideprogresslogoattribute, and set the value to true.

zingchart.render({ 
  id: 'myChart', 
  data: myConfig, 
  height: 400, 
  width: 600,
  hideprogresslogo: true,
});

Reload the following chart to see no logo appear on the loading screen.

https://app.zingsoft.com/demos/embed/R56HM70U

Customizing Logo

To add your own logo, go to the render method. Add a customprogresslogo attribute, and provide an image URL, e.g., customprogresslogo: 'https://www.zingchart.com/images/blueberry.jpg'.

zingchart.render({ 
  id: 'myChart', 
  data: myConfig, 
  height: 400, 
  width: 600,
  customprogresslogo: 'https://www.zingchart.com/images/blueberry.jpg'
});

Reload the following chart to see an image of a blueberry appear on the loading screen.

Summary

ZingChart branding appears in three places: a watermark in the lower right hand corner of the chart, a link in the context menu, and the loading screen. Purchasing a license will remove the chart watermark and allow you to reset the context menu and loading screen.