'highchart Sankey chart nodes flow with image for insights

highchart Sankey chart nodes flow with image for insights

enter image description here

highchartssankey-diagram


Solution 1:[1]

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();
      }
    }
  },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sebastian Hajdus

Related Questions