AnyChart
API Reference
Still have questions?
Contact support
Top

class anychart.charts.Graph Improve this Doc

Methods Overview

Specific settings
labels()Getter for graph chart labels.
layout()Getter for graph chart layout.
Data
data()Data settings.
Elements
edges()Graph chart edges settings getter.
group()Getter for chart groups by group id.
nodes()Graph chart nodes settings getter.
Interactivity
fit()Returns chart back to initial view. Reset zoom and translation.
interactivity()Getter for graph chart interactivity settings.
move()Getter for current chart translation.
rotation()Getter for graph chart rotation angle.
zoom()Getter for current zoom factor.
zoomIn()Perform zoom in on chart.
zoomOut()Perform zoom out on chart.

Methods Description

data

Getter for the data.

Returns:

Object - Return data object with nodes and edges fields
See listing
var data = chart.data();
var nodesData = data.nodes;
var edgesData = data.edges;
edgesData.set(0, 'stroke', '1 blue'); //Set edge stroke for first edge in dataset
nodesData.set(0, 'shape', 'star5'); //Set shape for first node in dataset
Setter for the data. Learn more about data

Params:

NameTypeDescription
dataObjectData is object with two required fields 'edges' and 'nodes'.
  1. nodes is one of
    • Array where each element is object
    • anychart.data.View
    • anychart.data.Set
  2. edges is one of
    • Array where each element is object
    • anychart.data.View
    • anychart.data.Set

Requires for node data object:
  • Data object must contain required 'id' field.
  • For fixed layout data must contain 'x' and 'y' fields otherwise it will be placed at (0:0) coordinate.
  • Define group field, if you want group nodes, nodes of same group must has equal group id
Requires for edge data object:
  • edge object must contain required 'from' and 'to' fields, this fields is ids of nodes that mean nodes dataset must contain nodes with this ids
  • id field is not required but if you want have access to it you need pass it too
You can pass with data all settings you can setup though methods of this element, fill, stoke and etc.

Returns:

anychart.charts.Graph - Self instance for method chaining.

edges

Graph chart edges settings getter.

Returns:

anychart.core.graph.elements.Edge - Edges settings instance for method chaining.
See listing
var edges = chart.edges();
edges.stroke('1 blue') //set stroke for all edges.
Graph chart edges settings setter.

Params:

