Blog Help & Support Contact About Login

 Show Nav

Removing 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 the ZingChart branding watermark

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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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 the ZingChart branding context menu

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.

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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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 data sets, 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.

Removing the ZingChart branding loading screen

Hiding Logo

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

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

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

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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 below chart to see an image of a blueberry appear on the loading screen.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Note that hiding or replacing the loading screen logo is just the beginning of what you can do. See our documentation on render methods and other ZingChart objects for more customization options.

Summary

Got a question about how ZingChart branding removal works? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.