Class: SVGRenderer

// Use directly without a chart object.
let renderer = new Highcharts.Renderer(parentNode, 600, 400);

Members

box :Highcharts.SVGDOMElement

The root svg node of the renderer.

Type:

• Highcharts.SVGDOMElement

boxWrapper :Highcharts.SVGElement

The wrapper for the root svg node of the renderer.

Type:

• Highcharts.SVGElement

defs :Highcharts.SVGElement

A pointer to the defs node of the root SVG.

Type:

• Highcharts.SVGElement

Element :Highcharts.SVGElement

A pointer to the renderer's associated Element class.

Type:

• Highcharts.SVGElement

escapes :Highcharts.Dictionary.<string>

A collection of characters mapped to HTML entities. When useHTML on an element is true, these entities will be rendered correctly by HTML. In the SVG pseudo-HTML, they need to be unescaped back to simple characters, so for example < will render as <.

Type:

• Highcharts.Dictionary.<string>

Example

// Add support for unescaping quotes
Highcharts.SVGRenderer.prototype.escapes['"'] = '"';

forExport :boolean|undefined

Whether the rendered content is intended for export.

Type:

• boolean | undefined

symbols :Highcharts.SymbolDictionary

An extendable collection of functions for defining symbol paths.

Type:

• Highcharts.SymbolDictionary

Methods

arc( [x] [, y] [, r] [, innerR] [, start] [, end])

Draw and return an arc.

Parameters:

Name	Type	Argument	Default	Description
x	number	<optional>	0	Center X position.
y	number	<optional>	0	Center Y position.
r	number	<optional>	0	The outer radius' of the arc.
innerR	number	<optional>	0	Inner radius like used in donut charts.
start	number	<optional>	0	The starting angle of the arc in radians, where 0 is to the right and -Math.PI/2 is up.
end	number	<optional>	0	The ending angle of the arc in radians, where 0 is to the right and -Math.PI/2 is up.

Returns:

Highcharts.SVGElement .

The generated wrapper element.

Try it

• Drawing an arc.

arc(attribs)

Draw and return an arc. Overloaded function that takes arguments object.

Parameters:

Name	Type	Description
attribs	Highcharts.SVGAttributes	Initial SVG attributes.

Returns:

Highcharts.SVGElement .

The generated wrapper element.

button(text, x, y, callback [, theme] [, hoverState] [, selectState] [, disabledState] [, shape] [, useHTML])

Create a button with preset states.

Parameters:

Name	Type	Argument	Default	Description
text	string			The text or HTML to draw.
x	number			The x position of the button's left side.
y	number			The y position of the button's top side.
callback	Highcharts.EventCallbackFunction.<Highcharts.SVGElement>			The function to execute on button click or touch.
theme	Highcharts.SVGAttributes	<optional>		SVG attributes for the normal state.
hoverState	Highcharts.SVGAttributes	<optional>		SVG attributes for the hover state.
selectState	Highcharts.SVGAttributes	<optional>		SVG attributes for the pressed state.
disabledState	Highcharts.SVGAttributes	<optional>		SVG attributes for the disabled state.
shape	Highcharts.SymbolKeyValue	<optional>	rect	The shape type.
useHTML	boolean	<optional>	false	Whether to use HTML to render the label.

Returns:

Highcharts.SVGElement .

The button element.

circle( [x] [, y] [, r])

Draw a circle, wraps the SVG circle element.

Parameters:

Name	Type	Argument	Description
x	number	<optional>	The center x position.
y	number	<optional>	The center y position.
r	number	<optional>	The radius.

Returns:

Highcharts.SVGElement .

The generated wrapper element.

Try it

• Drawing a circle.

circle( [attribs])

Draw a circle, wraps the SVG circle element.

Parameters:

Name	Type	Argument	Description
attribs	Highcharts.SVGAttributes	<optional>	The initial attributes.

Returns:

Highcharts.SVGElement .

The generated wrapper element.

clipRect( [x] [, y] [, width] [, height])

Define a clipping rectangle. The clipping rectangle is later applied to Highcharts.SVGElement objects through the Highcharts.SVGElement#clip function.

This function is deprecated as of v11.2. Instead, use a regular shape (rect, path etc), and the SVGElement.clipTo function.

Parameters:

Name	Type	Argument	Description
x	number	<optional>
y	number	<optional>
width	number	<optional>
height	number	<optional>

Deprecated:

• Yes

Returns:

Highcharts.ClipRectElement .

A clipping rectangle.

Example

let circle = renderer.circle(100, 100, 100)
    .attr({ fill: 'red' })
    .add();
let clipRect = renderer.clipRect(100, 100, 100, 100);

// Leave only the lower right quarter visible
circle.clip(clipRect);

createElement(nodeName)

