title: Highcharts Backgroundimage for bar graph
body: <p>I want to add a background image to a bar chart using Highcharts and display it in a <code>UIWebView</code>.</p>
  
  <p>So far I've been using this little plugin, which is working fine in latest Chrome.
  However, as soon as I load this into my UIWebView, the image is not displayed.
  I think this is related to the fact that iOS might not be able to parse the correct path for the image file?</p>
  
  <p>Is there another (simpler) way to just add a background-image to a bar chart?</p>
  
  <p><strong>In my Highcharts data series</strong></p>
  
  <pre><code>color: {
     pattern: 'static/img/theimage.png',
     width: 160,
     height: 500
  }
  </code></pre>
  
  <p><strong>The plugin</strong></p>
  
  <pre><code>/**
   * Highcharts pattern fill plugin
   */
  (function() {
      var idCounter = 0,
          base = Highcharts.Renderer.prototype.color;
  
      Highcharts.Renderer.prototype.color = function(color, elem, prop) {
          if (color &amp;&amp; color.pattern &amp;&amp; prop === 'fill') {
              // SVG renderer
              if (this.box.tagName == 'svg') {
                  var id = 'highcharts-pattern-'+ idCounter++;
                  var pattern = this.createElement('pattern')
                          .attr({
                              id: id,
                              patternUnits: 'userSpaceOnUse',
                              width: color.width,
                              height: color.height
                          })
                          .add(this.defs),
                      image = this.image(
                          color.pattern, 0, 0, color.width, color.height
                      )
                      .add(pattern);
                  return 'url(' + this.url + '#' + id + ')';
  
              // VML renderer
              } else {
                  var markup = ['&lt;', prop, ' type="tile" src="', color.pattern, '" /&gt;'];
                  elem.appendChild(
                      document.createElement(this.prepVML(markup))
                  );                
              }
  
          } else {
              return base.apply(this, arguments);
          }
      };    
  })();
  </code></pre>