Class: SVGRenderer

Highcharts. SVGRenderer

new SVGRenderer(container, width, height [, forExport] [, allowHTML])

Allows direct access to the Highcharts rendering layer in order to draw primitive shapes like circles, rectangles, paths or text directly on a chart, or independent from any chart. The SVGRenderer represents a wrapper object for SVG in modern browsers. Through the VMLRenderer, part of the oldie.js module, it also brings vector graphics to IE <= 8.

An existing chart's renderer can be accessed through Highcharts.Chart.renderer. The renderer can also be used completely decoupled from a chart.

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.

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.

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

Members

box :Highcharts.SVGDOMElement

The root svg node of the renderer.

Type:

boxWrapper :Highcharts.SVGElement

The wrapper for the root svg node of the renderer.

Type:

defs :Highcharts.SVGElement

A pointer to the defs node of the root SVG.

Type:

Element :Highcharts.SVGElement

A pointer to the renderer's associated Element class. The VMLRenderer will have a pointer to VMLElement here.

Type:

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 &lt; will render as <.

Type:
  • Highcharts.Dictionary.<string>
Example
// Add support for unescaping quotes
Highcharts.SVGRenderer.prototype.escapes['"'] = '&quot;';

symbols :Highcharts.SymbolDictionary

An extendable collection of functions for defining symbol paths.

Type:

Methods

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.

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

button(text, x, y, callback [, normalState] [, hoverState] [, pressedState] [, disabledState] [, shape])

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 function

The function to execute on button click or touch.

normalState Highcharts.SVGAttributes <optional>

SVG attributes for the normal state.

hoverState Highcharts.SVGAttributes <optional>

SVG attributes for the hover state.

pressedState Highcharts.SVGAttributes <optional>

SVG attributes for the pressed state.

disabledState Highcharts.SVGAttributes <optional>

SVG attributes for the disabled state.

shape Highcharts.SymbolKey <optional>
rect

The shape type.

Returns:
Highcharts.SVGElement .

The button element.

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.

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

clipRect(id, x, y, width, height)

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

Parameters:
Name Type Description
id string
x number
y number
width number
height number
Returns:
Highcharts.ClipRectElement .

A clipping rectangle.

Example
var circle = renderer.circle(100, 100, 100)
    .attr({ fill: 'red' })
    .add();
var 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)

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

Parameters:
Name Type Description
points Highcharts.SVGPathArray

The original points on the format ['M', 0, 0, 'L', 100, 0].

width number

The width of the line.

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.SVGDefinitionObject

A serialized form of an SVG definition, including children.

Returns:
Highcharts.SVGElement .

The inserted node.

destroy()

Destroys the renderer and its allocated members.

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( [fontSize] [, elem])

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

Parameters:
Name Type Argument Description
fontSize string <optional>

The current font size to inspect. If not given, the font size will be found from the DOM element.

elem Highcharts.SVGElement | Highcharts.SVGDOMElement <optional>

The element to inspect for a current font size.

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

Returns white for dark colors and black for bright colors.

Parameters:
Name Type Description
rgba Highcharts.ColorString

The color to get the contrast for.

Returns:
string .

The contrast color, either #000000 or #FFFFFF.

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

Display an image.

Parameters:
Name Type Argument Description
src 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

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

Initialize the SVGRenderer. Overridable initiator 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.

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.

Returns:

isHidden()

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

Returns:
boolean .

True if it is hidden.

label(str, x, y [, shape] [, 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

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.

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

Wether 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

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
var path = renderer.path(['M', 10, 10, 'L', 30, 30, 'z'])
    .attr({ stroke: '#ff00ff' })
    .add();
Try it

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

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 | Highcharts.AnimationOptionsObject <optional>
true

Whether and how to animate.

Try it

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 symbol

The symbol name.

x number

The X coordinate for the top left position.

y number

The Y coordinate for the top left position.

width number

The pixel width.

height number

The pixel height.

options Highcharts.SymbolOptionsObject <optional>

Additional options, depending on the actual symbol drawn.

Returns:

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

The text of (subset) HTML to draw.

x number

The x position of the text's lower left corner.

y number

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