Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100" height="100" viewBox="-10 -10 111 111" enable-background="new 0 0 100 100" xml:space="preserve">
  <g>
    <path d="M31.8,14.8c-2.1-0.6-4.3,0.7-4.9,2.8l-6.7,25.1c-0.6,2.1,0.7,4.3,2.8,4.9c0.3,0.1,0.7,0.1,1,0.1c1.8,0,3.4-1.2,3.9-3   l6.7-25.1C35.2,17.6,34,15.4,31.8,14.8z" />
    <path d="M20.7,52.3c-1.2,0-2.3,0.5-3.2,1.3c-0.8,0.8-1.3,2-1.3,3.2c0,1.2,0.5,2.3,1.3,3.2c0.8,0.8,2,1.3,3.2,1.3   c1.2,0,2.4-0.5,3.2-1.3c0.8-0.8,1.3-2,1.3-3.2c0-1.2-0.5-2.3-1.3-3.2C23,52.8,21.9,52.3,20.7,52.3z" />
    <path d="M36.7,67.3c-1.2,0-2.4,0.5-3.2,1.3c-0.8,0.8-1.3,2-1.3,3.2c0,1.2,0.5,2.3,1.3,3.2c0.8,0.8,2,1.3,3.2,1.3   c1.2,0,2.3-0.5,3.2-1.3c0.8-0.8,1.3-2,1.3-3.2c0-1.2-0.5-2.4-1.3-3.2C39.1,67.8,37.9,67.3,36.7,67.3z" />
    <path d="M60.7,52.3c-1.2,0-2.3,0.5-3.2,1.3c-0.8,0.8-1.3,2-1.3,3.2c0,1.2,0.5,2.3,1.3,3.2c0.8,0.8,2,1.3,3.2,1.3   c1.2,0,2.4-0.5,3.2-1.3c0.8-0.8,1.3-2,1.3-3.2c0-1.2-0.5-2.4-1.3-3.2C63,52.8,61.9,52.3,60.7,52.3z" />
    <path d="M47.9,29.8c-2.1-0.6-4.3,0.7-4.9,2.8l-6.7,25.1c-0.6,2.1,0.7,4.3,2.8,4.9c0.3,0.1,0.7,0.1,1,0.1c1.8,0,3.4-1.2,3.9-3   l6.7-25.1C51.3,32.6,50,30.4,47.9,29.8z" />
    <path d="M71.8,14.8c-2.1-0.6-4.3,0.7-4.9,2.8l-6.7,25.1c-0.6,2.1,0.7,4.3,2.8,4.9c0.3,0.1,0.7,0.1,1,0.1c1.8,0,3.4-1.2,3.9-3   l6.7-25.1C75.2,17.6,74,15.4,71.8,14.8z" />
  </g>
</svg>

<div id="container" style="height: 300px"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    series: [{
      data: [1, 1, 1, 1, 1, 1, 1, 1, 100]
    }]
  }, function(chart) { // on complete

    //var imgURL = 'https://cloud3squared.com/files/example.svg';

    //$.get(imgURL, function(data) {
      var $svg = $($('svg')[0]), //$(data).find('svg'),
        d;
        
      $.each($svg.find('path'), function(i, path) {
        d = path.attributes['d'].nodeValue.replace(/ /g, "");
        chart.renderer.path([])
          .attr({
            d: d,
            fill: 'black',
            transform: "translate(100,100)"
          })
          .add();
      });
    //}, 'xml');


  });
});