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
});
AttributeTypeInfo
auto-resize autoResizeBooleantrue | false | 1 | 0
background-color backgroundColorString"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...
bgcolorString"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...
border-color borderColorString"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...
border-width borderWidthNumeric

To set the width of the chart.

1 | 5 | ...

cacheObject{ data: true | false defaults: true | false css: true | false csv: true | false }
cache-control cacheControlString"http-headers" | "query-string" | "none"
colorString"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...
containerString"mydiv_id"
csvdataString"..."
customprogresslogoString

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" | ...

dataObject

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

{...}

dataurlString"myjson.php" | "http://www.domain.com/myjson.php" | ...
defaultsObject{...}
defaultsurlString"mydefaults.php" | "http://www.domain.com/mydefaults.php" | ...
eventsObject{ complete: function(p) { ... } load: function(p) { ... } ... }
exportdataurlString"dataexportscript.php" | ...
exportimageurlString"imageexportscript.php" | ...
fullscreenBooleantrue | false | 1 | 0
heightMixed

To set the height of the chart.

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

hideprogresslogoBoolean

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

idString

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"

localeString"en_us" | "fr" | "es" | ...
outputString"canvas" | "svg" | "vml" | "auto"
widthMixed300 | "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.