CODEWITHSUNDEEP
javascripthighcharts
hesolar
hesolar

Reputation: 709

Set column width depending on max datalabel value

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80,
      plotBorderWidth: 1,
      events: {
        load: function() {
            this.yAxis.forEach(function(xAxis) {
            xAxis.update({
                tickLength: xAxis.maxLabelLength + xAxis.minPixelPadding
            }, false);
          });
          this.redraw();
        }
      }
    },




    xAxis: {
      categories: ['']
    },

    yAxis: [{
      categories: ['', '', '']
    }],

    

    series: [{
      borderWidth: 1,
      dataLabels : {
                          enabled: true,
                          format: '{point.value}'  
                        }   ,
      data: [
        {x: 0, y:0, value: "c"},
        {x: 0, y:1, value: "b"},
        {x: 0, y:2, value: "this wont fit conlumn width aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        +"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        +"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        +"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        },
      ]     
      
    }]

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

I'm using the high chart and I need that the column width fits with the maximum length of the max data labels.

In my example you can see the problem clearly:

[http://jsfiddle.net/aferpq9m/1/]

Upvotes: 0

Views: 210

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You need to use breaks. For example:

xAxis: {
  categories: [''],
  breaks: [{
    from: 0.5,
    to: 0.9,
    breakSize: 0
  }, {
    from: 1,
    to: 1.5,
    breakSize: 0
  }, {
    from: 1.5,
    to: 2,
    breakSize: 0
  }]
}

Live demo: http://jsfiddle.net/BlackLabel/2hrc1xdf/

API Reference: https://api.highcharts.com/highcharts/xAxis.breaks

Upvotes: 1

Related Questions