Xaxis should get aligned at (0,0) in highcharts

Question

I want to align xaxis line and axis labels at position (0,0) when data contains negative values. ex. consider this fiddle example where negative values bar goes down and xaxis is set at (0,0) http://jsfiddle.net/13d54mp8/2/

   var YTD = 'YTD';
   var yr1 = 'Year 1';
   var yr3 = '*3 Year';
   var yr5 = '*5 Year';
   var sinceIN = '* Since Inception (5/31/2012)';
   
   $(function() {
    var chart;
    $(document).ready(function() {
     chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'column',
        events: {
          load: function() {
            var xx = (-1) * (this.yAxis[0].translate(0, false, false));
            this.xAxis[0].axisGroup.translate(0, xx);
            this.xAxis[0].labelGroup.translate(0, xx);
          }
        }
      },
      title: {
        text: 'Report Title',
        style: {
          fontSize: '18px',
          color: '#1D5293',
          fontWeight: 'bold'
        },
      },
      subtitle: {
        text: '(As of 6/30/2012)',
        style: {
          fontSize: '18px',
          color: '#1D5293'
        },
        y: 40
      },
      xAxis: {
        categories: [YTD, yr1, yr3, yr5, sinceIN],
        lineColor: '#C1BADB',
        tickWidth: 2,

      },
      yAxis: {
        title: {
          text: ''
        },
        lineColor: '#C1BADB',
        lineWidth: 1,
        labels: {
          formatter: function() {
            return this.value + '%';
          }
        },
        gridLineWidth: 0,
        tickWidth: 2

      },
      tooltip: {
        enabled: true,
        formatter: function() {
          return this.series.name + ': ' + this.y + '%';
        },
      },
      credits: {
        enabled: false
      },
      series: [{
          name: 'XXX Company Ltd. (Net)',
          data: [3.02, -0.61, 2.03, 1.51, 5.35],
          dataLabels: {
            enabled: true,
            color: '#333',
            formatter: function() {
              return this.y + '%'
            }
          },
          color: '#1D5293'
        },
        {
          name: 'XXX Relative Return Index (Gross)**',
          data: [2.45, 0.85, 4.11, 0.73, 3.56],
          dataLabels: {
            enabled: true,
            color: '#333',
            formatter: function() {
              return this.y + '%'
            }
          },
          color: '#9E9E9E'
        }
      ],
      legend: {
        layout: 'vertical',
        align: 'top',
        verticalAlign: 'top',
        x: 50,
        y: 65,
        borderWidth: 0,
        margin: 30
      },
    });
  });
});

Now I want to make work the same use case for inverted column chart where xaxis is on top and yaxis is at right side. check fiddle - http://jsfiddle.net/fa2e80qu/3/

    var YTD = 'YTD'
var yr1 = 'Year 1'
var yr3 = '*3 Year'
var yr5 = '*5 Year'
var yr7 = '*7 Year'
var yr9 = '*9 Year'
var sinceIN = '* Since '

$(function() {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                events: {
                    load: function() {
                        var xx = (0.34)* (this.yAxis[0].translate(0, false, false));
                        this.xAxis[0].axisGroup.translate(0, xx);
                        this.xAxis[0].labelGroup.translate(0, xx);

                    }
                }
            },
            title: {
                text: 'Report Title',
                style: {
                    fontSize: '18px',
                    color: '#1D5293',
                    fontWeight: 'bold'
                },
            },
            subtitle: {
                text: '(As of 6/30/2012)',
                style: {
                    fontSize: '18px',
                    color: '#1D5293'
                },
                y: 40
            },
            xAxis: {
                categories: [YTD, yr1, yr3, yr5, yr7,yr9, sinceIN],
                lineColor: '#C1BADB',
                tickWidth: 2,
                opposite:true
            
            },
            yAxis: {
            opposite:true,
                reversed:true,
                title: {
                    text: ''
                },
                lineColor: '#C1BADB',
                lineWidth: 1,
                labels: {
                    formatter: function() {
                        return this.value + '%';
                    }
                },
                gridLineWidth: 0,
                tickWidth: 2

            },
            tooltip: {
                enabled: true,
                formatter: function() {
                    return this.series.name + ': ' + this.y + '%';
                },
            },
            credits: {
                enabled: false
            },
            series: [
                {
                name: 'XXX Company Ltd. (Net)',
                data: [3.02, -0.61, 2.03, 1.51, 5.35, -0.50,2.5],
                dataLabels: {
                    enabled: true,
                    color: '#333',
                    formatter: function() {
                        return this.y + '%'
                    }
                },
                color: '#1D5293'},
            {
                name: 'XXX Relative Return Index (Gross)**',
                data: [2.45, 0.85, 4.11, 0.73, 3.56,-0.5,1.6],
                dataLabels: {
                    enabled: true,
                    color: '#333',
                    formatter: function() {
                        return this.y + '%'
                    }
                },
                color: '#9E9E9E'}
            ],
            legend: {
                enabled:false,
                layout: 'vertical',
                align: 'top',
                verticalAlign: 'top',
                x: 50,
                y: 65,
                borderWidth: 0,
                margin: 30
            },
        });
    });

});

Expected behavior is to have xaxis line and labels aligns properly at position (0,0)

score 0 · Answer 1 · answered Nov 23 '20 at 10:36

0

You can use the toPixels method:

  chart: {
    ...,
    events: {
      load: function() {
        var xx = this.yAxis[0].toPixels(0) - this.plotTop;
        this.xAxis[0].axisGroup.translate(0, xx);
        this.xAxis[0].labelGroup.translate(0, xx);

      }
    }
  }

Live demo: http://jsfiddle.net/BlackLabel/07rej16z/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

answered Nov 23 '20 at 10:36

ppotaczek

36,341
2
14
24

Hi @ppotaczek, When I first hit your given fiddle url then xaxis was not aligned but when I click on run button then it got aligned. Is it something due to load event? – Purva Kshatriya Nov 23 '20 at 11:49
Hi @Purva Kshatriya, Have you tested it multiple times? I have not encountered such behavior. – ppotaczek Nov 23 '20 at 11:55
Okay. Will verify it again. Also, when I resize the chart, it gets misaligned and not on 0 positioned. – Purva Kshatriya Nov 23 '20 at 13:19
I found above fiddle from highcharts forum . Do you have any idea about -1 multiplier factor? why it is multiplied by -1. Thanks in advance. – Purva Kshatriya Nov 23 '20 at 13:26
Yes, because you need to use `render` instead of `load` event, example: http://jsfiddle.net/BlackLabel/bx9w7jhm/. About the translate method - you need to investigate how it works: https://github.com/highcharts/highcharts/blob/master/ts/Core/Axis/Axis.ts#L4541 – ppotaczek Nov 24 '20 at 09:36

Xaxis should get aligned at (0,0) in highcharts

1 Answers1