0

enter image description here

I'd like to set an image of a map - or, better yet, a generated map - on the x-z plane of a high-charts graph. Is there a way to do this with background image? I understand you can set the color of the back, bottom, and side frame, is there any way to set images for those frames?

1 Answer 1

0

You can use SVG <pattern> element with <image> added inside of it, and set the chart.options3d.frame.bottom.color equal to this pattern, just like that:

First you need to create new pattern basing on current dimensions of mentioned frame. The best place to implement it, should be the chart.events.load function:

chart: {
    events: {
      load() {
        var chart = this
        var frameBottomDim = chart.frameShapes.bottom.element.getBBox()
        var defs = document.querySelectorAll('defs')[0]
        var pattern = chart.renderer.createElement('pattern')
        var img = chart.renderer.createElement('image')

        pattern.attr({
          "patternUnits": "userSpaceOnUse",
          "x": frameBottomDim.x,
          "y": frameBottomDim.y,
          "width": frameBottomDim.width,
          "height": frameBottomDim.height,
          "id": "frameBg",
        })

        img.attr({
          "href": "https://static.makeuseof.com/wp-content/uploads/2010/03/clouds-1-670x335.jpg",
          "width": frameBottomDim.width,
          "height": frameBottomDim.height,
          preserveAspectRatio: 'none'
        })

        img.add(pattern)
        pattern.add(this.renderer.defs)

      }
    }
}

Then set the frame color property to url(#[pattern_name]):

 options3d: {
      enabled: true,
      alpha: 10,
      beta: 20,
      depth: 400,
      frame: {
        bottom: {
          color: 'url(#frameBg)'
        }
      }
    }

Live example: https://jsfiddle.net/h8tv4xpg/

Web API Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.