new SVGRenderer(container, width, height [, style] [, forExport] [, allowHTML] [, styledMode])
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. |
||
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 |
Example
// Use directly without a chart object. var renderer = new Highcharts.Renderer(parentNode, 600, 400);
Try it
Members
-
box :Highcharts.SVGDOMElement
-
The root
svgnode of the renderer.Type:
-
boxWrapper :Highcharts.SVGElement
-
The wrapper for the root
svgnode of the renderer.Type:
-
defs :Highcharts.SVGElement
-
A pointer to the
defsnode 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
useHTMLon 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['"'] = '"';
-
symbols :Highcharts.SymbolDictionary
-
An extendable collection of functions for defining symbol paths.
Type:
Methods
-
arc( [x] [, y] [, r] [, innerR] [, start] [, end])
-
Draw and return an arc.
Parameters:
Name Type Argument Default Description xnumber <optional>
0 Center X position.
ynumber <optional>
0 Center Y position.
rnumber <optional>
0 The outer radius' of the arc.
innerRnumber <optional>
0 Inner radius like used in donut charts.
startnumber <optional>
0 The starting angle of the arc in radians, where 0 is to the right and
-Math.PI/2is up.endnumber <optional>
0 The ending angle of the arc in radians, where 0 is to the right and
-Math.PI/2is up.Returns:
Highcharts.SVGElement .The generated wrapper element.
Try it
-
arc(attribs)
-
Draw and return an arc. Overloaded function that takes arguments object.
Parameters:
Name Type Description attribsHighcharts.SVGAttributes Initial SVG attributes.
Returns:
Highcharts.SVGElement .The generated wrapper element.
-
button(text, x, y, callback [, theme] [, hoverState] [, pressedState] [, disabledState] [, shape] [, useHTML])
-
Create a button with preset states.
Parameters:
Name Type Argument Default Description textstring The text or HTML to draw.
xnumber The x position of the button's left side.
ynumber The y position of the button's top side.
callbackHighcharts.EventCallbackFunction.<Highcharts.SVGElement> The function to execute on button click or touch.
themeHighcharts.SVGAttributes <optional>
SVG attributes for the normal state.
hoverStateHighcharts.SVGAttributes <optional>
SVG attributes for the hover state.
pressedStateHighcharts.SVGAttributes <optional>
SVG attributes for the pressed state.
disabledStateHighcharts.SVGAttributes <optional>
SVG attributes for the disabled state.
shapeHighcharts.SymbolKeyValue <optional>
rect The shape type.
useHTMLboolean <optional>
false Wether to use HTML to render the label.
Returns:
Highcharts.SVGElement .The button element.
-
circle( [x] [, y] [, r])
-
Draw a circle, wraps the SVG
circleelement.Parameters:
Name Type Argument Description xnumber <optional>
The center x position.
ynumber <optional>
The center y position.
rnumber <optional>
The radius.
Returns:
Highcharts.SVGElement .The generated wrapper element.
Try it
-
circle( [attribs])
-
Draw a circle, wraps the SVG
circleelement.Parameters:
Name Type Argument Description attribsHighcharts.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.
Parameters:
Name Type Argument Description xnumber <optional>
ynumber <optional>
widthnumber <optional>
heightnumber <optional>
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 nodeNamestring The node name, for example
rect,getc.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 Description pointsHighcharts.SVGPathArray The original points on the format
[['M', 0, 0], ['L', 100, 0]].widthnumber The width of the line.
roundingFunctionstring The rounding function name on the
Mathobject, can be one ofround,floororceil.Returns:
Highcharts.SVGPathArray .The original points array, but modified to render crisply.
-
definition(def)
-
General method for adding a definition to the SVG
defstag. 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 itsid. Read more in gradients, shadows and patterns. Styled mode only.Parameters:
Name Type Description defHighcharts.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:
-
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 fontSizenumber | string <optional>
The current font size to inspect. If not given, the font size will be found from the DOM element.
elemHighcharts.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 namestring <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 rgbaHighcharts.ColorString The color to get the contrast for.
Returns:
Highcharts.ColorString .The contrast color, either
#000000or#FFFFFF. -
image(src [, x] [, y] [, width] [, height] [, onload])
-
Display an image.
Parameters:
Name Type Argument Description srcstring The image source.
xnumber <optional>
The X position.
ynumber <optional>
The Y position.
widthnumber <optional>
The image width. If omitted, it defaults to the image file width.
heightnumber <optional>
The image height. If omitted it defaults to the image file height.
onloadfunction <optional>
Event handler for image load.
Returns:
Highcharts.SVGElement .The generated wrapper element.
Try it
-
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 containerHighcharts.HTMLDOMElement Where to put the SVG in the web page.
widthnumber The width of the SVG.
heightnumber The height of the SVG.
styleHighcharts.CSSObject <optional>
The box style, if not in styleMode
forExportboolean <optional>
false Whether the rendered content is intended for export.
allowHTMLboolean <optional>
true Whether the renderer is allowed to include HTML text, which will be projected on top of the SVG.
styledModeboolean <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
.attrand.cssetc. -
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] [, anchorX] [, anchorY] [, useHTML] [, baseline] [, className])
-
Draw a label, which is an extended text element with support for border and background. Highcharts creates a
gelement with a text and apathorrectinside, to make it behave somewhat like a HTML div. Border and background are set throughstroke,stroke-widthandfillattributes using the attr method. To update the text after render, runlabel.attr({ text: 'New text' }).Parameters:
Name Type Argument Default Description strstring The initial text string or (subset) HTML to render.
xnumber The x position of the label's left side.
ynumber <optional>
The y position of the label's top side or baseline, depending on the
baselineparameter.shapestring <optional>
'rect' The shape of the label's border/background, if any. Defaults to
rect. Other possible values arecalloutor other shapes defined in Highcharts.SVGRenderer#symbols.anchorXnumber <optional>
In case the
shapehas a pointer, like a flag, this is the coordinates it should be pinned to.anchorYnumber <optional>
In case the
shapehas a pointer, like a flag, this is the coordinates it should be pinned to.useHTMLboolean <optional>
false Wether to use HTML to render the label.
baselineboolean <optional>
false Whether to position the label relative to the text baseline, like renderer.text, or to the upper border of the rectangle.
classNamestring <optional>
Class name for the group.
Returns:
Highcharts.SVGElement .The generated label.
Try it
-
path( [path])
-
Draw a path, wraps the SVG
pathelement.Parameters:
Name Type Argument Description pathHighcharts.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
pathelement.Parameters:
Name Type Argument Description attribsHighcharts.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 xnumber <optional>
Left position.
ynumber <optional>
Top position.
widthnumber <optional>
Width of the rectangle.
heightnumber <optional>
Height of the rectangle.
rnumber <optional>
Border corner radius.
strokeWidthnumber <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 attributesHighcharts.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 widthnumber The new pixel width.
heightnumber The new pixel height.
animateboolean | Partial.<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 styleHighcharts.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
symboloption, and label and button backgrounds like in the tooltip and stock flags.Parameters:
Name Type Argument Description symbolstring The symbol name.
xnumber <optional>
The X coordinate for the top left position.
ynumber <optional>
The Y coordinate for the top left position.
widthnumber <optional>
The pixel width.
heightnumber <optional>
The pixel height.
optionsHighcharts.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 strstring <optional>
The text of (subset) HTML to draw.
xnumber <optional>
The x position of the text's lower left corner.
ynumber <optional>
The y position of the text's lower left corner.
useHTMLboolean <optional>
false Use HTML to render the text.
Returns:
Highcharts.SVGElement .The text object.
Try it