Search code examples
highchartsaxis-labelssankey-diagram

Column Labels in Sankey Charts in Highcharts

I've been working on a visualisation using Sankey chart using Highcharts library. It looks like below.enter image description here

I need help with adding labels to each column as highlighted in the above image. I couldn't find any workaround using formatters since there are no x & y axes available in sankey.

It would be great someone here helps me with doing it. you can find my jsfiddle here.

EDIT: I was able to plot the x & y axes now, but trying to place the labels exactly below each column. Broken fiddle link updated.

    const data = [{
    "from": "step1_x",
    "to": "step2_x",
    "weight": 100
  },
  {
    "from": "step1_x",
    "to": "step2_y",
    weight: 35
  },
  {
    "from": "step1_x",
    "to": "step2_z",
    weight: 50
  },
    {
    "from": "step1_y",
    "to": "step2_y",
    weight: 55
  },
  {
    "from": "step1_y",
    "to": "step2_x",
    weight: 20
  },
  {
    "from": "step1_y",
    "to": "step2_z",
    weight: 30
  },
  {
    "from": "step1_z",
    "to": "step2_y",
    weight: 18
  },
  {
    "from": "step1_z",
    "to": "step2_x",
    weight: 15
  },
  {
    "from": "step1_z",
    "to": "step2_z",
    weight: 40
  },
  {
    "from": "step2_x",
    "to": "step3_x",
    "weight": 50
  },
  {
    "from": "step2_x",
    "to": "step3_y",
    weight: 55
  },
  {
    "from": "step2_x",
    "to": "step3_z",
    weight: 30
  },
    {
    "from": "step2_y",
    "to": "step3_y",
    weight: 90
  },
  {
    "from": "step2_y",
    "to": "step3_x",
    weight: 40
  },
  {
    "from": "step2_y",
    "to": "step3_z",
    weight: 51
  },
  {
    "from": "step2_z",
    "to": "step3_y",
    weight: 30
  },
  {
    "from": "step2_z",
    "to": "step3_x",
    weight: 40
  },
  {
    "from": "step2_z",
    "to": "step3_z",
    weight: 90
  },
  
];

const nodes = [{
    "id": "step1_x",
    "name": "X",
    color: 'black'
  }, {
    "id": "step2_x",
    "name": "X",
    color: 'black',
  },
  {
    "id": "step3_x",
    "name": "X",
     color: 'black',
  },
  {
    "id": "step1_y",
    "name": "Y",
    color: '#f15c80'
  }, {
    "id": "step2_y",
    "name": "Y",
        color: '#f15c80'
  }, {
    "id": "step3_y",
    "name": "Y",
        color: '#f15c80'
  }, {
    "id": "step1_z",
    "name": "Z",
    color: '#f7a35c'
  }, {
    "id": "step2_z",
    "name": "Z",
        color: '#f7a35c'
  }, {
    "id": "step3_z",
    "name": "Z",
     color: '#f7a35c'
  },

];


Highcharts.chart('container', {
  title: {
    text: 'Highcharts Sankey Diagram'
  },
  
  yAxis: {
        labels: {
    enabled: true,
    formatter:function () {
    return '1231';
    }
    }
  },

  series: [{
    data: data,
       nodes: nodes,
    type: 'sankey',
    name: 'Sankey demo series',
    nodeWidth: 20
  }],
  plotOptions: {
    sankey: {
      dataLabels: {
        overflow: 'allow',
crop: true,
        enabled: true,
                formatter: function () {
            return this.point.weight;
        }
      }
    }
  }
});
Solution

  • You can add the labels by using renderer.text method. Example below:

    const labels = ['column 1', 'column 2', 'column 3'];

Highcharts.chart('container', {
    chart: {
        spacingBottom: 50,
        events: {
            render: function() {
                const positions = [30, this.chartWidth / 2, this.chartWidth - 30];

                if (this.customLabels) {
                    this.customLabels.forEach((customLabel, i) => {
                        customLabel.attr({
                            x: positions[i],
                            y: this.chartHeight - 20
                        });
                    });
                } else {
                    this.customLabels = [];
                    labels.forEach((label, i) => {
                        this.customLabels.push(
                            this.renderer.text(labels[i])
                            .attr({
                                x: positions[i],
                                y: this.chartHeight - 20,
                                align: 'center'
                            })
                            .css({
                                fontSize: '12px'
                            })
                            .add()
                        );
                    });
                }
            }
        }
    },
    ...
});

    Live demo: https://jsfiddle.net/BlackLabel/tq79c21e/

    API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text