Ring

extends Path

The Ring class represents a ring mark that is used in a Doughnut Chart and a Sunburst Chart. To create a Ring object, use the mark method in the Scene class, for example:

    let ring = scene.mark("ring", {x: 50, y: 100, innerRadius: 20, outerRadius: 40});

Properties

propertyexplanationtypedefault value
innerRadius the inner radius of the ringNumber100
outerRadius the outer radius of the ringNumber200
thickness the difference between the outer radius and inner radiusNumber100
x the x coordinate of the center of the ringNumber0
y the y coordinate of the center of the ringNumber0

Properties inherited from Path

propertyexplanationtypedefault value
firstSegment returns the first segment of the pathSegment
firstVertex returns the first vertex of the pathVertex
segments the segments on the pathArray of Segment
vertices the vertices along the pathArray of Vertex
vxFillColorthe fill color of the vertices on this pathColor“#555555”
vxHeightthe height of the vertices on this pathNumber0
vxOpacitythe opacity of the vertices on this pathNumber1
vxRadiusthe radius of the vertices on this path if the shape is “circle”Number0
vxShapethe shape of the vertices on this path
possible values: “rect”, “circle”
Stringundefined
vxStrokeColorthe stroke color of the vertices on this pathColor“#aaaaaa”
vxStrokeWidththe stroke width of the vertices on this path in pixelsNumber0
vxWidththe width of the vertices on this pathNumber0

Properties inherited from Mark

propertyexplanationtypedefault value
bounds the bounding rectangle of the markRectangle
dataScopethe data scope of the markDataScopeundefined
fillColorthe fill color of the markColor“none”
id the unique id of the markString
opacitythe opacity value of the mark (between 0 and 1)Number1
strokeColorthe stroke color of the markColor“#ccc”
strokeDashthe dashes and gaps for the mark strokeString“none”
strokeWidththe stroke width of the mark in pixelsNumber1
type the type of the markString“ring”
visibilitywhether the mark is visible (“visible” or “hidden”)String“visible”

Methods

methodexplanationreturn type
getSVGPathData()returns a string to be used as the d parameter in an SVG path elementString