Search code examples
javascriptcsshighchartshighcharts-ng

customize images and different text in Highcharts

I'm new to the subject of highcarts. I have a message that says "label" and the figure for all categories. I need to customize individual image or text. How can I do this?

I have this code:

http://jsfiddle.net/u3o416xb/

labels: {
  x: -5,
  y: -20,
  useHTML: true,
  format: '<div style="position: absolute; left: 40px"> my label </div> <img style="height: 30px; width: 30px; margin-top: 10px"  src="https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png"></img>'
}
Solution

  • You can give label like following way.

    formatter: function () { return "<div style='position: absolute; left: 40px'>'"+ this.value + "'</div> <img style='height: 30px; width: 30px; margin-top: 10px'  src='https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png'></img>";

    And custom image like following way:

    var categoryImgs = {
            'number1':'https://i.sstatic.net/Tdw3H.png',
            'number2':'https://i.sstatic.net/Tdw3H.png',
            'number3':'https://i.sstatic.net/Tdw3H.png',
            'number4':'https://i.sstatic.net/Tdw3H.png',
            'number5':'https://i.sstatic.net/Tdw3H.png'
        };

formatter: function () { return "<div style='position: absolute; left: 40px'>'"+ this.value + "'</div> <img style='height: 30px; width: 30px; margin-top: 10px' src='"+categoryImgs[this.value]+"'></img>";

    Working Fiddle