# Class: SVGRenderer

## Highcharts. SVGRenderer

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

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

  See How to use the SVG Renderer for a comprehensive tutorial.

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

  ##### Example

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

  ##### Try it

  - Annotating a chart programmatically.
  - Independent SVG drawing.

### Members

#### Element :Highcharts.SVGElement

  A pointer to the renderer's associated Element class.

  ##### Type:

  - Highcharts.SVGElement

#### 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

#### 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;';

#### 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. Each symbol function takes five parameters: `x`, `y`, `width`, `height` and `options`, and returns an `SVGPath` array.

  ##### Type:

  - Highcharts.SymbolDictionary

  ##### Try it

  - Renderer symbols overview.
  - Custom marker symbol.

### 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. Styles for the button can either be set as arguments, or a general theme for all buttons can be set by the `global.buttonTheme` option.

  ##### 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:
    - 11.2.0

  ##### 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)

  Make a straight line crisper by not spilling out to neighbor 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.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:
    - 5.0.0

#### fontMetrics(ref)

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

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `ref` | Highcharts.SVGElement | Highcharts.SVGDOMElement | number | 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( [path])

  Draw a path, wraps the SVG `path` element.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `path` | Highcharts.SVGAttributes | Highcharts.SVGPathArray | <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.