CODEWITHSUNDEEP
javascriptcsssvghighcharts
WoJ
WoJ

Reputation: 29957

How to use existing SVG symbols (in a file) as markers in highcharts?

I would like to use Weather Icons as markers in my chart but they are best(1) used as CSS:

<i class="wi wi-night-sleet"></i>

I saw in the custom markers demo that it is possible to use several approaches to customized markers - but nothing around HTML/CSS.

The docs for plotOptions.series.marker.symbol (also referenced in the demo above) mention that it is possible to use SVG for markers. Weather icons also include an SVG version. Would there be a way to use them? (I have no idea how to even start).

(1) by "best" I mean "easiest to programatically deal with" (as opposed to TTF/OTF)

Upvotes: 2

Views: 2404

Answers (2)

WoJ
WoJ

Reputation: 29957

As using the SVG data is far from obvious (@Quantastical answer shows the path) I ended up directly formatting the labels and getting rid of the markers:

plotOptions: {
            series: {
                animation: false,
                marker: {
                    enabled: false
                },
                dataLabels: {
                    enabled: true,
                    verticalAlign: 'middle',
                    useHTML: true,
                    formatter: function () {
                        return  formatLabel(this);
                    }
                }
            }
        }

formatLabel returns the raw HTML to be displayed. It can then be tailored with CSS.

Upvotes: 1

jeffjenx
jeffjenx

Reputation: 17457

I'm fairly certain that Highcharts doesn't support SVG in the same way as a PNG (i.e. just supplying a URL).

The Highcharts Renderer object supports an array of SVG paths using VML (Vector Markup Language), see http://api.highcharts.com/highcharts#Renderer.path.

I think to accomplish your goal, you would need to open the Weather Icons SVG file (manually or via JavaScript) and copy the paths of each icon into an array that can be returned from a function call.

This other answer on SO provides a guide to creating a custom plus icon for Highcharts which explains further what I've described above.

If you view the raw content of the SVG file, you'll notice a bunch of nodes like this:

<glyph unicode="&#xf014;" horiz-adv-x="2641" d="M0 86q0 39 27 65t67 26h1991q40 0 65.5 -25.5t25.5 -65.5q0 -37 -26.5 -62t-64.5 -25h-1991q-40 0 -67 25t-27 62zM279 421q0 39 28 64q24 24 63 24h1992q37 0 62 -25.5t25 -62.5q0 -38 -25 -64.5t-62 -26.5h-1992q-38 0 -64.5 27t-26.5 64zM293 675q0 -14 16 -14h153 q10 0 21 17q38 83 113.5 136t165.5 60l59 8q18 0 18 19l7 53q17 173 146.5 288.5t303.5 115.5q173 0 301.5 -114t146.5 -286l8 -61q0 -18 21 -18h170q103 0 187.5 -55t125.5 -146q11 -17 22 -17h153q19 0 15 24q-47 164 -186 268t-317 104h-34q-53 213 -223.5 348.5 t-389.5 135.5q-224 0 -398 -140.5t-223 -358.5q-136 -32 -238.5 -129t-142.5 -232v4q-1 -3 -1 -10zM465 -241q0 38 28 63q24 24 64 24h1993q38 0 64.5 -25t26.5 -62q0 -38 -27 -65t-64 -27h-1993q-37 0 -64.5 27.5t-27.5 64.5z" />

The unicode attribute describes which icon is being drawn and the d attribute is a long string of paths that must be split into an array.

I'll leave the loading and parsing of the SVG file in JavaScript to you. I'd guess that it is fairly easy to do with a library like jQuery or something SVG-specific.

Upvotes: 3

Related Questions