Images – ReGraph Docs

Images

ReGraph lets you customize nodes, labels and glyphs with images using the image property, which accepts a string URL to any standard image type.

<Chart items={{
    node1: {
      image: '/images/person.png'
    }
    node2: {
      image: 'data:image/png;base64,<...>'
    }
  }}
/>

For best results, we recommend using images with a square aspect ratio for nodes (node image) and glyphs (glyph image). Images for labels can have any aspect ratio (label image).

ReGraph supports SVG images in all modern browsers. To further improve cross-browser compatibility, set width and height attributes in your SVG files.

To ensure performance and stability, SVGs are converted to bitmaps when they're drawn, and are restricted to a maximum of 256 x 256 pixels.

ReGraph can performantly display up to 900 distinct 256 x 256 images and font icons, limited only by the user's hardware. Using more than this is not recommended as it may affect chart rendering performance.

CORS Images

The Cross-Origin Resource Sharing (CORS) protocol imposes security restrictions that can affect images loaded from a different domain to your app. For example, you might run ReGraph from https://www.myapp.com/graph but fail to load images from https://s3.amazonaws.com.

ReGraph automatically tries to reload the failing images with the crossorigin HTML attribute set. You can import and use the setCorsAdapter config method to change the value of the attribute.

Any remaining missing or blocked images will appear as a blue X.

To safely display your cross-origin images, consider:

If you control the image server, use Access-Control-Allow-Origin HTTP headers to enable CORS requests.
Store the cross-origin images in URL-encoded strings.
Provide an image proxy service on your app server. Instead of fetching images directly from their original source (that is, when your data includes an image prop with a value http://s3.amazonaws.com/<image-name>), create an endpoint on your app server which forwards a request from the client. For example, if you create a proxy endpoint /imageproxy, the image url in your data would change to /imageproxy?target=http://s3.amazonaws.com/<image-name>. Your endpoint would extract the image URL from the target query parameter, fetch the image data, and send it back to the client.

Using a CDN with an S3 Bucket

If you are serving images from an S3 bucket through a CDN, and ReGraph is still unable to download images:

Ensure that your CDN cache is configured appropriately (according to your CDN docs).
Ensure that you have also set the Vary HTML response header, and that it includes the values Origin, Access-Control-Request-Headers and Access-Control-Request-Method.

This ensures that the browser always tries to reload the images with the correct headers.