AnyChart
API Reference
Still have questions?
Contact support
    Top

    class anychart.charts.Graph Improve this Doc

    Extends: anychart.core.Chart

    Graph chart class. Learn more about Graph chart

    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.
    select()Select settings.
    unselect()Unselect all selected nodes.
    zoom()Getter for current zoom factor.
    zoomIn()Perform zoom in on chart.
    zoomOut()Perform zoom out on chart.

    Methods Description

    data

    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

    Try it:

    data(data)

    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.

    Try it:

    edges

    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.

    Try it:

    edges(value)

    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.

    Try it:

    fit

    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

    Try it:

    group

    group(id)

    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();

    Try it:

    group(id, value)

    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();

    Try it:

    interactivity

    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.

    Try it:

    interactivity(value)

    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.

    Try it:

    labels

    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.

    Try it:

    labels(value)

    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};

    Try it:

    layout

    layout()

    Getter for graph chart layout.

    Returns:

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

    Try it:

    layout(value)

    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();

    Try it:

    move

    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];

    Try it:

    move(dx, dy)

    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);

    Try it:

    nodes

    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

    Try it:

    nodes(value)

    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);

    Try it:

    rotation

    rotation()

    Getter for graph chart rotation angle.

    Returns:

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

    Try it:

    rotation(degree)

    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

    Try it:

    select

    select()Since version 8.9.0

    Selects all nodes.

    Returns:

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

    select(node_id)Since version 8.9.0

    Selects a node by ID.

    Params:

    NameTypeDescription
    node_idstringId of node to select.

    Returns:

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

    select(nodes_ids)Since version 8.9.0

    Selects nodes by IDs.

    Params:

    NameTypeDescription
    nodes_idsArray.<string>The array of node ids to select.

    Returns:

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

    Try it:

    unselect

    unselect()Since version 8.9.0

    Unselect all selected nodes.

    Returns:

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

    Try it:

    unselect(id)Since version 8.9.0

    Deselects selected node by id.

    Params:

    NameTypeDescription
    idstringId of the node to select.

    Returns:

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

    unselect(ids)Since version 8.9.0

    Deselects selected nodes by ids.

    Params:

    NameTypeDescription
    idsArray.<string>The array of nodes ids to select.

    Returns:

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

    zoom

    zoom()

    Getter for current zoom factor.

    Returns:

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

    Try it:

    zoom(value, cx, cy)

    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.
    Try it:
    zoomIn
    zoomIn()
    Perform zoom in on chart.
    Returns:
    anychart.charts.Graph - Self instance for method chaining.
     See listing
    chart.zoomIn();
    Try it:
    zoomOut
    zoomOut()
    Perform zoom out on chart.
    Returns:
    anychart.charts.Graph - Self instance for method chaining.
     See listing
    chart.zoomOut();
    Try it:
    AnyChart - The most comprehensive JavaScript charting library