Extend highcharts renderer symbols to have plus sign

Question

How can I extend highcharts renderer symbols library to include a \"Plus\" sign.

Answer 1

The accepted answer only gives a single line per cross. I wanted a fully filled in plus sign. Here is the code to instead do that:

Highcharts.SVGRenderer.prototype.symbols.plus = function (x, y, w, h) {
    return [
        'M', x, y + (5 * h) / 8,
        'L', x, y + (3 * h) / 8,
        'L', x + (3 * w) / 8, y + (3 * h) / 8,
        'L', x + (3 * w) / 8, y,
        'L', x + (5 * w) / 8, y,
        'L', x + (5 * w) / 8, y + (3 * h) / 8,
        'L', x + w, y + (3 * h) / 8,
        'L', x + w, y + (5 * h) / 8,
        'L', x + (5 * w) / 8, y + (5 * h) / 8,
        'L', x + (5 * w) / 8, y + h,
        'L', x + (3 * w) / 8, y + h,
        'L', x + (3 * w) / 8, y + (5 * h) / 8,
        'L', x, y + (5 * h) / 8,
        'z'
    ];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.plus = Highcharts.SVGRenderer.prototype.symbols.plus;
}

This will produce a plus at 25% width for each bar.

Answer 2

API Reference of plotOptions.series.marker.symbol

symbol: String

A predefined shape or symbol for the marker. When null, the symbol is pulled from options.symbols. Other possible values are "circle", "square", "diamond", "triangle" and "triangle-down".

Additionally, the URL to a graphic can be given on this form: "url(graphic.png)". Note that for the image to be applied to exported charts, its URL needs to be accessible by the export server.

Custom callbacks for symbol path generation can also be added to Highcharts.SVGRenderer.prototype.symbols. The callback is then used by its method name, as shown in the demo.

Like in the last paragraph above, we would define the symbol path for creating a plus. Here is what the documentaion says about Renderer.path

Add a path based on SVG's path commands. In SVG capable browsers all path commands are supported, but in VML only a subset is supported: absolute moveTo (M), absolute lineTo (L), absolute curveTo (C) and close (Z).

And this is how the co-ordinate system would look like, the actual point at the centre of a w x h box with its top-left corner placed at (x,y) & y increasing as we move downwards and x increasing as we move towards the right.

Here is how you would do a plus

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.plus = function (x, y, w, h) {
    return ['M', x, y + h / 2, 'L', x + w, y + h / 2, 'M', x + w / 2, y, 'L', x + w / 2, y + h, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.plus = Highcharts.SVGRenderer.prototype.symbols.plus;
}

To explain the array in words

1. 'M', x, y + h / 2: We move our pen to pt. A (x,y+h/2)
2. 'L', x + w, y + h / 2: We draw a line from the current position to pt. B (x+w,y+h/2). This draws the horizontal line of the plus from A <-> B
3. 'M', x + w / 2, y: We now move the pen to pt. C (x+w/2,y), notice that moving the pen does not create any graphic or line
4. 'L', x + w / 2, y + h: We now draw a line from current position to pt. D(x+w/2,y+h). This draws the vertical line of the plus C <-> D
5. 'z': We close the renderer/pen

Custom Marker Symbol @jsFiddle