CODEWITHSUNDEEP
csshighchartsfrontendreact-highcharts
Aajinkya Singh
Aajinkya Singh

Reputation: 713

Highcharts bar chart overlay

I want to implement this kind of UI with Highcharts. I've implemented everything but the error icon as shown below.

enter image description here

Anyone has any ideas how I can implement this? Like is there any inbuilt thing in Highcharts or do we have to do it using manual css?

Upvotes: 0

Views: 340

Answers (1)

madepiet
madepiet

Reputation: 884

I think the best way to do this is to use SVG Renderer and render these elements in the desired positions: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer https://support.highcharts.com/support/solutions/articles/44001706971-how-to-use-highcharts-svg-renderer-

function(chart) {
  var data = chart.series[0].data;
  var group = chart.renderer.g('icons').attr({
    zIndex: 5
  }).add();

  for (i = 0; i < data.length; i++) {
    chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', data[i].barX + chart.plotLeft - 10, data[i].plotY + chart.plotTop - 15, 30, 30).add(group);
  }
});

Demo: https://jsfiddle.net/BlackLabel/2xsjw7qc/

Upvotes: 1

Related Questions