• Getting Started

  • Data

  • Chart Types

  • Chart Elements

  • Integrations

  • API

  • Tools

  • FAQ

  • Change Log

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