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