NameTypeDescription
valueObjectSettings object.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
var edgesConfig = {stroke: {thickness: 2, color:'pink, dash: '4 1'}};
chart.edges(edgeConfig); //set stroke for all edges.

fit

Returns chart back to initial view. Reset zoom and translation.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
chart.fit(); //Reset all translation and zoom

group

Getter for chart groups by group id.

Params:

NameTypeDescription
idstringId of group.

Returns:

anychart.core.graph.elements.Group | undefined - Group with id set or undefined if group is not found.
See listing
var data = {
     nodes: [{ id: 1, group: 'numbers' }, { id: 2, group: 'numbers' }, { id: 'a', group: 'letters' }], //pass groups for nodes
     edges: [{ from: 1, to: 2 }]
   }
var chart = anychart.graph(data);
var numbers = chart.group('numbers');
var letters = chart.group('letters');
numbers.shape('square') //Set square as shape for all nodes of this group.
letters.stroke('1 yellow');
chart.container('container').draw();
Configures group by id.

Params:

NameTypeDescription
idstringId of group.
valueObjectGroup configuration object.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
var data = {
    nodes: [{ id: 1, group: 'numbers' }, { id: 2, group: 'numbers' }, { id: 'a', group: 'letters' }], //pass groups for nodes
    edges: [{ from: 1, to: 2 }]
  }
var chart = anychart.graph(data);
chart.group('numbers', {fill: 'green', height: 15, shape: 'rectangle', width: 30, height: 15});
chart.group('letters', {fill: 'yellow', height: 10, shape: 'circle', height: 16});
chart.container('container').draw();

interactivity

Getter for graph chart interactivity settings.

Returns:

anychart.core.graph.elements.Interactivity - Graph chart interactivity instance for method chaining.
See listing
var interactivity = chart.interactivity();
interactivity.nodes(false); //forbid node drag.
interactivity.edges(false); //forbid edges interactivity.
Setter for graph chart interactivity.

Params:

NameTypeDescription
valueObjectGraph chart interactivity settings.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
var interactivityConfig = {enabled:false, nodes:false, edges:false};
chart.interactivity(interactivityConfig); //disable all interactivity.

labels

Getter for graph chart labels.

Returns:

anychart.core.ui.LabelsFactory - LabelsSettings instance.
See listing
var labels = chart.labels(); //Change labels settings of all chart elements
labels.fontColor('purple');
labels.fontSize(10);
var nodesLabels = chart.nodes().labels();
nodesLabels.fontColor(12); //override chart fontSize. Nodes labels has purple fontColor from chart and own fontSize setting.
Setter for graph chart labels.

Params:

NameTypeDescription
valueObject | stringconfig object for labels.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
var labelsConfig = {fontFamily: 'Arial', fontSize:14, fontColor: '#000'};
chart.labels(labelsConfig};

layout

Getter for graph chart layout.

Returns:

anychart.core.graph.elements.Layout - Graph chart layout settings.
See listing
var layoutType = chart.layout();
Setter for graph chart layout.

Params:

NameTypeDescription
valueObject | stringIn object case is chart layout settings, in string case is layout type.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
var data = {
    nodes: [{ id: 1, x:0, y:0}, {id: 2, x:0, y:50}, { id: 3, x:50, y:25}],
    edges: [{ from: 1, to: 2 },  { from: 2, to: 3}, { from: 3, to: 1}]
  }
var chart = anychart.graph(data);
chart.layout('fixed'); // chart.layout({type: 'fixed"}) this two function call has same result.
chart.container('container').draw();

move

Getter for current chart translation.

Returns:

Array.<number> - Array with two elements: x and y pixel values of current translation.
See listing
var offset = chart.move();
var offsetX = offset[0];
var offsetY = offset[1];
Sets chart pixel translation by x and y coordinates.

Params:

NameTypeDefaultDescription
dxnumber
0
X-coordinate translation. If is null, returns the chart to its initial position.
dynumber
0
Y-coordinate translation. Default is 0.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
chart.move(100,50);

nodes

Graph chart nodes settings getter.

Returns:

anychart.core.graph.elements.Node - Nodes settings instance for method chaining.
See listing
var nodes = chart.nodes();
nodes.height(25) //Set height for all nodes
Graph chart nodes settings setter.

Params:

NameTypeDescription
valueObjectSettings object.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
var config = {shape: 'star5', height: 25};
chart.nodes(config);

rotation

Getter for graph chart rotation angle.

Returns:

number - Rotation angle, degrees.
See listing
var rotationDegree = chart.rotation()
Setter for graph chart rotation angle.

Params:

NameTypeDefaultDescription
degreenumber
0
Rotation angle.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
chart.rotation(45);
//if you want rotate it on 45 degree more you need pass final angle.
chart.rotation(45); // it do nothing
chart.rotation(90); // it do what you want

zoom

Getter for current zoom factor.

Returns:

number - Current zoom factor.
See listing
var zoomFactor = chart.zoom(); //Get zoom factor.
Setter for current zoom factor.

Params:

NameTypeDefaultDescription
valuenumber
1
Zoom factor.
cxnumber
Scaling point x.
cynumber
Scaling point y.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
chart.zoom(2); //Increase zoom
chart.move(60); //and move chart along x.

zoomIn

Perform zoom in on chart.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
chart.zoomIn();

zoomOut

Perform zoom out on chart.

Returns:

anychart.charts.Graph - Self instance for method chaining.
See listing
chart.zoomOut();