highchart Sankey chart nodes flow with image for insights

Question

Could you explain in more detail and prepare a demo version of your case? That will help better understand your problem. — Sebastian Hajdus, Apr 27 '22 at 08:18
in the below sankey chart looking option to add image in the from node to node as in the attached image https://codepen.io/SophTooke/pen/ExorZZj — Souresh Coumar, Apr 27 '22 at 08:52
@SebastianHajdus in the below sankey chart looking option to add image in the from node to node as in the attached image codepen.io/SophTooke/pen/ExorZZj — Souresh Coumar, Apr 27 '22 at 09:50

score 1 · Answer 1 · answered Apr 27 '22 at 10:32

Inside nodes.dataLabels.format add images to node as on example.

nodes: [{
  id: 'Oil',
  colorIndex: 0
}, {
  id: 'Natural Gas',
  colorIndex: 1,
  dataLabels: {
    enabled: true,
    useHTML: true,
    align: 'center',
    varticalAlign: 'middle',
    format: '{point.id} <img src="https://www.highcharts.com/samples/graphics/sun.png"></img>'
  }
}, {
  id: 'Coal',
  colorIndex: 2
}, {
  id: 'Renewable',
  colorIndex: 3
}, {
  id: 'Nuclear',
  colorIndex: 4
}, {
  id: 'R&C',
  name: 'Residential & Commercial'
}],

Alternatively, you can render the image using chart.events.render.

  chart: {
    styledMode: true,
    events: {
      render: function() {
        this.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 60, 180, 30, 30)
          .add();
      }
    }
  },

Thanks a lot this helped me to fix the issue. – Souresh Coumar May 04 '22 at 04:42 — Souresh Coumar, May 04 '22 at 04:42

highchart Sankey chart nodes flow with image for insights

1 Answers1