ZingChart Render

ZingChart.render()

The ZingChart render method is used to set various chart render options. At a minimum, you must specify the id and data elements for the chart to properly render and display.

zingchart.render({
  id: 'myChart',
  data: { ... },
  height: 400, // Set to 100% to fully scale to parent container
  width: '100%', // Default
  output: 'svg', // Default
  customprogresslogo: 'bl', // Placement of ZingChart watermark
});
Attribute Type Info
auto-resize autoResize Boolean true | false | 1 | 0
background-color backgroundColor String "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...
bgcolor String "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...
border-color borderColor String "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...
border-width borderWidth Numeric

To set the width of the chart.

1 | 5 | ...

cache Object { data: true | false defaults: true | false css: true | false csv: true | false }
cache-control cacheControl String "http-headers" | "query-string" | "none"
color String "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...
container String "mydiv_id"
csvdata String "..."
customprogresslogo String

Allows user to specify what image appears on the loading screen, in lieu of the default ZingChart logo. Refer to our documentation on Removing ZingChart Branding for more information.

"image.png" | ...

data Object

The chart data. For the chart to properly render, this and the id element are required.

{...}

dataurl String "myjson.php" | "http://www.domain.com/myjson.php" | ...
defaults Object {...}
defaultsurl String "mydefaults.php" | "http://www.domain.com/mydefaults.php" | ...
events Object { complete: function(p) { ... } load: function(p) { ... } ... }
exportdataurl String "dataexportscript.php" | ...
exportimageurl String "imageexportscript.php" | ...
fullscreen Boolean true | false | 1 | 0
height Mixed

To set the height of the chart.

300 | "100%" | "auto" | ...

hideprogresslogo Boolean

To hide or remove the ZingChart logo that appears on the loading screen (generally only visible on charts with larger datasets). Refer to our documentation on Removing ZingChart Branding for more information.

true | false | 1 | 0

id String

The element in the HTML document where you want the chart to render. For the chart to properly render, this and the data element are required.

"mydiv_id"

locale String "en_us" | "fr" | "es" | ...
output String "canvas" | "svg" | "vml" | "auto"
width Mixed 300 | "100%" | "auto" | ...

Summary

The ZingChart render method has many configuration options to allow you to modify and render your charts.For more information on the ZingChart object, see the ZingChart object page.