Search code examples
javascripttwitter-bootstraphighchartsdonut-chart

Bootstrap+HighCharts.js Responsive Image Position in Donut Chart

I need to insert an image inside of a donut chart but when using bootstrap and when it becomes responsive the location of the image gets out of the donut chart. I want the image to be in the center of the donut chart, how can i do this?

Example Code : http://paste.ubuntu.com/16889111/

Solution

  • Your code for chart.renderer.image is using fixed values, not relative:

    // Render the image
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 220, 200, 60, 60)
.add();

    I would suggest making your four values (x position of top corner, y position of top corner, image width, and image height) variables that are based on the chart container's current size.

    Consider setting values based on $('#chart').height() and $('#chart').width() and test out the chart.redraw() and chart.reflow() functions to make sure the image within your chart gets updated when the viewport changes.

    Here's some links in the API documentation that may be helpful to you: