CODEWITHSUNDEEP
javascripthighchartssankey-diagram
Aniket Tiwari
Aniket Tiwari

Reputation: 3998

Sankey: Show dynamically text on x-axis

How to show dynamic text on x-axis based on transition. In my first case, I am getting two transitions(football -> basketball & basketball -> Gerard) so I will be showing two labels just like below

But When we get only one transition so how to handle label on the x-axis. What I need is when only one transition is there one label should only come. In the below case Semi-Final label should come. 

Highcharts.chart('container', {

    chart: {
      showAxes: true
    },
    title: {
        text: ''
    },
    xAxis: {
     type: "category",
     categories: ['Semi-Final','Final Phase'],
      max: 2,
      labels: {
        x: 10,
        y: 30,
      },
      lineColor: 'transparent',
      tickLength: 0
    },
    yAxis: {
      visible: false
    },
    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
          ['Football', 'Cricket', 20 ],  
        ],
        type: 'sankey',
    }]
});

Upvotes: 0

Views: 303

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

The number of displayed labels depends on axis extremes. You can make max property dependent on the number of data:

    events: {
        load: function() {
            var max = this.series[0].nodeColumns.length - 2;

            this.xAxis[0].update({
                max: max
            })

        }
    }

Live demo: https://jsfiddle.net/BlackLabel/7s5h41qr/

API: https://api.highcharts.com/highcharts/xAxis.max

Upvotes: 1

Related Questions