anson920520 anson920520 - 7 days ago 5
Javascript Question

Highchart : How to use images when using "General drawing"

I am trying to create a diagram for my tasks by using Highcharts

And I assume that I could put some images, by using the

<img>
tag

ren.label('<img src="/images/test.jepg', 10, 82)
.attr({
fill: colors[0],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5
})
.css({
color: 'white'
})
.add()
.shadow(true);


but it doesn't work, how could I use images in General writing?

I want to make something like below.

enter image description here

jsFiddle demo : http://jsfiddle.net/rttav/10/

Answer

You could add an image like this:

      // SaaS client label 
      ren.image('http://lorempizza.com/80/60', 10, 82, 80, 60).add();
      ren.label('SaaS client<br/>(browser or<br/>script)', 10, 82)
        .attr({
          stroke: 'white',
          'stroke-width': 2,
          padding: 5,
          r: 5
        })
        .css({
          color: 'white'
        })
        .add()

Example here from the official docs and updated fiddle: http://jsfiddle.net/rttav/11/

Comments