AnyChart
API Reference
Still have questions?
Contact support
    Top

    class anychart.core.graph.elements.Node Improve this Doc

    Graph chart node class.

    Methods Overview

    Specific settings
    shape()Elements shape.
    Appearance
    fill()Node fill.
    stroke()Node stroke.
    Point Elements
    labels()Labels settings.
    Size
    height()Getter for node height.
    width()Node width setter.
    State settings
    hovered()Hovered state settings.
    normal()Normal state settings.
    selected()Selected state settings.
    Miscellaneous
    tooltip()Tooltip getter

    Methods Description

    fill

    fill()

    Getter for node fill.

    Returns:

    anychart.graphics.vector.Fill - Fill.
    See listing
    var fill = chart.nodes().fill(); // By default fill is function.

    Try it:

    fill(color)

    Setter for node fill.

    Params:

    NameTypeDescription
    coloranychart.graphics.vector.Fill | stringFill object or string color

    Returns:

    anychart.core.graph.elements.Node - Self instance for method chaining.

    Try it:

    fill(Function)

    Setter for node fill.

    Params:

    NameTypeDescription
    Functionfunctionfunction for color resolve.

    Returns:

    anychart.core.graph.elements.Node - Self instance for method chaining.

    Try it:

    fill(imageSettings)

    Setter for node fill.

    Params:

    NameTypeDescription
    imageSettingsanychart.graphics.vector.Fillimage settings object.

    Returns:

    anychart.core.graph.elements.Node - Self instance for method chaining.

    Try it:

    height

    height()

    Getter for node height.

    Returns:

    number - height of the node.
    See listing
    var height = chart.nodes().height();

    Try it:

    height(value)

    Setter for node height

    Params:

    NameTypeDefaultDescription
    valuenumber
    12
    		 Node height.
    See listing
    chart.nodes().height(25);

    Try it:

    hovered

    hovered()

    Getter for hovered state settings.

    Returns:

    anychart.core.StateSettings - Hovered state settings
    See listing
    var hoveredState = chart.nodes().hovered();
hoveredState.fill('orange') //Set fill for nodes that has hovered state.

    Try it:

    hovered(settings)

    Setter for hovered state settings.

    Params:

    NameTypeDescription
    settingsObjectState settings to set.

    Returns:

    anychart.core.graph.elements.Node - Self instance for method chaining.

    Try it:

    labels

    labels()

    Getter for elements labels.

    Returns:

    anychart.core.ui.LabelsFactory - LabelsSettings instance.
    See listing
    var nodesLabels = chart.nodes().labels();
nodesLabels.fontColor('#ccc');
nodesLabels.fontSize(13);

    Try it:

    labels(config)

    Params:

    NameTypeDescription
    configobjectSettings object for labels
    See listing
    var labelsConfig = {fontFamily: 'Arial', fontSize:14, fontColor: '#000'};
chart.nodes().labels(labelsConfig};

    Try it:

    normal

    normal()

    Getter for normal state settings.

    Returns:

    anychart.core.StateSettings - Normal state settings.
    See listing
    var normalState = chart.nodes().normal();
normalState.shape('star5') //Set shape type for nodes that has normal state.

    Try it:

    normal(settings)

    Setter for normal state settings.

    Params:

    NameTypeDescription
    settingsObjectState settings to set.

    Returns:

    anychart.core.graph.elements.Node - Self instance for method chaining.
    See listing
    var config = {fill: #A2B5B3, shape: 'square'};
chart.nodes().normal(config};

    Try it:

    selected

    selected()

    Getter for selected state settings.

    Returns:

    anychart.core.StateSettings - Selected state settings
    See listing
    var selectedState = chart.nodes().selected();
selectedState.stroke('3 blue') //Set stroke for nodes that has selected state.

    Try it:

    selected(settings)

    Setter for selected state settings. var config = {fill: #A2B5B3, shape: 'square'}; chart.nodes().selected(config};

    Params:

    NameTypeDescription
    settingsObjectState settings to set.

    Returns:

    anychart.core.graph.elements.Node - Self instance for method chaining.

    Try it:

    shape

    shape()

    Getter for node shape.

    Returns:

    string - The elements shape.
    See listing
    var shape = chart.nodes().shape();

    Try it:

    shape(value)

    Setter for node shape.

    Params:

    NameTypeDefaultDescription
    valueanychart.enums.MarkerType | 'rectangle'
    'circle'
    		 Value to set.

    Returns:

    anychart.core.graph.elements.Node - Self instance for method chaining.
    See listing
    var chart = anychart.graph(data);
var imageSettings = {
  src: 'https://static.anychart.com/images/logo_anychart.png'
};
chart.nodes()
  .width(30)
  .height(30)
  .shape('rectangle');
chart.nodes().stroke('none');
chart.nodes().fill(imageSettings);
chart.container('container').draw();

    Try it:

    stroke

    stroke()

    Getter for node stroke.

    Returns:

    anychart.graphics.vector.Fill - stroke.
    See listing
    var stroke = chart.nodes().stroke(); // By default fill is function.

    stroke(stringOrObject)

    Setter for node stroke.

    Params:

    NameTypeDescription
    stringOrObjectanychart.graphics.vector.Fill | stringStroke object or string color

    Returns:

    anychart.core.graph.elements.Node - Self instance for method chaining.

    Try it:

    stroke(function)

    Setter for node stroke.

    Params:

    NameTypeDescription
    functionfunctionFunction for color resolve.

    Returns:

    anychart.core.graph.elements.Node - Self instance for method chaining.

    stroke(color, thickness, dashpattern, lineJoin, lineCap)

    Setter for the graph elements slices stroke. Learn more about stroke settings.

    Params:

    NameTypeDefaultDescription
    coloranychart.graphics.vector.Stroke | anychart.graphics.vector.ColoredFill | string | null
    'none'
    		 Stroke settings.
    thicknessnumber
    		Line thickness.
    dashpatternstring
    		Controls the pattern of dashes and gaps used to stroke paths.
    lineJoinstring | anychart.graphics.vector.StrokeLineJoin
    		Line join style.
    lineCapstring | anychart.graphics.vector.StrokeLineCap
    		Line cap style.
    Returns:
    anychart.core.graph.elements.Node - Self instance for method chaining.
    Try it:
    tooltip
    tooltip()
    Tooltip getter
    Returns:
    anychart.core.ui.Tooltip - Tooltip instance.
     See listing
    var nodesTooltip = chart.nodes().nodesTooltip();
nodesTooltip.format('tooltip for node') //Setup tooltip for nodes.
    Try it:
    tooltip(tooltipConfig)
    Tooltip setter
    Params:
    NameTypeDescription
    tooltipConfigobject | boolean | nullConfig with settings for tooltip.
    Returns:
    anychart.core.graph.elements.Node - Self instance for method chaining.
     See listing
    var config = {enabled: true, format: 'Node', background: {fill: '#EF9A9A', stroke: '#1B5E20'}};
chart.nodes().tooltip(config); //setup tooltip via config
    Try it:
    width
    width()
    Getter for node width
    Returns:
    number - 
     See listing
    var width = chart.nodes().width();
    Try it:
    width(value)
    Setter for node width
    Params:
    NameTypeDefaultDescription
    valuenumber
    12
    		 Width of the node.
    Try it:
    AnyChart - JavaSript charts is a trusted solution for data visualization