CODEWITHSUNDEEP
highcharts
Shaniqwa
Shaniqwa

Reputation: 2074

Highcharts: circle with image background

i'm using Highcharts to create a pie, and I need to put user's profile image in a circle in the middle of it. I have managed to add the image but couldn't get it to be round, and I managed to add a circle but without image background :/ what it the best way to combine the tow? by the way it must be part of the svg and not an absolute div on top of the pie, because the tooltip needs to be on top of that image with opacity

to add a circle I used this code : 

var pixelX = 438;
var pixelY = 276;
var pixelR = 70;

// add my circle
chart.renderer.circle(pixelX, pixelY, pixelR)
.attr({
    zIndex: 100,
    align: 'center',
    // fill: 'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)',
    color: 'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)',
    stroke: 'black',
    'stroke-width': 2
    })
.css({
  backgroundImage :'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)'
})
.add();         
});

this example shows how to do it with pure SVG : http://jsfiddle.net/9zkfodwp/1/

Upvotes: 1

Views: 564

Answers (1)

Shaniqwa
Shaniqwa

Reputation: 2074

resolved it by defining a pattern with the img, works fine but now need to find a way for the pattern to be no-repeat.

code used to add pattern: 

function(chart) { // on complete
var r = chart.renderer,
    pattern = r.createElement('pattern')
        .attr({
            id: 'pattern',
            patternUnits: 'userSpaceOnUse',
            x: 0,
            y: 0,
            width: 180,
            height: 190,
            viewBox: '0 0 135 135'
        })
        .add(r.defs);

   r.rect(0, 0, 135, 135, 0)
       .attr('fill', '#ddd')
       .add(pattern);

   r.image(profileImg,0,0,135,135)
       .add(pattern);
});

and when I add the circle it can have a fill of the pattern: 

// add my circle
this.circle = chart.renderer.circle(pixelX, pixelY, pixelR).attr({
    fill: 'url(#pattern)'
});
this.circle.add();

Upvotes: 1

Related Questions