Create a wrapper for an SVG element. Serves as a factory for Highcharts.SVGElement, but this function is itself mostly called from primitive factories like Highcharts.SVGRenderer#path, Highcharts.SVGRenderer#rect or Highcharts.SVGRenderer#text.

Parameters:

Name	Type	Description
nodeName	string	The node name, for example rect, g etc.

Returns:

Highcharts.SVGElement .

The generated SVGElement.

crispLine(points, width [, roundingFunction])

Make a straight line crisper by not spilling out to neighbour pixels.

Parameters:

Name	Type	Argument	Default	Description
points	Highcharts.SVGPathArray			The original points on the format [['M', 0, 0], ['L', 100, 0]].
width	number			The width of the line.
roundingFunction	string	<optional>	round	The rounding function name on the Math object, can be one of round, floor or ceil.

Returns:

Highcharts.SVGPathArray .

The original points array, but modified to render crisply.

definition(def)

General method for adding a definition to the SVG defs tag. Can be used for gradients, fills, filters etc. Styled mode only. A hook for adding general definitions to the SVG's defs tag. Definitions can be referenced from the CSS by its id. Read more in gradients, shadows and patterns. Styled mode only.

Parameters:

Name	Type	Description
def	Highcharts.ASTNode	A serialized form of an SVG definition, including children.

Returns:

Highcharts.SVGElement .

The inserted node.

destroy()

Destroys the renderer and its allocated members.

Returns:

null .

Pass through value.

draw()

Dummy function for plugins, called every time the renderer is updated. Prior to Highcharts 5, this was used for the canvg renderer.

Deprecated:

• Yes

fontMetrics( [element])

Utility to return the baseline offset and total line height from the font size.

Parameters:

Name	Type	Argument	Description
element	Highcharts.SVGElement | Highcharts.SVGDOMElement | number	<optional>	The element to inspect for a current font size. If a number is given, it's used as a fall back for direct font size in pixels.

Returns:

Highcharts.FontMetricsObject .

The font metrics.

g( [name])

Create and return an svg group element. Child Highcharts.SVGElement objects are added to the group by using the group as the first parameter in add().

Parameters:

Name	Type	Argument	Description
name	string	<optional>	The group will be given a class name of highcharts-{name}. This can be used for styling and scripting.

Returns:

Highcharts.SVGElement .

The generated wrapper element.

getContrast(color)

Returns white for dark colors and black for bright colors, based on W3C's definition of Relative luminance.

Parameters:

Name	Type	Description
color	Highcharts.ColorString	The color to get the contrast for.

Returns:

Highcharts.ColorString .

The contrast color, either #000000 or #FFFFFF.

image(href [, x] [, y] [, width] [, height] [, onload])

Display an image.

Parameters:

Name	Type	Argument	Description
href	string		The image source.
x	number	<optional>	The X position.
y	number	<optional>	The Y position.
width	number	<optional>	The image width. If omitted, it defaults to the image file width.
height	number	<optional>	The image height. If omitted it defaults to the image file height.
onload	function	<optional>	Event handler for image load.

Returns:

Highcharts.SVGElement .

The generated wrapper element.

Try it

• Add an image in a chart.
• Add an image independent of a chart.

init(container, width, height [, style] [, forExport] [, allowHTML] [, styledMode])

Initialize the SVGRenderer. Overridable initializer function that takes the same parameters as the constructor.

Parameters:

Name	Type	Argument	Default	Description
container	Highcharts.HTMLDOMElement			Where to put the SVG in the web page.
width	number			The width of the SVG.
height	number			The height of the SVG.
style	Highcharts.CSSObject	<optional>		The box style, if not in styleMode
forExport	boolean	<optional>	false	Whether the rendered content is intended for export.
allowHTML	boolean	<optional>	true	Whether the renderer is allowed to include HTML text, which will be projected on top of the SVG.
styledMode	boolean	<optional>	false	Whether the renderer belongs to a chart that is in styled mode. If it does, it will avoid setting presentational attributes in some cases, but not when set explicitly through .attr and .css etc.

isHidden()

Detect whether the renderer is hidden. This happens when one of the parent elements has display: none. Used internally to detect when we need to render preliminarily in another div to get the text bounding boxes right.

Returns:

boolean .

True if it is hidden.

label(str, x [, y] [, shape] [, anchorX] [, anchorY] [, useHTML] [, baseline] [, className])

Draw a label, which is an extended text element with support for border and background. Highcharts creates a g element with a text and a path or rect inside, to make it behave somewhat like a HTML div. Border and background are set through stroke, stroke-width and fill attributes using the attr method. To update the text after render, run label.attr({ text: 'New text' }).

Parameters:

