Chart Instance Methods
Use ref to call methods on an instance of a chart. For more information on how to do this, see the Chart Instance Methods documentation.
To create and use a ref, you could use:
function MyComponent({ items }) {
const chartRef = React.useRef(null);
const pinger = () => {
chartRef.current.ping('node1');
};
return (
<>
<Chart ref={chartRef} items={items} />
<button onClick={pinger}>
Ping Node 1
</button>
</>
);
}Exports a static image of the Chart. The exported image is encoded in a blob URL.
Parameters
-
object Options for the exported image.
object | PDFDocument Options to customize the PDFDocument by passing any PDFKit options, or to pass your own PDFDocument.
'portrait' | 'landscape'
default: 'portrait' The page orientation.
number
default: 72 A single value in DPI for all page edge margins. Overrides the margins option.
object The margins in DPI for individual page edges. The form is an object with top, bottom, left, and right values where all values must be provided.
'chart' | 'view'
default: 'view' Specifies whether the exported result contains only the current view or the full chart.
object | 'page' Scales the result to fit to the specified size while keeping the aspect ratio. For PDF this can also be set to 'page' to fit and fill the page space. Browsers set varying limits on max size, and will error if exceeded. Note that this option is not supported on a Leaflet map.
object A dictionary to manually define font resources, indexed by font names. Only required when automatic font loading fails, giving a 'Font not found' warning.
fonts: {
'Font Awesome 5 Free Regular': {
src: '../fonts/fontAwesome5/fa-regular-400.woff'
},
Muli: {
src: '../fonts/Muli/Muli-Regular.ttf'
}
} string The heading to be shown above the chart image in the exported PDF. This option is ignored when a custom PDFKit doc is passed.
'jpeg' | 'png' | 'svg'| 'pdf'
default: 'png' The file format to export to.
Returns
Promise<ExportResult>
Resolves to an object containing an image data URL and a download function.
A function that downloads the image when called. Cannot be used when a custom PDFKit doc is passed. Create a custom function to download the PDF.
Parameters
-
object
boolean
default: true Whether the browser should release the reference to the image after the download. Set to false to keep the image accessible.
string The url containing the blob url for the exported image.
Fit the chart to the items specified.
Returns an object with information about the item or sub-item at the specified view coordinates. This function can be used in integration testing, see Testing Tips for more details. The function is in beta from v4.5.
Parameters
Returns
An object with an id property of the parent item, an item property detailing the item, and a subItem property detailing the sub-item.
Returns an object with information about the item with the specified id. This function can be used in integration testing, see Testing Tips for more details. The function is in beta from v4.5.
Parameters
Returns
An object with an item property detailing the item's base properties and an overwrite property detailing any currently applied interaction styling. If called without arguments, returns a dictionary of items indexed by ids.
Returns the position of the annotation relative to its subjects. Can be useful e.g. when converting world-positioned annotations to subject-relative annotations.
Parameters
Returns
object | null
The annotation position relative to its subjects as an object with angle and distance properties. Returns null if annotation is not found or if it has no subjects.
Returns an object with the x and y view coordinates which are at the center of the specified item or sub-item. Note there may be multiple items at or under the returned central coordinates. This function can be used in integration testing, see Testing Tips for more details. The function is in beta from v4.5.
Parameters
Returns
object
The view coordinates as an object with x, y properties.
Returns the position of the annotation in world coordinates. Can be useful e.g. when converting subject-relative annotations to world-positioned annotations.
Parameters
Returns
object | null
The annotation position in world coordinates as an object with x and y properties, or null if not found.
Generates a static image of the current Chart, encoded as a base64 PNG. The navigation controls and overview window are not drawn into the image. Deprecated since v5.0. Use export instead.
Parameters
-
object
'chart' | 'exact'
default: 'exact' How the view settings are mapped when generating the image. 'chart' fits the whole chart into the image. 'exact' fit uses the same zoom and pan as the component which produces identical image if using the same dimensions as the browser component. This reproduces the view exactly as the user sees it.
Note that for a Leaflet map, only 'exact' fit is available.
number
default: The Chart's current height Height of exported image, in pixels.
number
default: The Chart's current width Width of exported image, in pixels.
Returns
Promise
Returns a Promise which resolves to an image encoded in a data URL.
Returns information about the label of the item with the specified id. Can be useful e.g. when overlaying text edit boxes over the chart surface. Does not return the label position for end1 or end2 labels on link ends.
Parameters
-
number The index of the label in the array of label objects if the item is styled by an array of labels.
Returns
LabelPosition
An object containing label coordinate properties, or null if the items are hidden or don't exist. The coordinates are in view coordinates relative to the top left corner of the ReGraph HTML element.
Pan the chart in the direction specified.
Adds a temporary animated halo effect to a node or link.
Parameters
- id required
-
string or object The id (or object of id properties) for the item / items to be animated. For example:
ping('node1')orping({ node1: true })-
object
string
default: 'rgb(255,109,102)' The color to use for the animated effect.
number
default: 80 The radius of a halo at the end of its animation.
number
default: 40 The width of a halo at the end of its animation.
number
default: 40 The width of a link at the end of its animation.
number
default: 1 The number of times the animation should be repeated.
number
default: 800 The time the animation should take, in milliseconds.
Converts world coordinates (absolute positions relative to the center of the chart) into view coordinates (relative to the top-left of the viewport) and is dependent on the current view (zoom and pan). On a Leaflet map, the passed world coordinates should represent longitude (worldX) and latitude (worldY).
Returns
object
The view coordinates as an object with x, y properties.
Converts view coordinates (relative to the top-left of the viewport) into world coordinates (absolute positions relative to the center of the chart).
Returns
object
The world coordinates as an object with x, y properties. On a Leaflet map, will return lng, lat properties instead.
Zoom the chart in the manner specified.