CODEWITHSUNDEEP
svghighchartsfillmarkers
vegaelce
vegaelce

Reputation: 145

Highcharts fill serie's color on svg marker

I made a drilldown bubble chart with a custom marker (instead of circles). I used markers provided with highcharts and it's working well (see my example here : https://jsfiddle.net/vegaelce/t0oha7q6/ with square markers). Now I'd like to use a svg image instead of square marker. It's working when I specifiy (see line 41 of the jsfiddle) :

marker: {
            symbol: 'url(https://www.svgrepo.com/show/197729/dollar.svg)',
            lineWidth: 3,
        },

But my problem is that all markers are dark. I need the color of the serie values to be set on each marker (as for square or circle shape). I tried with svg without fill property but the color is never changed by Highcharts. Is that possible ?

A second question is about the bubble legend : IS it possible to get the same shape for the bubbles size legend instead of circles ?

Upvotes: 0

Views: 1207

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

Notice that defining a symbol as an SVG element parses the SVG element into image (check in the console).

You can find information about it in the API:

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.

API: https://api.highcharts.com/highcharts/series.line.marker.symbol

And if you want to add a custom symbol you should do it via using the SVGRenderer tool, just like in the attached demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-marker-symbol/

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

Upvotes: 0

Related Questions