Name	Type	Argument	Default	Description
str	string			The initial text string or (subset) HTML to render.
x	number			The x position of the label's left side.
y	number	<optional>		The y position of the label's top side or baseline, depending on the baseline parameter.
shape	string	<optional>	'rect'	The shape of the label's border/background, if any. Defaults to rect. Other possible values are callout or other shapes defined in Highcharts.SVGRenderer#symbols.
anchorX	number	<optional>		In case the shape has a pointer, like a flag, this is the coordinates it should be pinned to.
anchorY	number	<optional>		In case the shape has a pointer, like a flag, this is the coordinates it should be pinned to.
useHTML	boolean	<optional>	false	Whether to use HTML to render the label.
baseline	boolean	<optional>	false	Whether to position the label relative to the text baseline, like renderer.text, or to the upper border of the rectangle.
className	string	<optional>		Class name for the group.

Returns:

Highcharts.SVGElement .

The generated label.

Try it

• A label on the chart.

path( [path])

Draw a path, wraps the SVG path element.

Parameters:

Name	Type	Argument	Description
path	Highcharts.SVGPathArray	<optional>	An SVG path definition in array form.

Returns:

Highcharts.SVGElement .

The generated wrapper element.

Example

let path = renderer.path(['M', 10, 10, 'L', 30, 30, 'z'])
    .attr({ stroke: '#ff00ff' })
    .add();

Try it

• Draw a path in a chart.
• Draw a path independent from a chart.

path( [attribs])

Draw a path, wraps the SVG path element.

Parameters:

Name	Type	Argument	Description
attribs	Highcharts.SVGAttributes	<optional>	The initial attributes.

Returns:

Highcharts.SVGElement .

The generated wrapper element.

rect( [x] [, y] [, width] [, height] [, r] [, strokeWidth])

Draw and return a rectangle.

Parameters:

Name	Type	Argument	Description
x	number	<optional>	Left position.
y	number	<optional>	Top position.
width	number	<optional>	Width of the rectangle.
height	number	<optional>	Height of the rectangle.
r	number	<optional>	Border corner radius.
strokeWidth	number	<optional>	A stroke width can be supplied to allow crisp drawing.

Returns:

Highcharts.SVGElement .

The generated wrapper element.

rect( [attributes])

Draw and return a rectangle.

Parameters:

Name	Type	Argument	Description
attributes	Highcharts.SVGAttributes	<optional>	General SVG attributes for the rectangle.

Returns:

Highcharts.SVGElement .

The generated wrapper element.

Try it

• Draw a rectangle in a chart.
• Draw a rectangle independent from a chart.

roundedRect(attribs)

Draw and return a rectangle with advanced corner rounding options.

Parameters:

Name	Type	Description
attribs	Highcharts.SVGAttributes	Attributes

Returns:

Highcharts.SVGElement .

The generated wrapper element.

setSize(width, height [, animate])

Resize the Highcharts.SVGRenderer#box and re-align all aligned child elements.

Parameters:

Name	Type	Argument	Default	Description
width	number			The new pixel width.
height	number			The new pixel height.
animate	boolean | Partial.<Highcharts.AnimationOptionsObject>	<optional>	true	Whether and how to animate.

Try it

• Show and hide grouped objects.

setStyle(style)

Apply the global style on the renderer, mixed with the default styles.

Parameters:

Name	Type	Description
style	Highcharts.CSSObject	CSS to apply.

symbol(symbol [, x] [, y] [, width] [, height] [, options])

Draw a symbol out of pre-defined shape paths from Highcharts.SVGRenderer#symbols. It is used in Highcharts for point makers, which cake a symbol option, and label and button backgrounds like in the tooltip and stock flags.

Parameters:

Name	Type	Argument	Description
symbol	string		The symbol name.
x	number	<optional>	The X coordinate for the top left position.
y	number	<optional>	The Y coordinate for the top left position.
width	number	<optional>	The pixel width.
height	number	<optional>	The pixel height.
options	Highcharts.SymbolOptionsObject	<optional>	Additional options, depending on the actual symbol drawn.

Returns:

Highcharts.SVGElement .

SVG symbol.

text( [str] [, x] [, y] [, useHTML])

Draw text. The text can contain a subset of HTML, like spans and anchors and some basic text styling of these. For more advanced features like border and background, use Highcharts.SVGRenderer#label instead. To update the text after render, run text.attr({ text: 'New text' }).

Parameters:

Name	Type	Argument	Default	Description
str	string	<optional>		The text of (subset) HTML to draw.
x	number	<optional>		The x position of the text's lower left corner.
y	number	<optional>		The y position of the text's lower left corner.
useHTML	boolean	<optional>	false	Use HTML to render the text.

Returns:

Highcharts.SVGElement .

The text object.

Try it

• Annotate the chart freely.
• Annotate with a border and in response to the data.
• Formatted text.