CODEWITHSUNDEEP
highchartswidth
rkeerthi
rkeerthi

Reputation: 25

Highcharts multiple x axis and yaxis. The width of the 1st x-axis is not in sync with browser resize

I am having issue when using width on 1st x-axis. Is there a way we define the width on x-axis in %? I tried to use width in % and used 'useHTML' to true, but that didnt work. I tried other solution by setting the new width when window.resize, that didnt work either. Please suggest any workaround or solution for this issue. 

xAxis: [{
                        categories:['No Reason',],
                        tickmarkPlacement: 'on',
                        width:120,
                    },{
                        categories: ['','DPU link','to maintain air','Temp below 39 deg.','keep running',],
                        tickmarkPlacement: 'on',
                        offset: 0,
                        //width: 550,
                        plotBands: [{

                                        label:{
                                            text:"No Reason",
                                            style:{
                                                fontFamily: 'arial',
                                                fontSize: '14px',
                                            },
                                        },
                                        color: '',
                                        color: '#d1deea',
                                        from:-0.5,
                                        to :0.5,

                                },{

                                            label:{
                                                text:"Acceptable",
                                                style:{
                                                    fontFamily: 'arial',
                                                    fontSize: '14px',
                                                },
                                            },
                                            color: '',
                                            from:0.5,
                                            to :3.5,

                                    },
                                    {

                                            label:{
                                                text:"Not Acceptable",
                                                style:{
                                                    fontFamily: 'arial',
                                                    fontSize: '14px',
                                                },
                                            },

                                           color: '#E5E4E2',
                                            from:3.5,
                                            to :4.5 
                                     }],
                }],
                yAxis: [{
                showLastLabel:false,
                showFirstLabel:false,
                gridZIndex: -1,
                title: {
                    text: 'Total Number Of Capture'
                },
                stackLabels: {
                    enabled:true,
                    style: {
                        color: 'contrast',
                        fontFamily: 'arial',
                        fontSize: '14px',
                        fontWeight: 'bold',
                        textShadow: false
                    }
                }
            },{
                showLastLabel:false,
                showFirstLabel:false,
                gridZIndex: -1,
                title: {
                    text: 'Total Number Of Capture'
                },
                style: {
                    color: 'Black',
                    fontFamily: 'arial',
                    fontSize: '14px',
                },
                stackLabels: {
                    enabled: false,
                    style: {
                        color: 'contrast',
                        fontFamily: 'arial',
                        fontSize: '14px',
                        fontWeight: 'bold',
                        textShadow: false
                    }
                },
                opposite:true
            }],

Here is the fiddle for full code : http://jsfiddle.net/o490zwp2/3/

Upvotes: 1

Views: 263

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7896

Width of xAxis in % is not supported. You could extend Highcharts by adding new options - e.g. widthPerc.

  //add support for axis' left and width set in percent
  (function(H) {
    H.wrap(H.Axis.prototype, 'setAxisSize', function(proceed) {
      // Run original proceed method
      proceed.apply(this, [].slice.call(arguments, 1));

      var chart = this.chart,
        options = this.options,
        width = options.widthPerc,
        left = options.leftPerc;

      // Check for percentage based input values
      if (width) {
        width = parseFloat(width) / 100 * chart.plotWidth;
        this.width = width;
        options.width = width;
      }
      if (left) {
        left = parseFloat(left) / 100 * chart.plotWidth + chart.plotLeft;
        this.left = left;
        options.left = left;
      }
    });
  }(Highcharts));

Example: http://jsfiddle.net/o5w62uc6/

width of xAxis is used by Highcharts to position some SVG elements, so just overriding default property would require more wrapping.

Alternative solution for your problem could be to set max and endOnTick for first x axis like:

            xAxis: [{
              categories: ['No Reason', ],
              tickmarkPlacement: 'on',
              //width:120,
              max: 4,
              endOnTick: false
            }, {

Example: http://jsfiddle.net/wL1bdftj/

Upvotes: 2

Related Questions