• Getting Started

  • Data

  • Chart Types

  • Chart Elements

  • Integrations

  • API

  • Tools

  • FAQ

  • Change Log

  • Images

    Overview

    The first step to using images is to create the "image" container.

    images: [ ]
    

    At the minimum, you will need to add the "src" attribute along with the path to the image location. By default the image will be placed in the top-left corner of your chart. Acceptable file formats include: PNG, GIF, JPEG and TIFF.

    images: [
      {
        src: "/images/zinglogo_small.png"
      }
    ]
    

    There are a number of styling properties that you can add to your chart images to enhance how they look and feel, including background colors, shadows, borders, and more. For a list of available attributes, please visit our JSON Syntax page.

    The x and y attributes allow you to place your image anywhere on the chart. Any entered values will move the image relative to the top-left corner of the chart. Acceptable values are in pixels or as percentages.

    images: [
      {
        src: "/images/zinglogo_white_tm.png",
        x: "230px",
        y: "0"
      }
    ],
    

    Any of the various background properties can be used to add a background color, gradients, and even a background image.

    images: [
      {
        src: "/images/zinglogo_white_tm.png",
        x: "230px",
        y: "10px",
        'background-color': "#333"
      }
    ],
    
    https://app.zingsoft.com/demos/embed/K3LMIHII
    https://app.zingsoft.com/demos/embed/K3LMIHII

    The "border-width", "border-color", and "border-radius" attributes allow you to further enhance the look of your image.

    images: [
      {
        src: "/images/zinglogo_white_tm.png",
        x: "230px",
        y: "0",
        'background-color': "#333",
        'border-width': "2px",
        'border-color': "#09f",
        'border-radius': "20px"
      }
    ],
    
    https://app.zingsoft.com/demos/embed/3YTOZ6OW
    https://app.zingsoft.com/demos/embed/3YTOZ6OW

    The "shadow" attribute allows you to add various shadow properties to your images.

    images: [
      {
        src: "/images/zinglogo_white_tm.png",
        x: "230px",
        y: "0",
        'background-color': "#333",
        'border-width': "2px",
        'border-color': "#09f",
        'border-radius': "20px",
        shadow: "true",
        'shadow-color': "#999",
        'shadow-distance': "4px"
      }
    ],
    
    https://app.zingsoft.com/demos/embed/81TRLUD5
    https://app.zingsoft.com/demos/embed/81TRLUD5

    The "callout" attribute allows you to add callouts.

    images: [
      {
        src: "/images/zinglogo_white_tm.png",
        x: "230px",
        y: "0",
        'background-color': "#333",
        'border-radius': "20px",
        callout: true,
        'callout-height': "25px",
        'callout-width': "15px",
        'callout-offset': "15px"
      }
    ],
    
    https://app.zingsoft.com/demos/embed/5MH29L2U
    https://app.zingsoft.com/demos/embed/5MH29L2U

    As stated before, the "images" container can hold any number of objects. Therefore, adding another image to our chart is simple. All we need to do is add another object and give it an "src" attribute.

    If you don't give at least one of the images an x or y position, they will both be positioned to the top-left by default and be stacked on top of each other.

    images: [
      { src: "/images/Planet_Express.png" },
      {
        src: "/images/zinglogo_white_tm.png",
        x: "230px",
        y: "0",
        'background-color': "#333",
        'border-radius': "20px",
      }
    ],
    
    https://app.zingsoft.com/demos/embed/VMRH565X
    https://app.zingsoft.com/demos/embed/VMRH565X
    https://app.zingsoft.com/demos/embed/NR5A5K6S
    https://app.zingsoft.com/demos/embed/NR5A5K6S
    https://app.zingsoft.com/demos/embed/MHFWKYHX
    https://app.zingsoft.com/demos/embed/MHFWKYHX

    Images are a great feature of ZingChart, and they can be styled and placed anywhere on your charts.

    Don't forget, a comprehensive list of available attributes and objects can be found on our JSON Syntax page.

    Images in Chart Overview

    ZingChart allows a chart to hold any number of image objects which can be styled and placed anywhere on your charts.

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